Fork me on GitHub
#cljsrn
<
2021-01-10
>
zendevil.eth12:01:28

What’s the best way to do tests in react native when using shadow-cljs?

mynomoto14:01:40

I'm not sure what is the best way but I used jest and liked the result.

zendevil.eth06:01:06

how did you use jest with clojurescript?

zendevil.eth07:01:44

can you give an example file?

mynomoto14:01:32

I have an example project, there is some setup necessary. https://github.com/mynomoto/reagent-expo/tree/jest-test

zendevil.eth14:01:51

how do you run the tests?

mynomoto14:01:26

It is on the readme.

zendevil.eth14:01:45

shadow-cljs watch test?

mynomoto14:01:15

That will build the test files. You need to run yarn jest on another terminal to run jest.

zendevil.eth14:01:49

i don’t use yarn

mynomoto14:01:26

npm run jest

zendevil.eth14:01:10

how does it know which files contain the tests?

zendevil.eth14:01:40

how does jest know which directory to look at?

zendevil.eth14:01:18

so in my own project i have to add this in my package.json?

zendevil.eth14:01:20

the testMatch keyword?

zendevil.eth14:01:32

Sorry for the ignorance, I haven’t used jest

mynomoto14:01:17

There are many ways to do it. That project is a working example, if you follow it you should get things working.

mynomoto14:01:12

You can see the commits I did to add jest. Those will show you the necessary changes.

zendevil.eth14:01:36

where are you based?

zendevil.eth14:01:24

what is the snapshotResolver?

zendevil.eth14:01:16

I’m getting the following error when running shadow-cljs watch test

zendevil.eth14:01:18

-- Spec failed --------------------  {:target :npm-module, :output-dir “test-out”, :build-id :test} should contain key: :entries | key   | spec      | |==========+=================| | :entries | (coll-of    | |     | simple-symbol? | |     | :distinct   | |     | true      | |     | :min-count   | |     | 1       | |     | :kind     | |     | vector?)    | -- Relevant specs ------- :shadow.build.targets.npm-module/target:  (clojure.spec.alpha/keys   :req-un   [:shadow.build.targets.shared/output-dir   :shadow.build.targets.npm-module/entries]   :opt-un   [:shadow.build.targets.npm-module/runtime   :shadow.build.targets.shared/devtools]) :shadow.build.config/build+target:  (clojure.spec.alpha/and   :shadow.build.config/build   (clojure.spec.alpha/multi-spec   shadow.build.config/target-spec   :target)) ------------------------- Detected 1 error

mynomoto14:01:23

I live in Brazil. That are for view snapshots. Google for jest snapshots to see the use case for those.

mynomoto14:01:41

That is probably a shadow breaking change. Not sure about what goes in that key and I'm afk right now.

mynomoto15:01:53

Actually an empty vector on :entries should work.

zendevil.eth18:01:40

I’m getting the following error after adding the []

zendevil.eth18:01:42

Invalid configuration -- Spec failed --------------------  {:target ...,   :output-dir ...,   :entries [],       ^^   :build-id ...} should satisfy  (<= 1 (count %) Integer/MAX_VALUE) -- Relevant specs ------- :shadow.build.targets.npm-module/entries:  (clojure.spec.alpha/coll-of   clojure.core/simple-symbol?   :distinct   true   :min-count   1   :kind   clojure.core/vector?) :shadow.build.targets.npm-module/target:  (clojure.spec.alpha/keys   :req-un   [:shadow.build.targets.shared/output-dir   :shadow.build.targets.npm-module/entries]   :opt-un   [:shadow.build.targets.npm-module/runtime   :shadow.build.targets.shared/devtools]) :shadow.build.config/build+target:  (clojure.spec.alpha/and   :shadow.build.config/build   (clojure.spec.alpha/multi-spec   shadow.build.config/target-spec   :target)) ------------------------- Detected 1 error

zendevil.eth20:01:16

I have the following in my package.json

zendevil.eth20:01:17

“jest”: { “preset”: “react-native”, “testPathIgnorePatterns”: [ “/node_modules/“, “/.shadow-cljs/” ], “testMatch”: [ “/test-out//*_test.js” ], “snapshotResolver”: “<rootDir>/customSnapshotResolver.js” }

zendevil.eth20:01:34

but when I run npm run jest, I get the following error:

zendevil.eth20:01:57

npm ERR! missing script: jest npm ERR!  npm ERR! Did you mean this? npm ERR!   test npm ERR! A complete log of this run can be found in: npm ERR!   /Users/prikshetsharma/.npm/logs/2021-01-17T2013_25_770Z-debug.log prikshetsharma@vpn13-222 Humboi % npm run jest npm ERR! missing script: jest npm ERR!  npm ERR! Did you mean this? npm ERR!   test npm ERR! A complete log of this run can be found in: npm ERR!   /Users/prikshetsharma/.npm/logs/2021-01-17T2014_42_077Z-debug.log

mynomoto13:01:52

Oh, on npm it is npm run test

zendevil.eth14:01:51

that gives the following error:

zendevil.eth14:01:56

> [email protected] test /Users/prikshetsharma/Desktop/Humboi > jest sh: jest: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] test: jest npm ERR! spawn ENOENT npm ERR!  npm ERR! Failed at the [email protected] test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR!   /Users/prikshetsharma/.npm/logs/2021-01-18T1422_50_869Z-debug.log

zendevil.eth14:01:09

and the log file has the following content:

zendevil.eth14:01:10

0 info it worked if it ends with ok 1 verbose cli [ ‘/usr/local/bin/node’, ‘/usr/local/bin/npm’, ‘run’, ‘test’ ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ ‘pretest’, ‘test’, ‘posttest’ ] 5 info lifecycle [email protected]~pretest: [email protected] 6 info lifecycle [email protected]~test: [email protected] 7 verbose lifecycle [email protected]~test: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]test: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/prikshetsharma/Desktop/Humboi/node_modules/.bin:/opt/X11/bin:/Users/prikshetsharma/.rbenv/shims:/usr/local/opt/ruby/bin:/usr/local/opt/ruby/lib/ruby/gems/2.7.0/bin:/usr/local/opt/ruby/bin:/usr/local/bin:/Users/prikshetsharma/Library/Android/sdk/platform-tools:/Users/prikshetsharma/Library/Android/sdk/emulator:/usr/local/opt/ruby/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/TeX/texbin:/usr/local/share/dotnet:/opt/X11/bin:/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/prikshetsharma/.rvm/bin:/usr/local/bin:/Users/prikshetsharma/Library/Android/sdk/emulator:/Users/prikshetsharma/Library/Android/sdk/tools:/Users/prikshetsharma/Library/Android/sdk/tools/bin:/Users/prikshetsharma/Library/Android/sdk/platform-tools 9 verbose lifecycle [email protected]~test: CWD: /Users/prikshetsharma/Desktop/Humboi 10 silly lifecycle [email protected]~test: Args: [ ‘-c’, ‘jest’ ] 11 info lifecycle [email protected]~test: Failed to exec test script 12 verbose stack Error: [email protected] test: jest 12 verbose stack spawn ENOENT 12 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18) 12 verbose stack at ChildProcess.emit (events.js:315:20) 12 verbose stack at maybeClose (internal/child_process.js:1048:16) 12 verbose stack at Process.ChildProcess.handle.onexit (internal/childprocess.js:288:5) 13 verbose pkgid [email protected] 14 verbose cwd /Users/prikshetsharma/Desktop/Humboi 15 verbose Darwin 20.2.0 16 verbose argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “test” 17 verbose node v14.15.1 18 verbose npm v6.14.8 19 error code ELIFECYCLE 20 error syscall spawn 21 error file sh 22 error errno ENOENT 23 error [email protected] test: jest 23 error spawn ENOENT 24 error Failed at the [email protected] test script. 24 error This is probably not a problem with npm. There is likely additional logging output above. 25 verbose exit [ 1, true ]

mynomoto14:01:58

Did you add the dependencies on package.json? And run npm install after adding the dependencies?

zendevil.eth14:01:12

yes I have already run npm install

zendevil.eth14:01:24

but am still getting the error

zendevil.eth14:01:27

how to fix it?

mynomoto14:01:00

Is the project on github? Or can you paste your package.json?

mynomoto15:01:29

I think this is the lock one. I want the one used for configuration.

zendevil.eth15:01:00

{ "name": "Humboi", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-native-async-storage/async-storage": "^1.13.2", "@react-native-community/cameraroll": "^4.0.1", "@react-native-community/masked-view": "^0.1.10", "@react-navigation/bottom-tabs": "^5.11.3", "@react-navigation/native": "^5.9.0", "@unimodules/core": "^7.0.0", "create-react-class": "^15.7.0", "expo-camera": "^9.1.1", "react": "16.13.1", "react-dom": "^16.13.0", "react-native": "0.63.4", "react-native-camera": "^3.42.0", "react-native-camera-roll-picker": "^2.0.0", "react-native-elements": "^3.1.0", "react-native-gesture-handler": "^1.9.0", "react-native-google-signin": "^2.1.1", "react-native-reanimated": "^1.13.2", "react-native-safe-area-context": "^3.1.9", "react-native-screens": "^2.16.1", "react-native-vector-icons": "^7.1.0", "react-native-video": "^4.3.0" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/runtime": "^7.8.4", "@react-native-community/eslint-config": "^1.1.0", "@testing-library/react-native": "^7.1.0", "babel-jest": "^25.1.0", "eslint": "^6.5.1", "jest": "^25.1.0", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1" }, "jest": { "preset": "react-native", "testPathIgnorePatterns": [ "/node_modules/", "/.shadow-cljs/" ], "testMatch": [ "/test-out//*_test.js" ], "snapshotResolver": "<rootDir>/customSnapshotResolver.js" } }

mynomoto15:01:39

What is the output of running npm install?

zendevil.eth15:01:02

npm WARN @react-native-community/[email protected] requires a peer of react-native@>=0.57 <=0.62 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-barcode-scanner-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-camera-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-face-detector-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-file-system-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-permissions-interface@* but none is installed. You must install peer dependencies yourself. removed 9 packages and audited 1380 packages in 4.168s 14 packages are looking for funding  run npm fund for details found 4 low severity vulnerabilities  run npm audit fix to fix them, or npm audit for details prikshetsharma@vpn13-222 Humboi % npm run test > [email protected] test /Users/prikshetsharma/Desktop/Humboi > jest sh: jest: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] test: jest npm ERR! spawn ENOENT npm ERR!  npm ERR! Failed at the [email protected] test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR!   /Users/prikshetsharma/.npm/logs/2021-01-18T1442_54_628Z-debug.log prikshetsharma@vpn13-222 Humboi % npm install npm WARN @react-native-community/[email protected] requires a peer of react-native@>=0.57 <=0.62 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-barcode-scanner-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-camera-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-face-detector-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-file-system-interface@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of unimodules-permissions-interface@* but none is installed. You must install peer dependencies yourself. removed 9 packages and audited 1380 packages in 5.365s 14 packages are looking for funding  run npm fund for details found 4 low severity vulnerabilities  run npm audit fix to fix them, or npm audit for details

mynomoto15:01:13

Try to run npm run test. You did not installed jest globally so running jest is not expected to work.

zendevil.eth01:01:50

But npm run test gives the following:

zendevil.eth01:01:52

> [email protected] test /Users/prikshetsharma/Desktop/Humboi > jest sh: jest: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] test: jest npm ERR! spawn ENOENT npm ERR!  npm ERR! Failed at the [email protected] test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR!   /Users/prikshetsharma/.npm/logs/2021-01-19T0135_32_701Z-debug.log’]

mynomoto01:01:46

You should remove the test entry on package.json scripts.

zendevil.eth04:01:52

after removing and running npm run test, I get the following:

zendevil.eth04:01:52

> [email protected] test /Users/prikshetsharma/Desktop/Humboi > echo ‘Error: no test specified’ Error: no test specified

mynomoto14:01:23

Do you have tests on the project?

mynomoto16:01:17

Then that is expected. It is telling you that you have no tests.

zendevil.eth16:01:11

you said remove the test from package.json

zendevil.eth16:01:19

and npm run jest doesn’t work either

zendevil.eth16:01:59

Here’s my package.json currently with test script removed:

zendevil.eth16:01:00

{ “name”: “Humboi”, “version”: “0.0.1", “private”: true, “scripts”: { “android”: “react-native run-android”, “ios”: “react-native run-ios”, “start”: “react-native start”, “lint”: “eslint .” }, “dependencies”: { “@react-native-async-storage/async-storage”: “^1.13.2”, “@react-native-community/cameraroll”: “^4.0.1”, “@react-native-community/masked-view”: “^0.1.10”, “@react-navigation/bottom-tabs”: “^5.11.3”, “@react-navigation/native”: “^5.9.0”, “@unimodules/core”: “^7.0.0”, “@unimodules/react-native-adapter”: “^6.0.0”, “create-react-class”: “^15.7.0”, “expo-camera”: “^9.1.1”, “expo-media-library”: “^10.0.0”, “react”: “16.13.1”, “react-dom”: “^16.13.0”, “react-native”: “0.63.4”, “react-native-beautiful-video-recorder”: “^2.0.1”, “react-native-camera”: “^3.42.0”, “react-native-camera-roll-picker”: “^2.0.0”, “react-native-elements”: “^3.1.0”, “react-native-gesture-handler”: “^1.9.0”, “react-native-google-signin”: “^2.1.1”, “react-native-reanimated”: “^1.13.2”, “react-native-safe-area-context”: “^3.1.9”, “react-native-screens”: “^2.16.1”, “react-native-unimodules”: “^0.12.0”, “react-native-vector-icons”: “^7.1.0”, “react-native-video”: “^4.3.0”, “unimodules-permissions-interface”: “^5.4.0” }, “devDependencies”: { “@babel/core”: “^7.8.4", “@babel/runtime”: “^7.8.4", “@react-native-community/eslint-config”: “^1.1.0", “@testing-library/react-native”: “^7.1.0", “babel-jest”: “^25.1.0", “eslint”: “^6.5.1", “jest”: “^25.5.4", “metro-react-native-babel-preset”: “^0.59.0", “react-test-renderer”: “16.13.1" }, “jest”: { “preset”: “react-native”, “testPathIgnorePatterns”: [ “/node_modules/“, “/.shadow-cljs/” ], “testMatch”: [ “/test-out//*_test.js” ], “snapshotResolver”: “<rootDir>/customSnapshotResolver.js” } }

mynomoto17:01:26

Now the command is working but it could not find any tests. You need some tests on the project.

zendevil.eth18:01:30

I have the tests in the test/myapp/core_test.cljs directory

mynomoto18:01:50

Did you compile the tests to javascript with shadow-cljs watch test?

mynomoto13:01:26

And you can find the compiled test on the test-out folder?

zendevil.eth00:01:15

but there are no test scripts for npm run test.

zendevil.eth00:01:23

what test script should I add?

mynomoto01:01:47

Jest works without a test script. The message you are receiving says that it could not find any tests.