Environment description:
I have to create a react-native component and publish it to npm. In my process I have to planned the executing of unit tests but after many tries I cannot configure jest for my projet.
See bellow my package.json.There is no dependencie but only devDependencies and peerDependencies:
"scripts": {
"test": "jest",
"test-cov": "jest --coverage=true",
},
"peerDependencies": {
"react": "^16.13.0",
"react-native": "^0.63.0"
},
"devDependencies": {
"eslint": "^7.6.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.0.5",
"react": "16.13.1",
"react-native": "^0.63.1",
"@babel/core": "^7.11.4",
"@babel/runtime": "^7.11.2",
"babel-jest": "^26.3.0",
"jest": "^26.4.2",
"metro-react-native-babel-preset": "^0.63.0"
},
"jest": {
"preset": "react-native"
},
I have also a .babelrc file with this content:
{
"presets": ["module:metro-react-native-babel-preset"]
}
In my src/ folder, I use the es6 syntaxe to import my other files or react-native's components like that:
import { Dimensions } from 'react-native';
import { colors } from './colors';
Problem:
When I run the command npm run test I have always this error:
FAIL __tests__/index.test.js
● Test suite failed to run
SyntaxError: C:\Users\flori\dev\phf_components\phf-native-style\node_modules\react-native\Libraries\polyfills\error-guard.js: Unexpected token, expected ";" (14:5)
12 | let _inGuard = 0;
13 |
> 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
| ^
15 | type Fn<Args, Return> = (...Args) => Return;
16 |
17 | /**
at Parser._raise (node_modules/@babel/parser/lib/index.js:766:17)
at Parser.raiseWithData (node_modules/@babel/parser/lib/index.js:759:17)
at Parser.raise (node_modules/@babel/parser/lib/index.js:753:17)
at Parser.unexpected (node_modules/@babel/parser/lib/index.js:8966:16)
at Parser.semicolon (node_modules/@babel/parser/lib/index.js:8948:40)
at Parser.parseExpressionStatement (node_modules/@babel/parser/lib/index.js:11970:10)
at Parser.parseStatementContent (node_modules/@babel/parser/lib/index.js:11566:19)
at Parser.parseStatement (node_modules/@babel/parser/lib/index.js:11430:17)
at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/lib/index.js:12012:25)
at Parser.parseBlockBody (node_modules/@babel/parser/lib/index.js:11998:10)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.504 s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest`
npm ERR! Exit status 1
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! C:\Users\flori\AppData\Roaming\npm-cache\_logs\2020-08-24T09_00_35_268Z-debug.log
Do you have an idea to help me please? Thank you
EDIT 1:
I resolve my problem with convert my jest config in json to an js file jest.config.js with the bellow content:
module.exports = {
preset: 'react-native',
transform: {
'^.+\\.js$': require.resolve('react-native/jest/preprocessor.js'),
},
};