Unexpected token 'export'

[valn1]

Describe the bug

most of my tests broke after i upgraded react native on my project, i tried to debug and fix but could not get any progress on that

Expected behavior

my tests should work again

Steps to Reproduce

Screenshots

Versions

npmPackages: @testing-library/react-native: ^12.4.3 => 12.4.3 react: 18.2.0 => 18.2.0 react-native: ^0.73.2 => 0.73.2 react-test-renderer: 18.2.0 => 18.2.0

[valn1]

it looks like this change in my babel.config file caused the errors i have no idea why tho, i imagine it should work fine

[valn1]

rolling that line back seems to have fixed the issue for me, but still, this should not happen. i made that change because the react-native upgrade helper told me to do so. here is the commit in react-native that made that change from react-native 0.72.10 to 0.73.0 https://github.com/facebook/react-native/commit/d380bb8473f1c03ca277074e952f03649d767766

[mdjastrzebski]

@valn1, would you be able to produce a minimal reproduction repository based either on the latest RN CLI? It's hard to give any recommendation without being able to reproduce the issue you are having. That might also help you with diagnosing the issue.

[pedrohamarques]

I'm facing the same problem. But I started a project one week ago and it was already on RN 0.73.4. All the other packages are at the same version of the issue's author.

I don't know if it will help, but here is a example:

export function Loading() {
	return (
		<View className="flex-1 items-center justify-center bg-slate-900">
			<ActivityIndicator color={colors.white} testID='components.loading.activity-indicator'/>
		</View>
	);
}

And here is the test:

describe('components/loading/<Loading />', () => {
  it('renders the loading properly', () => {
    render(<Loading />)

    expect(screen.getByTestId('components.loading.activity-indicator')).toBeTruthy();
  })
})

And here's the error:

src/components/__tests__/loading.test.tsx
  components/loading/<Loading />
    × renders the product properly (300 ms)

  ● components/loading/<Loading /> › renders the product properly

    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.

       9 |
      10 |   it('renders the product properly', () => {
    > 11 |     render(<Loading />)
         |           ^
      12 |
      13 |     expect(screen.getByTestId('components.loading.activity-indicator')).toBeTruthy();
      14 |   })

      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:56:11)
      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:49:40)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:32:10)
      at Object.<anonymous> (src/components/__tests__/loading.test.tsx:11:11)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.192 s

[mdjastrzebski]

@pedrohamarques This looks like a potential setup issue, has RNTL generally supports the latest RN versions. In order to help you diagnose the issue, I would need to be able to reproduce it locally. Could you prepare a minimal reproduction repo?

[pedrohamarques]

Yeah, it was a wrong setup by my part. Following some tutorial I added the second and third preset in babel.config. I removed them and it worked properly.

This was my file:

module.exports = function (api) {
	api.cache(true);
	return {
		presets: [
			'babel-preset-expo',
			['@babel/preset-env', { targets: { node: 'current' } }],
			'@babel/preset-typescript',
		],
		plugins: ['nativewind/babel'],
	};
};

[abhishekgoel101]

Facing same issue

[pedrohamarques]

Facing same issue

@abhishekgoel101 , do your babel.config looks like mine in the previous comment?

[Ajmal0197]

Same issue:

module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    ['@babel/preset-env', { targets: { node: 'current' } }],
  ],
  plugins: ['react-native-reanimated/plugin'],
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
  },
};

[mdjastrzebski]

@valn1, @abhishekgoel101, @Ajmal0197

I've deployed the latest RN CLI (RN ver. 0.73.6) and the tests work out of the box. I encourage you to setup clean RN CLI project in a separate the folder and compare the configs between your setup and RN CLI template.

For reference:

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

See this comment from @pedrohamarques that removing: @babel/present-env and @babel/preset-typescript solved this issue for him: https://github.com/callstack/react-native-testing-library/issues/1557#issuecomment-1944548458

[amashianov]

@mdjastrzebski Faced the same with the same preset-env plugins recommended by jest setup docs.

But new problem is if I remove it, jest/babel stops recognizing/transforming dependencies correctly, and uses a version of mobx-react-lite that expects react-dom ...

[antoniovuono]

I removed

@mdjastrzebski Faced the same with the same preset-env plugins recommended by jest setup docs.

But new problem is if I remove it, jest/babel stops recognizing/transforming dependencies correctly, and uses a version of mobx-react-lite that expects react-dom ...

same issue here ! I removed this line and the tests passed ...

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      // ['@babel/preset-env', { targets: { node: 'current' } }],
      '@babel/preset-typescript',
    ],
  };
};