Getting error when using the render method to test component
`Trying to detect host component names triggered the following error:
Unexpected token ‘export’
There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
Please check if you are using compatible versions of React Native and React Native Testing Library.
25 | const store = setupStore();
26 |
> 27 | const { getByText } = render(
| ^
28 | <Provider store={store}>
29 | <UserDisplay />
30 | </Provider>`
I was testing sample component with react native testing library and jest.
#tsconfig
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src", "__tests__"]
}
babel
module.exports = {
presets: [
'module:@react-native/babel-preset',
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
['@babel/plugin-transform-class-properties', { loose: true }],
['@babel/plugin-transform-private-methods', { loose: true }],
['@babel/plugin-transform-private-property-in-object', { loose: true }],
],
};
jest config
import type { Config } from '@jest/types';
const config: Config.InitialOptions = {
preset: 'react-native',
transform: {
'^.+\.[tj]sx?$': 'babel-jest',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
transformIgnorePatterns: [
'node_modules/(?!(react-native|@react-native|@react-navigation|react-redux)/)',
],
>! moduleNameMapper: {
>! '\.svg': '<rootDir>/__mocks__/svgMock.js',
>! '\.(jpg|jpeg|png|gif|webp|svg)$': '
>! <rootDir>/__mocks__/fileMock.js',
},
};
export default config;