I have an Expo app that I'm setting up. I've added Jest tests and they work fine. I want to use react-native-paper for styling but when I add that and modify the one page I have so far to use it the test I've wriiten fails due to problems with the imports and I'm stuck so far as to how to fix it.
My package.json looks like this
{
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest",
"web": "expo start --web",
"lint": "eslint"
},
"jest": {
"preset": "jest-expo",
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
]
},
"dependencies": {
"@expo/webpack-config": "^0.17.2",
"@types/react": "~18.0.24",
"@types/react-native": "~0.70.6",
"expo": "~47.0.12",
"expo-constants": "~14.0.2",
"expo-status-bar": "~1.4.2",
"firebase": "^9.17.1",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-paper": "^5.4.1",
"react-native-safe-area-context": "^4.5.0",
"react-native-web": "~0.18.9"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@expo/ngrok": "^4.1.0",
"@testing-library/jest-native": "^5.4.2",
"@testing-library/react-native": "^11.5.4",
"@types/jest": "^29.4.0",
"jest": "^26.6.3",
"jest-expo": "^48.0.2"
},
"private": true
}
My babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
env: {
production: {
plugins: ['react-native-paper/babel'],
},
},
};
};
When I run the test I get the following error
yarn run v1.22.17
$ jest
FAIL pages/Home.test.tsx
● Test suite failed to run
TypeError: {omitted path}/node_modules/react-native-paper/lib/commonjs/index.js: Cannot read properties of undefined (reading '0')
2 | import "@testing-library/jest-native/extend-expect";
3 | import { render, screen } from "@testing-library/react-native"
> 4 | import { Provider as PaperProvider } from 'react-native-paper';
| ^
at new SourceMap (../../node_modules/@babel/generator/src/source-map.ts:61:42)
at new Generator (../../node_modules/@babel/generator/src/index.ts:24:35)
at generate (../../node_modules/@babel/generator/src/index.ts:271:15)
at generateCode (../../node_modules/@babel/core/src/transformation/file/generate.ts:35:22)
at run (../../node_modules/@babel/core/src/transformation/index.ts:59:48)
at run.next (<anonymous>)
at transform (../../node_modules/@babel/core/src/transform.ts:29:20)
at transform.next (<anonymous>)
at evaluateSync (../../node_modules/gensync/index.js:251:28)
at fn (../../node_modules/gensync/index.js:89:14)
at stopHiding - secret - don't use this - v1 (../../node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:97:14)
at transformSync (../../node_modules/@babel/core/src/transform.ts:66:52)
at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:464:35)
at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:569:40)
at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:607:25)
at Object.<anonymous> (pages/Home.test.tsx:4:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.208 s
Ran all test suites.
error Command failed with exit code 1.
Thanks
