ant design v4破坏了Select和Autocomplete的反应测试库测试 [英] ant design v4 breaks react testing library tests for Select and Autocomplete

问题描述

我最近将我的React项目升级到ant design v4，并且所有使用Select，AutoComplete或Tooltip的测试都被破坏了.基本上，单击组件时，JSDOM中不存在模式或选择选项.以前在v3中可以正常工作.

I have recently upgraded my React project to ant design v4 and all the tests that use a Select, AutoComplete or Tooltip are broken. Basically when clicking the components, the modal or select options are not present in JSDOM. This used to work fine in v3.

有人可以告诉我如何使用react testing库测试antd v4吗?

Can somebody show me how to test antd v4 with react testing library ?

示例:

我的组件:

import React from "react";
import "./styles.css";
import { Select } from "antd";

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

export default function App() {
  return (
    <div className="App" style={{ marginTop: "40px" }}>
      <Select
        defaultValue="lucy"
        style={{ width: 120 }}
        onChange={handleChange}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="disabled" disabled>
          Disabled
        </Option>
        <Option value="Yiminghe">yiminghe</Option>
      </Select>
    </div>
  );
}

我的测试

import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { render, fireEvent, prettyDOM } from "@testing-library/react";
import App from "./App";

test("App Test", () => {
  const { queryAllByText, getByText, container } = render(<App />);

  expect(queryAllByText("Lucy").length).toBe(1);
  expect(queryAllByText("Jack").length).toBe(0);
  fireEvent.click(getByText("Lucy"));
  console.log(prettyDOM(container));
  // This line fails although I would expect the dropdown to be open and all the options visible
  expect(queryAllByText("Jack").length).toBe(1);
});

此处是指向重现该问题的codeandbox的链接. (如前所述，该代码曾经在v3中运行).

Here is a link to a codesandbox that reproduces the issue. (As mentioned, that code used to work in v3).

https://codesandbox.io/s/staging-shape-0xkrl?file=/src/App.test.js:0-494

推荐答案

在此上损失了2天之后，这里是问题和解决方法:

After losing 2 days on this, here is the problem and solution:

问题

在antd v3中，过去可以通过执行selectHtmlElement.click()打开Select.您可以在chrome开发工具控制台中进行测试.在v4中，此方法无效.

In antd v3 it used to be possible to open a Select by doing selectHtmlElement.click(). You can test in the chrome dev tools console. In v4 this does not work.

这意味着在后台使用JSDOM的RTL将具有相同的行为.当您执行fireEvent.click(selectElement); 没有任何反应！

This means that RTL which uses JSDOM under the hood will have the same behaviour. When you do fireEvent.click(selectElement); nothing happens !

解决方案

这使我走上了正确的轨道: https://github.com/ant-design/ant-design/issues/22074

This put me on the right track: https://github.com/ant-design/ant-design/issues/22074

您需要触发的事件不是click()而是选择的第一个子项上的mouseDown().

The event you need to trigger is not a click() but a mouseDown() on the first child of the select.

const elt = getByTestId('your-select-test-id').firstElementChild;
fireEvent.mouseDown(elt); // THIS WILL OPEN THE SELECT !

现在，您现在可能要从列表中选择一个选项，但由于正在播放动画，因此以下代码(以前在v3中运行的代码)也将失败.

Now at this point you probably want to select an option from the list but there is an animation going on so the following code (that used to work in v3) will also fail.

expect(getByText('Option from Select')).toBeVisible(); // FAILS !

您有2个选项，可以使用toBeInTheDocument()或通过使用waitFor(...)

You have 2 options, use toBeInTheDocument() or wait for the animation to be over by using waitFor(...)

选项1:速度更快但不完全准确，我更喜欢将其用于简单的用例，因为它可以使测试更快且同步

Option 1: Faster but not totally accurate, I prefer to use this for simple use cases as it makes the tests faster and synchronous

expect(getByText('Option from Select')).toBeInTheDocument(); // WORKS !

选项2:由于需要等待动画完成而变慢，但对于复杂情况更准确

Option 2: Slower as you need to wait for the animation to finish but more accurate for complex cases

await waitFor(() => expect(getByText('Option from Select')).toBeVisible()); // WORKS !

这篇关于ant design v4破坏了Select和Autocomplete的反应测试库测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！