React + Jest 测试错误 - ReferenceError: 未定义期望

Posted 2023-02-21

【中文标题】React + Jest 测试错误 - ReferenceError: 未定义期望

【英文标题】：React + Jest Testing Error - ReferenceError: expect is not defined

【发布时间】：2021-12-24 04:28:17

【问题描述】：

我确实到处搜寻这个问题的答案，并且可能尝试了 99% 的事情，所以我决定创建一个自己的线程，这样其他人就可以查看我目前拥有的东西，看看他们是否能发现问题。

我对 Jest 测试非常陌生，并决定尝试在我们的代码库中实现它。我使用本指南确保我所做的一切都是完美的，但仍然出现此错误 A Practical Guide To Testing React Applications With Jest

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

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

import '@testing-library/jest-dom'
import  configure  from "enzyme"
import Adapter from "enzyme-adapter-react-16";
import '@testing-library/jest-dom/extend-expect';

configure( adapter: new Adapter() );

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

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

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

import React from 'react';
import  render as rtlRender, screen  from '@testing-library/react';
import  Provider  from 'react-redux';
import store from '../../../store';
import AddNewProperty from './AddNewProperty';

configure( adapter: new Adapter() );

const render = component => rtlRender(
    <Provider store=store()>
        component
    </Provider>
)

describe('Add New Property', () => 
    test('component redners successfully', () => 
        render(<AddNewProperty />)
        // expect(screen.getByText('Apartment Number')).toBeInTheDocument();
    )    
);

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

     FAIL  src/components/Forms/Agency/AddNewProperty.spec.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      3 | import Adapter from "enzyme-adapter-react-16";
      4 | import '@testing-library/jest-dom/extend-expect';
    > 5 | configure( adapter: new Adapter() );
        | ^

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:9:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/index.js:3:1)
      at Object.<anonymous> (src/setupTests.js:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.167s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

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

【问题讨论】：

您介意概述一下您尝试过的事情吗？

@JonathanS。在过去的 7 天里，我多次尝试了很多事情，我还必须修复发生的 错误，因此为什么商店是单独的并导入了一个函数。我已经在没有 setupTests.js 文件的情况下尝试过它，并且在测试页面中导入的所有内容也都导入了 .. 至于其他人的具体细节，他们不记得到底完成了什么

【参考方案1】：

您可能希望在安装测试框架后设置文件

您可以通过以下几种方法进行操作（对于这个特定问题，方法 1 更相关）

1) react-scripts

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

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

2) jest.config.js

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

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

【讨论】：

谢谢，这个小改动让我的测试用例顺利通过，没有更多错误

嗨@GaryWilson，如果这个或任何答案解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。