Unexpected token 'export' about react-native-testing-library HOT 11 OPEN

@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?

from react-native-testing-library.

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'],
	};
};

from react-native-testing-library.

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

from react-native-testing-library.

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
facebook/react-native@d380bb8

from react-native-testing-library.

@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.

from react-native-testing-library.

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

from react-native-testing-library.

Facing same issue

from react-native-testing-library.

Facing same issue

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

from react-native-testing-library.