React + Jest 测试错误 - ReferenceError：expect 未定义

Question

我已经到处寻找这个问题的答案，并且可能尝试了 99% 的方法，所以我决定开始一个自己的线程，这样其他人就可以仔细查看我目前拥有的内容，看看他们是否能发现问题。

\n

我对 Jest 测试非常陌生，决定尝试将其实现到我们的代码库中。我使用本指南来确保我所做的一切都是完美的，但仍然发生此错误\n使用 Jest 测试 React 应用程序的实用指南

\n

我正在测试一个简单的功能组件，该组件使用react-hook-form在页面上生成表单，然后通过redux调用将完成的表单发送到我们的后端

\n

我已将 setupTests.js 文件设置为：

\n

import \'@testing-library/jest-dom\'\nimport { configure } from "enzyme"\nimport Adapter from "enzyme-adapter-react-16";\nimport \'@testing-library/jest-dom/extend-expect\';\n\nconfigure({ adapter: new Adapter() });\n

\n

将我的 package.json 测试命令更新为

\n

"test": "react-scripts test --env=jsdom --setupFiles ./src/setupTests.js"\n

\n

这是我尝试通过简单测试运行的测试规范：

\n

import React from \'react\';\nimport { render as rtlRender, screen } from \'@testing-library/react\';\nimport { Provider } from \'react-redux\';\nimport store from \'../../../store\';\nimport AddNewProperty from \'./AddNewProperty\';\n\nconfigure({ adapter: new Adapter() });\n\nconst render = component => rtlRender(\n    <Provider store={store()}>\n        {component}\n    </Provider>\n)\n\ndescribe(\'Add New Property\', () => {\n    test(\'component redners successfully\', () => {\n        render(<AddNewProperty />)\n        // expect(screen.getByText(\'Apartment Number\')).toBeInTheDocument();\n    })    \n});\n

\n

这是屏幕上返回给我的错误：

\n

     FAIL  src/components/Forms/Agency/AddNewProperty.spec.js\n  \xe2\x97\x8f Test suite failed to run\n\n    ReferenceError: expect is not defined\n\n      3 | import Adapter from "enzyme-adapter-react-16";\n      4 | import \'@testing-library/jest-dom/extend-expect\';\n    > 5 | configure({ adapter: new Adapter() });\n        | ^\n\n      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:9:1)\n      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/index.js:3:1)\n      at Object.<anonymous> (src/setupTests.js:5:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.167s\nRan all test suites related to changed files.\n\nWatch Usage: Press w to show more.\n

\n

我也安装了最新版本的所有软件包

\n

Answer 1

您需要在安装测试框架后设置文件

您可以采用以下几种方法（对于这个特定问题，方法 1 更相关）

1）react-scripts

替换/添加--setupFilesAfterEnv而不是使用--setupFiles

例子："test": "react-scripts test --setupFilesAfterEnv <test setup filepath>

2）jest.config.js

setupFilesAfterEnv: [
  './setupTests.js',
],

除此之外，请确保您的节点版本至少为 12