Expo diagnostics:
Expo CLI 3.28.1 environment info:
System:
OS: Windows 10 10.0.17134
Binaries:
Node: 12.19.0 -
Yarn: 1.22.4 -
npm: 6.14.7 -
IDEs:
Android Studio: Version 4.1.0.0 AI-201.8743.12.41.6858069
npmPackages:
expo: ~39.0.2 => 39.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
Expo Workflow: managed
I started following the “Testing with Jest” then I started adding a few dev dependencies that I was finding here and there… but still can’t make it work:
My package.json;
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watch --coverage=false --changedSince=origin/master",
"testDebug": "jest -o --watch --coverage=false",
"testFinal": "jest",
"eject": "expo eject"
},
"dependencies": {
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-web": "~0.13.12"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"^.+\\.tsx?$": "ts-jest"
},
"testMatch": [
"**/__tests__/**/*.ts?(x)",
"**/?(*.)+(spec|test).ts?(x)"
],
"moduleFileExtensions": [
"js",
"ts",
"tsx"
],
"globals": {
"ts-jest": {
"tsConfig": {
"jsx": "react"
}
}
},
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{ts,tsx}",
"!**/coverage/**",
"!**/node_modules/**",
"!**/babel.config.js",
"!**/jest.setup.js",
"!**/*.styles.{ts,tsx}"
]
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@babel/preset-typescript": "^7.12.1",
"@testing-library/jest-native": "^3.4.3",
"@testing-library/react-native": "^7.1.0",
"@types/jest": "^26.0.15",
"@types/react": "~16.9.35",
"@types/react-dom": "~16.9.8",
"@types/react-native": "~0.63.2",
"@types/react-test-renderer": "^16.9.3",
"babel-jest": "^26.6.0",
"babel-preset-expo": "^8.3.0",
"jest": "^26.6.0",
"jest-expo": "^39.0.0",
"react-native-testing-library": "^6.0.0",
"react-test-renderer": "^16.13.1",
"ts-jest": "^26.4.1",
"typescript": "~3.9.5"
},
"private": true
}
My App.tsx is:
import React from 'react';
import { View } from 'react-native';
import Main from './src/main/main';
export default function App() {
return (
<View>
<Main />
</View>
);
}
My App.test.tsx
import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';
describe('<App />', () => {
it('has 1 child', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree.children.length).toBe(1);
});
});
The errors:
FAIL ./App.test.ts
● Test suite failed to run
App.test.ts:9:35 - error TS2749: 'App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?
9 const tree = renderer.create(<App />).toJSON();
~~~
App.test.ts:10:5 - error TS2345: Argument of type 'void' is not assignable to parameter of type 'TestRendererOptions | undefined'.
10 expect(tree.children.length).toBe(1);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
App.test.ts:10:12 - error TS2448: Block-scoped variable 'tree' used before its declaration.
10 expect(tree.children.length).toBe(1);
~~~~
App.test.ts:9:11
9 const tree = renderer.create(<App />).toJSON();
~~~~
'tree' is declared here.
App.test.ts:10:12 - error TS2454: Variable 'tree' is used before being assigned.
10 expect(tree.children.length).toBe(1);
~~~~
App.test.ts:10:17 - error TS2339: Property 'children' does not exist on type 'ReactTestRenderer'.
10 expect(tree.children.length).toBe(1);
~~~~~~~~
App.test.ts:9:39 - error TS1005: '>' expected.
9 const tree = renderer.create(<App />).toJSON();
~
App.test.ts:9:40 - error TS1161: Unterminated regular expression literal.
9 const tree = renderer.create(<App />).toJSON();
App.test.ts:10:5 - error TS1005: ',' expected.
10 expect(tree.children.length).toBe(1);
~~~~~~
App.test.ts:10:41 - error TS1005: ')' expected.
10 expect(tree.children.length).toBe(1);
~
Also this appears as I try to test:
Expected react-native/jest-preset to define transform[^.+\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]
react-native/jest-preset contained different transformIgnorePatterns than expected
I even tried changing the test to “App.test.js”, now with these errors:
FAIL ./App.test.js (8.77s)
● Console
console.error
The above error occurred in the <App> component:
in App (at App.test.js:8)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)
at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9897:10)
● <App /> › has 1 child
TypeError: Cannot read property 'createElement' of undefined
5 | export default function App() {
6 | return (
> 7 | <View>
| ^
8 | <Main />
9 | </View>
10 | );
at App (App.tsx:7:5)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
The code is working, basically the main is just the “Hello word”… but I don’t know what to do with the testing…