I have been trying to start testing my React Native Typescript Components with jest for quite some time with no success. I have found a lot of examples /answers (including: one source, another source, yet another link, etc.) but none of them help.
With some setups I am able to run simple tests, but if I try to import a Component, I get the error:
● Test suite failed to runJest encountered an unexpected tokenThis usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".Here's what you can do:• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.• If you need a custom transformation specify a "transform" option in your config.• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.You'll find more details and examples of these config options in the docs:https://jestjs.io/docs/en/configuration.htmlDetails:/Users/XXX/node_modules/react-native-iphone-x-helper/index.js:1({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native'; ^^^^^^SyntaxError: Cannot use import statement outside a module at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) at Object.<anonymous> (node_modules/react-native-paper/lib/commonjs/components/BottomNavigation.tsx:13:1)
File contents:
jest.config.js
module.exports = {preset: 'react-native',moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}
package.json "jest"
"jest": {"preset": "react-native","transform": {"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js","\\.(ts|tsx)$": "ts-jest"},"globals": {"ts-jest": {"tsConfig": "tsconfig.jest.json" }},"moduleFileExtensions": ["ts","tsx","js"],"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
}
tsconfig.json
{"compilerOptions": {"target": "es6","module": "commonjs","allowJs": true,"jsx": "react-native","noEmit": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true,"esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src" ]}
Could someone point me to an example that works?