為什么 jest-dom 在我使用它時會給出錯誤“TypeError：expect(...).not.toBeVisible is not a function”

Question

關於上一個問題 - Enzyme 如何檢查組件的可見性？ 我嘗試使用jest-dom專門使用他們的toBeVisible function。

盡管遵循了文檔，但我無法讓它在我的測試中工作並得到錯誤

"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

expect().not.toBeVisible方法來自@testing-library/jest-dom庫，因為沒有設置或引用該庫，所以使用默認的jest期望（因此未找到 function）。 一個快速的解決方法是將此導入添加到測試文件的頂部（假設您已經通過 npm 或紗線將庫導入到您的項目中）：

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

對於可擴展性，您可能需要添加setupTest.js文件（此處參考： https://create-react-app.dev/docs/running-tests/ ）

Answer 2

我面臨着類似的問題。 就我而言，它是通過以下步驟解決的： -

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

Answer 3

導入'@testing-library/jest-dom'對我沒有幫助，但導入@testing-library/jest-dom/extend-expect'可以幫助我解決錯誤。

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

Answer 4

在我的情況下，問題更微不足道。 我正在使用 Vue.js，遵循文檔（ 鏈接），預期的方法只是“toBeVisible”（不帶圓括號）。

例子：

expect(wrapper.find("span").element).toBeVisible;