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.