I'm trying to setup a react-native project with expo (v38) and typescript (v3.9.4).Running into issues with setting up testing, specifically jest.
So I've been following the testingjavascript course and setting up similar to that (if that helps with context at all), so I'm trying to setup linting to run via the projects
in the jest config via jest-runner-eslint
, here is the full config as it stands:
module.exports = { preset: '@testing-library/react-native', transform: {'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js','\\.(ts|tsx)$': 'babel-jest','^.+\\.(ts|tsx)?$': '<rootDir>/jest-preprocess.js', }, transformIgnorePatterns: ['node_modules/(?!(react-native|@sentry/react-native||@react-native-community/async-storage|react-native-iphone-x-helper)|react-native-gesture-handler|@react-native-community/masked-view|@react-navigation/stack|tipsi-stripe/)', ], moduleFileExtensions: ['ts', 'tsx', 'js'], moduleNameMapper: {'^src/(.*)$': '<rootDir>/src/$1', }, testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$', timers: 'fake', testEnvironment: 'jsdom', projects: [ { displayName: 'clientTest', testMatch: ['<rootDir>/src/__tests__/**/*.tsx'], testEnvironment: 'jest-environment-jsdom', setupFilesAfterEnv: ['<rootDir>/jest-setup.js'], }, { runner: 'jest-runner-eslint', displayName: 'lint', testMatch: ['<rootDir>/src/**/*.tsx'], }, ],};
So if I comment out the projects setting my test runs just fine.When I re-enable only the linting project, it runs those without error but without the tests of course.I can't enable the clientTest project without this error:
/Users/ko/git/punchline/node_modules/react-native/Libraries/ReactNative/AppContainer.js:22 type Context = {rootTag: number, ...}; ^^^^^^^ SyntaxError: Unexpected identifier at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14) at Object.<anonymous> (node_modules/@testing-library/react-native/dist/index.js:37:44)
I've tried a multitude of configuration options (too many to list concisely), I've tried adjusting the transformIgnorePatterns, setting different presets, and using different babel presets of which my current babel.config.js is:
module.exports = function (api) { api.cache(true); return { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }],'@babel/preset-react','babel-preset-expo','@babel/preset-typescript','module:metro-react-native-babel-preset', ], };};
Any pointers of where I need to go to get things transpiling properly? I just find it weird that the tests work if the jest.config.js doesn't have the project defined.