下一页.js 12、Jest & Testing 库(Rust 编译器设置)错误："Support for the experimental syntax 'jsx' isn't current

Question

我正在设置Jest &Next.js 12.1.6中的React测试库，使用新的Rust编译器设置，如下所述。只有笑话的测试很好，但是当我尝试在测试文件中呈现组件时，我得到了一个错误:

"对实验性语法'jsx'的支持目前尚未启用(11:12)">

我对Next.js和/或Babel和Jest如何在hood下一起工作的理解充其量是粗略的，但我理解的方式是，在使用Next.js 12 Rust编译器时绕过Babel。我认为JSX应该在到达Jest之前由Next进行转换，而我认为这并没有发生。我不知道我甚至可以尝试什么额外的配置，以解决这个问题。我在网上找不到任何提示，其他人似乎也没有同样的问题。我读了很多文章，也看了很多视频，里面都是人们如何轻松地完成同样的设置。我曾追溯他们的足迹，但无济于事。

因此，我决定尝试设置Jest以使用Babel进行转换，保留现有配置并添加.babelrc文件:

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

，然后将以下行添加到jest.config.js中的customJestConfig中(当然还要安装适当的模块)。

transform: {"\.[jt]sx?$": "babel-jest"}

我不知道这个主意是明智的还是滑稽的，但不管怎样它都行不通。

我怎样才能解决这种情况，使我能够使用JSX与Jest & &;使用Rust编译器设置测试库?

---

// package.json

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.1.6",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "^7.2.6",
"@reduxjs/toolkit": "^1.7.2",
"next-redux-wrapper": "^7.0.5"
},
"devDependencies": {
"@types/node": "18.0.0",
"@types/react": "18.0.14",
"@types/react-dom": "18.0.5",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.4",
"jest": "28.1.1",
"@types/jest": "28.1.2",
"jest-environment-jsdom": "28.1.1",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.3.0",
"@testing-library/user-event": "14.2.1"
}
}

---

// jest.config.js

import nextJest from "next/jest";

const createJestConfig = nextJest({dir: '.'})

const customJestConfig = {
testEnvironment: "jest-environment-jsdom",
clearMocks: true,
moduleDirectories: ["node_modules", "<rootDir>/"],
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
transform: {"\.[jt]sx?$": "babel-jest"}
}

export default createJestConfig(customJestConfig)

---

// jest.setup.js

import "@testing-library/jest-dom/extend-expect"

---

// example-test.test.tsx

import {render, screen} from "@testing-library/react"
import userEvent from "@testing-library/user-event";

import Home from "../pages/index"

it("renders Home", function () {
render(<Home />)

const heading = screen.getByRole('heading', {
name: /test/i,
})

expect(heading).toBeInTheDocument()
})

Answer 1

OK。我已经解决了这个问题。

由于我不明白的原因，当我安装了Jest &测试库节点包，在我的项目根目录之外创建了一个新的package.json文件，并将这些包作为开发依赖项添加到那里，而不是添加到我的实际package.json文件中。

因此，当我安装@testing-library/react(最新版本需要react 18)时，NPM没有注册到我已经安装了react 17(因为next-redux-wrapper现在似乎不能与react 18一起工作)，所以它高兴地继续安装所有内容，给我留下一个无效的测试库设置。

当我意识到我的package.json文件发生了什么，采取措施补救，并试图重新安装我的Jest和Testing Library包后，NPM抛出了一个错误，告诉我依赖冲突。我查看了@testing-library/react文档，决定尝试12.1.5版本，因为13.0版本引入了react 17的突破性变化。

现在一切正常。