Next.js使用React Testing Library与Jest测试时出现语法错误

在Next.js项目中使用React Testing Library和Jest进行测试时，运行测试出现「Expression expected」语法错误，错误指向render(<RootLayout/>)这一行。已按照Next.js官方文档配置了jest.config.ts和jest.setup.ts，但问题仍未解决。

错误信息 #

x Expression expected
      5 |
      6 | describe('Page is working', () => {
      7 |   it('renders a heading', () => {
      8 |     render(<RootLayout/>)
        :                         ^
      9 |     const heading = screen.getByRole('heading', { level: 1 })
     10 |
     11 |     // expect(heading).toBeInTheDocument()
        `----
    Caused by:
        Syntax Error

当前配置文件 #

jest.config.ts #

// jest.config.ts

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],

}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

jest.setup.ts #

// jest.setup.ts
import type { Config } from 'jest'
import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],

}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

测试文件代码 #

// /home/raihan/Projects/Code/Blog/client/__tests__/profile/register.ts


import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import React from 'react'
import Page from '@/app/users/page'
import RootLayout from '@/app/layout'
describe('Page is working', () => {
  it('renders a heading', () => {
    render(<RootLayout/>)
    const heading = screen.getByRole('heading', { level: 1 })

    // expect(heading).toBeInTheDocument()

  })
})

1. 配置文件重复定义问题 #

你的jest.setup.ts错误复制了jest.config.ts的核心配置内容，导致Jest配置逻辑混乱。jest.setup.ts的作用是在测试执行前初始化全局依赖（比如扩展断言方法），而非定义Jest核心配置。

修复：
修改jest.setup.ts为正确的初始化内容：

// jest.setup.ts
import '@testing-library/jest-dom'

2. TypeScript未正确编译JSX语法 #

测试文件中的JSX标签未被TypeScript正确处理，通常是因为缺少测试专用的TypeScript配置文件。

修复：

• 在项目根目录创建tsconfig.jest.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["**/__tests__/**/*", "jest.setup.ts"]
}

• 在jest.config.ts中添加编译配置，指定使用上述文件：

const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  transform: {
    '^.+\\.(ts|tsx)$': ['ts-jest', { tsconfig: 'tsconfig.jest.json' }]
  }
}

3. 依赖版本不兼容 #

确保next/jest、jest、ts-jest、@testing-library/react等依赖版本与你的Next.js版本匹配，执行以下命令更新依赖：

npm install --save-dev jest ts-jest @testing-library/react @testing-library/jest-dom next/jest

4. 测试文件命名不符合规范 #

Next.js + Jest默认识别.test.tsx或.spec.tsx后缀的测试文件，当前测试文件register.ts可能未被正确识别。

修复：
将测试文件重命名为register.test.tsx或register.spec.tsx。

内容的提问来源于stack exchange，提问作者Raihanur Rahman