当我使用.not.toBeVisible时，为什么jest-dom给出错误“jest:expect(...)jest不是一个函数”

Question

关于前面的问题- How can Enzyme check for component visibility?，我尝试使用jest-dom来专门使用他们的toBeVisible函数。

尽管遵循了文档，但我无法让它在我的测试中工作，并得到错误

"TypeError: expect(...).not.toBeVisible is not a function"

此处以CodeSandbox格式完整转载

​

import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import MyCheckbox from "./MyCheckbox";
import MyCheckboxesInUse from "./MyCheckboxesInUse";


Enzyme.configure({ adapter: new Adapter() });

test("Check that one checkbox is hidden and the other is visible", () => {
  const wrapper = mount(<MyCheckboxesInUse />);

  const checkboxes = wrapper.find(MyCheckbox);
  expect(checkboxes).toHaveLength(2);

  //HOW DO I CHECK THAT ONE IS VISIBLE AND THE OTHER IS NOT ?
  expect(checkboxes.get(0)).not.toBeVisible();
  expect(checkboxes.get(1)).toBeVisible();
});

Answer 1

我也面临着类似的问题。在我的案例中，通过以下步骤解决了这个问题：

• 将@testing-library/jest-dom包添加到devDependencies，而不是package.json文件中的dependencies。
• 将import '@testing-library/jest-dom';添加到setupTests.js

Answer 2

expect().not.toBeVisible方法来自@testing-library/jest-dom库，因为没有设置或引用默认的jest期望的库(因此找不到函数)。一个快速的解决方法是将这个导入添加到您的测试文件的顶部(假设您已经通过npm或yarn将该库导入到您的项目中)：

import '@testing-library/jest-dom';

为了提高可伸缩性，您可能需要添加一个setupTest.js文件(此处引用：https://create-react-app.dev/docs/running-tests/)

Answer 3

导入'@testing-library/jest-dom'对我没有帮助，但是导入@testing-library/jest-dom/extend-expect'可以帮助我解决这个错误。

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