Testing React/Typescript components with Jest module errors

Question

I am receiving the error SyntaxError: Cannot use import statement outside a module when running a simple test on a React/Typescript component and not sure the best way of using modules in a React/Typescript project with Babel, webpack, and jest.

Here is my babel.config.js :

const isTest = String(process.env.NODE_ENV) === 'test'
const isProd = String(process.env.NODE_ENV) === 'production'

module.exports = {
  presets: [
    ['@babel/preset-env', { modules: isTest ? 'commonjs' : false }], 
    '@babel/preset-typescript',
};

jest.config.js

module.exports = {
  "roots": [
  "<rootDir>/src"
  ],
  "testMatch": [
  "**/__tests__/**/*.+(ts|tsx|js)",
  "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
  "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "moduleFileExtensions": ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  
  }

Here is the simple test I am trying to run:

import { render } from '@testing-library/react'
import AppRouter from '../router'

test('it works!', () => {
    render(<AppRouter />)
})

Please help!

Solution

Be sure to check your testRegex in your jest.config.js file and the testEnvironment is set correctly with testEnvironment: "jsdom" if you are using ES6 modules for testing.

Can you provide the code for the test where are you getting the error, because seeing the code will help to answer more appropriately. — Bhavesh Daswani, Jul 01 '22 at 19:33
Do you have a setupTests.ts file? in the main directory? https://github.com/testing-library/jest-dom — Colin Hale, Jul 01 '22 at 19:59
@ColinHale Yes, the only code that is in there is this: ```import "@testing-library/jest-dom"``` — AAMCODE, Jul 01 '22 at 20:14
Im not sure what is going on. Is the file location outside of the scope? Here is an example of using testing library on a codesandbox, Maybe try to reproduce it here. One thing you need to consider with Routers is the you will need to surround the component you are testing with a BrowserRouter.: https://codesandbox.io/s/react-testing-library-demo-9ik86?file=/src/__tests__/hello.js — Colin Hale, Jul 01 '22 at 20:42
Did you try adding "type": "module" to your package.json? It should enforce ESM when you run your test. — Patrice Thimothee, Jul 01 '22 at 20:46
Jest throws a ```Jest encountered an unexpected token``` error and says that it failed to parse a file. This happens when your code or its dependencies use non-standard JS syntax or when Jest is not configured to support such syntax. I believe it may have to do with how Babel is configured to interpret the files but still not sure. @ColinHale — AAMCODE, Jul 01 '22 at 21:30
Maybe config related, https://stackoverflow.com/questions/57921019/jest-test-fails-with-unexpected-token-expected — Patrice Thimothee, Jul 01 '22 at 21:35
What changed that caused Jest to throw a different Error? That unexpected token thing usually is because of an npm package in my experiend with jext. May need to an an ignorePatterns seen here: https://stackoverflow.com/questions/55493322/create-react-app-jest-encountered-unexpected-token. I still think it has to do with the test directory. Try and put a test in a different part of the project out of the test directory. see if it works there. You may need to change "**/__tests__/**/*.+(ts|tsx|js)", to like _tests_ or tests or its not pointing at the write spot? — Colin Hale, Jul 01 '22 at 21:42
There was no other error. That error shows up and then 10 lines below in terminal it says the module error. BUT, I think it's working after changing my testRegex to ```'(/__tests__/.*|(\\.|/)(test|spec))\\.js?$'```. Now, I am not exactly sure this works because the test gives me a Missing Semicolon error on the .tsx component I am testing when there is no error there. Jest is pointing to type Props with the carrot in between type and Props when no semicolon goes there. But if I run a regular test, it works. And thank you for the share @PatriceThimothee — AAMCODE, Jul 01 '22 at 21:55

Testing React/Typescript components with Jest module errors

0 Answers0