Jest 遇到了意外的令牌。默认情况下，“node_modules”文件夹被变压器忽略

Question

我正在运行测试文件并收到以下错误

● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

我尝试添加 Babel 但没有成功。 我想我可能只需要添加 jest.config.json 但我不知道如何实现它。 抱歉，我对这些东西还很陌生。

这是我的 ts.config.json

{
  "compilerOptions": {
    "target": "es5",
    "baseUrl": "src",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitReturns": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false
  },
  "include": ["src"]
}

这是我的测试文件。

import React from "react"
import { Provider } from "react-redux"

import configureStore from "redux-mock-store"
import thunk from "redux-thunk"

// import { expect, describe, it } from "@jest/globals"
import { render, screen, fireEvent } from "@testing-library/react"

import { getAlgoList } from "store/slice/AlgorithmList/AlgorithmListActions"

// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
import { AlgorithmTreeView } from "./TreeView"

jest.mock("store/slice/AlgorithmList/AlgorithmListActions", () => ({
  getAlgoList: jest.fn(),
}))

const mockStore = configureStore([thunk])

describe("AlgorithmTreeView", () => {
  let store: ReturnType<typeof mockStore>

  beforeEach(() => {
    store = mockStore({...})
})

  it("renders the AlgorithmTreeView component", () => {
    render(
      <Provider store={store}>
        <AlgorithmTreeView />
      </Provider>,
    )

    expect(screen.getByText("Data")).toBeInTheDocument()
    expect(screen.getByText("Algorithm")).toBeInTheDocument()
    expect(screen.getByText("node1")).toBeInTheDocument()
    expect(screen.getByText("node2")).toBeInTheDocument()
  })

etc...

我尝试添加 Babel 但没有成功。

Answer 1

您遇到的问题可能是由于

Jest

无法处理一些现成的现代

JavaScript

或

TypeScript

语法。

由于您的项目正在使用

TypeScript

和现代

JavaScript

功能，因此您需要配置

Babel

才能使用

Jest

。在项目的根目录中创建一个

.babelrc

文件，其中包含以下内容：

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

这告诉

Babel

使用现代

JavaScript

、

React

和

TypeScript

所需的预设来转译代码。

接下来，创建或更新您的

jest.config.js

以包含

Babel

并确保

Jest

知道

TypeScript

文件。这是基本配置：

module.exports = {
  preset: 'ts-jest',
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest"
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
  testEnvironment: "jsdom",
  transformIgnorePatterns: ["node_modules/(?!(my-esm-dependency)/)"],
};

确保安装了必要的依赖项：

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript ts-jest

你的

tsconfig.json

看起来不错，但是如果你想输出编译后的文件，请确保你没有

"noEmit": true

。由于您将

TypeScript

与

Babel

一起使用，

Jest

将为您处理转换，因此此设置通常没问题。

您可以在下面的文档中找到更多信息：

• 用 Typescript 开玩笑
• Jest 的 Babel 配置

此设置应该有助于

Jest

理解您的

TypeScript

和现代

JavaScript

语法。如果您仍然遇到问题，请仔细检查已安装的依赖项版本并确保它们兼容。