Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to test React Native Typescript app COMPONENTS with jest?

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>