Test suite failed to run with jest-expo

[Pipo93]

• @testing-library/react version: 10.0.2
• react version: 16.13.1
• node version: v10.15.3
• yarn version: 1.22.4
• jest-expo version: 37.0.0

Relevant code or config:

component.spec.tsx

...
import { render } from '@testing-library/react-native'
// this adds custom jest matchers from jest-dom
import '@testing-library/jest-dom/extend-expect'
...
    it('renders div with margin', (): void => {
        const { getByTestId } = render(
            <div data-testid="div-node" style={{ margin: '20px' }}>
                hallo
            </div>
        )

        expect(getByTestId('div-node')).toHaveStyle('margin: 20px;')
   })

jest.config.js

module.exports = {
    preset: 'jest-expo/web',
    // see https://docs.expo.io/versions/latest/guides/testing-with-jest/#jest-configuration
    transformIgnorePatterns: [
        'node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
    ],
    testMatch: [ '**/*.spec.(tsx|ts)'],
    coverageReporters: ['text'],
    collectCoverageFrom: ['src/**/*.(ts|tsx)'],
    coverageThreshold: {
        global: {
            branches: 100,
            functions: 100,
            lines: 100,
        },
    },
    setupFilesAfterEnv: ['./jest.setup.ts'],
}

babel.config.js

module.exports = {
    presets: [
        'module:metro-react-native-babel-preset',
        '@babel/preset-react',
        '@babel/preset-typescript',
        'babel-preset-expo',
    ],
    plugins: ['@babel/plugin-transform-runtime'],
}

What you did:

Run jest --config jest.config.js --coverage --ci

What happened:

Test suite failed to run

 ● Test suite failed to run

    <project_path>/node_modules/dom-accessibility-api/dist/accessible-name.mjs:18
    import ArrayFrom from "./polyfills/array.from.mjs";
           ^^^^^^^^^

    SyntaxError: Unexpected identifier

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1086:14)
      at Object.<anonymous> (node_modules/dom-accessibility-api/sources/index.ts:1:1)

Problem description:

With that error, I'm not able to run my tests.

[eps1lon]

I haven't used react-native so forgive me my ignorance: Why do you use jest-dom if you render a native view? Aren't this completely different targets?

To the issue: It seems jest is not transpiling .mjs files. Looks similar to jestjs/jest#4637 though I would expect that jest would do this by default by now. If you would create a cloneable repro then I could have a look how we should fix this.

[kentcdodds]

I think what you probably want is: https://github.com/testing-library/jest-native

:)

[kentcdodds]

Considering this is not an issue with React Testing Library, I'm going to go ahead and close this. If you find any bugs you'd like to report, please do so on React Native Testing Library :)

Thanks!

[Pipo93]

Expo also works for web and the corresponding web preset is used (jest-expo/web).

I created a small example repo with basic configuration. There is no react-native related component used in my test, but yarn test fails anyway. I also think it has to do with transpiling the .mjs files, but did found a solution yet. You can find the project here: https://github.com/Pipo93/testing-library-error.

[Pipo93]

Oh man, adding mjs to moduleFileExtensions solved the issue for me 🤦

[eps1lon]

Oh man, adding mjs to moduleFileExtensions solved the issue for me

Glad to hear. I suspected as much since it sounded similar to jestjs/jest#4637. I'd hope latest jest versions do this by default by now.

[austintackaberry]

I am having this issue using react testing library without jest-expo and with mjs in moduleFileExtensions