ant design v4 打破了选择和自动完成的反应测试库测试 [英] ant design v4 breaks react testing library tests for Select and Autocomplete

问题描述

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

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

示例:

我的组件:

从react"导入React；导入./styles.css"；import { Select } from "antd";const { 选项 } = 选择；函数handleChange(值){console.log(`选定的 ${value}`);}导出默认函数 App() {返回 (<div className="App" style={{ marginTop: "40px" }}><选择默认值=露西"样式={{ 宽度:120 }}onChange={handleChange}><Option value="jack">Jack</Option><Option value="lucy">Lucy</Option><选项值=禁用"禁用>已禁用</选项><Option value="Yiminghe">yiminghe</Option>

);}

我的测试

import "@testing-library/jest-dom/extend-expect";从反应"导入反应；从@testing-library/react"导入{渲染，火事件，漂亮的DOM}；从./App"导入应用程序；测试(应用测试"，()=> {const { queryAllByText, getByText, container } = render(<App/>);期望(queryAllByText("Lucy").length).toBe(1);期望(queryAllByText("Jack").length).toBe(0);fireEvent.click(getByText("Lucy"));控制台日志(prettyDOM(容器))；//这行失败了，尽管我希望下拉菜单是打开的并且所有选项都可见期望(queryAllByText("Jack").length).toBe(1);});

这是一个指向重现问题的代码和框的链接.(如前所述，该代码曾经在 v3 中工作).

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

解决方案

在这个问题上浪费了 2 天后，这里是问题和解决方案:

问题

在 antd v3 中，过去可以通过执行 selectHtmlElement.click() 来打开 Select.您可以在 chrome 开发工具控制台中进行测试.在 v4 中这不起作用.

这意味着在底层使用 JSDOM 的 RTL 将具有相同的行为.当你做 fireEvent.click(selectElement); 什么都没有发生 !

解决方案

这让我走上了正轨:https://github.com/蚂蚁设计/蚂蚁设计/问题/22074

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

const elt = getByTestId('your-select-test-id').firstElementChild;fireEvent.mouseDown(elt);//这将打开选择！

此时您可能想要从列表中选择一个选项，但有一个动画正在进行，因此以下代码(曾经在 v3 中工作)也将失败.

expect(getByText('Option from Select')).toBeVisible();//失败！

您有 2 个选项，使用 toBeInTheDocument() 或使用 waitFor(...)

等待动画结束

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

expect(getByText('Option from Select')).toBeInTheDocument();//有效！

选项 2:较慢，因为您需要等待动画完成，但在复杂情况下更准确

await waitFor(() => expect(getByText('Option from Select')).toBeVisible());//有效！

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.

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

Example:

My Component:

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>
  );
}

My test

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);
});

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

解决方案

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

Problem

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.

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

Solution

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

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 !

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 !

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

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 !

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 打破了选择和自动完成的反应测试库测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！