Search code examples
reactjsnext.jsreact-testing-libraryts-jest

Jest failed to parse JSX syntax even after proper configuration

I've started a fresh Next project and configured jest and testing library as docs require.

The test failed due to a syntax error, for some reason ts-jest is not able to parse stayles.container.

What is the reason for this behavior and how can I solve it?

A small part of the default index page shipped with Next fresh installation:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

test file (index.test.tsx) :

import Home from '../pages/index';
import { screen, render } from '@testing-library/react';


test("rendering the base component", () => {
    render(<Home />)
});

jest.config.js:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
};

Package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.2",
    "jest-environment-jsdom": "^29.3.1",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  },
  "devDependencies": {
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.2",
    "ts-jest": "^29.0.3"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Error detail:

C:\Users\Daniel\Desktop\nextJSProjects\my-app\styles\Home.module.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){.container {
                                                                                  ^

SyntaxError: Unexpected token '.'
Solution

  • The error means JestJs is not able to parse CSS modules. You should mock CSS modules, see Mocking CSS Modules

    npm install --save-dev identity-obj-proxy

    jest.config.js:

    module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};