ant design v4 breaks реагирует на тестирование библиотечных тестов для Select и Autocomplete

Question

Я недавно обновил свой проект React до ant design v4, и все тесты, использующие Select, AutoComplete или Tooltip, не работают. В основном при щелчке по компонентам модальные опции или опции выбора отсутствуют в JSDOM. Раньше это нормально работало в v3.

Может кто-нибудь показать мне, как тестировать antd v4 с помощью библиотеки реагирующего тестирования?

Пример:

Мой компонент :

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

Вот ссылка на коды и ящик, который воспроизводит проблему. (Как уже упоминалось, этот код работал в v3).

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

Answer 1

Потеряв 2 дня на этом, вот проблема и решение:

Проблема

В antd v3 раньше можно было открыть выбор, выполнив selectHtmlElement.click(). Вы можете проверить в консоли инструментов chrome dev. В v4 это не работает.

Это означает, что RTL, использующий JSDOM под капотом, будет иметь такое же поведение. Когда вы делаете fireEvent.click(selectElement); , ничего не происходит !

Решение

Это ставит меня на правильный путь: https://github.com/ant-design/ant-design/issues/22074

Событие, которое нужно вызвать, - это не click(), а mouseDown() для первого потомка выбора.

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

Теперь на этом этапе вы, вероятно, захотите выбрать опция из списка, но анимация продолжается, поэтому следующий код (который раньше работал в v3) также потерпит неудачу.

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

У вас есть 2 варианта, используйте toBeInTheDocument() или дождитесь окончания анимации, используя waitFor(...)

Вариант 1: быстрее, но не совсем точно, я предпочитаю использовать это для простых случаев использования, так как это делает тесты более быстрыми и синхронными

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

Вариант 2: медленнее, поскольку вам нужно ждать окончания анимации sh, но более точным для сложных случаев

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