主页 / 问题 / 1541371
Accepted
MrYogurt
Asked:2023-09-19 00:09:22 +0800 CST2023-09-19 00:09:22 +0800 CST

反应测试库不起作用

  • 772

我正在尝试在 next.js 的标准 ts 版本上设置反应测试库。在扩展坞上安装了软件包：

@testing-library/jest-dom"
@testing-library/react"
@testing-library/user-event

写了一个示例测试：

import '@testing-library/jest-dom'
import * as React from 'react'
import {render} from '@testing-library/react'
import { TodosContainer } from './TodosContainer'


test('Checking TodosContainer', () => {
  let component

  beforeAll(() => {
    component = render(<TodosContainer />)
  })

  test('should render', () => {
    expect(component).toBeInTheDocument()
  })

})

我什至无法运行它，因为测试命令不被接受：

Executing task: npm run test 


> todo-2023@0.1.0 test
> test

"test" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.

此外，如果您进行 tsx 测试，则不会选择类型。

我的package.json：

{
  "name": "todo-2023",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "test"
  },
  "dependencies": {
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1"
  }
}

更新：

通过 jest 启动后，我遇到模块类型冲突，屏幕上出现错误：

屏幕

添加了 babel 配置：

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    "@babel/preset-react",
    '@babel/preset-typescript'
  ]
};

和开玩笑的配置：

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    ["^.+\\.[js|ts]x$"]: "babel-jest"
  },
}

情况没有改变，顺便说一句，错误在模块样式的导入上明确指出，我做错了什么？

javascript

2 个回答

  1. Best Answer

    您面临的问题是由于 package.json 中缺少运行测试的脚本。默认情况下，如果要使用 Jest 运行测试，则需要添加相应的脚本。

    您需要更新 package.json 文件并添加脚本来运行测试。操作方法如下：

    包.json

    {
  "name": "todo-2023",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest" // Обновите эту строку, чтобы запускать Jest
  },
  // ... остальной контент вашего package.json
}

    之后，您可以使用以下命令运行测试：

    终端

    npm run test

    Jest 现在应该被接受作为运行测试的命令，并且使用 @testing-library/react 编写的测试应该可以毫无问题地运行。

    如果您对 TypeScript 类型有问题，请确保安装了 TypeScript 和 @types/jest，并且您的 tsconfig.json 具有 Jest 设置，以便 TypeScript 可以正确处理您的测试文件。

    • 1

  2. 笑话配置.js

    {
  "moduleNameMapper": {
    "\\.(css)$": "identity-obj-proxy"
  },
  // ...

    并提前下载《identity-obj-proxy》一书。他们似乎描述了以下情况：For instance, you can tell Jest to mock this object as imported CSS modules; then all your className lookups on the imported styles object will be returned as-is.

    • 1

相关问题