如何使用 react-testing-library 测试 react-select

Question

App.js

import React, { Component } from "react";
import Select from "react-select";

const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
  return { value: e, label: e };
});

class App extends Component {
  state = {
    selected: SELECT_OPTIONS[0].value
  };

  handleSelectChange = e => {
    this.setState({ selected: e.value });
  };

  render() {
    const { selected } = this.state;
    const value = { value: selected, label: selected };
    return (
      <div className="App">
        <div data-testid="select">
          <Select
            multi={false}
            value={value}
            options={SELECT_OPTIONS}
            onChange={this.handleSelectChange}
          />
        </div>
        <p data-testid="select-output">{selected}</p>
      </div>
    );
  }
}

export default App;

App.test.js

import React from "react";
import {
  render,
  fireEvent,
  cleanup,
  waitForElement,
  getByText
} from "react-testing-library";
import App from "./App";

afterEach(cleanup);

const setup = () => {
  const utils = render(<App />);
  const selectOutput = utils.getByTestId("select-output");
  const selectInput = document.getElementById("react-select-2-input");
  return { selectOutput, selectInput };
};

test("it can change selected item", async () => {
  const { selectOutput, selectInput } = setup();
  getByText(selectOutput, "FOO");
  fireEvent.change(selectInput, { target: { value: "BAR" } });
  await waitForElement(() => getByText(selectOutput, "BAR"));
});

这个最小示例在浏览器中按预期工作，但测试失败。我认为未调用 onChange 处理程序。如何在测试中触发 onChange 回调？查找要触发事件的元素的首选方法是什么？谢谢

Answer 1

这一定是关于 RTL 被问得最多的问题：D

最好的策略是使用jest.mock（或测试框架中的等效项）来模拟选择并呈现 HTML 选择。

关于为什么这是最好的方法的更多信息，我写了一些适用于这种情况的东西。 OP询问了Material-UI中的选择，但想法是一样的。

Original question 和我的回答：

因为您无法控制该 UI。它在第 3 方模块中定义。

所以，你有两个选择：

您可以找出材质库创建的 HTML，然后使用 container.querySelector 查找其元素并与之交互。这需要一段时间，但应该是可能的。完成所有这些后，您必须希望在每个新版本中它们不会过多地更改 DOM 结构，否则您可能必须更新所有测试。

另一种选择是相信 Material-UI 将制作一个可以工作并且您的用户可以使用的组件。基于这种信任，您可以简单地将测试中的该组件替换为更简单的组件。

是的，选项一测试用户看到的内容，但选项二更容易维护。

根据我的经验，第二个选项很好，但当然，您的用例可能会有所不同，您可能需要测试实际组件。

这是一个模拟选择的示例：

jest.mock("react-select", () => ({ options, value, onChange }) => {
  function handleChange(event) {
    const option = options.find(
      option => option.value === event.currentTarget.value
    );
    onChange(option);
  }
  return (
    <select data-testid="select" value={value} onChange={handleChange}>
      {options.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
});

您可以阅读更多here。

Answer 2

在我的项目中，我使用的是 react-testing-library 和 jest-dom。 我遇到了同样的问题 - 经过一番调查，我找到了解决方案，基于线程：https://github.com/airbnb/enzyme/issues/400

请注意，渲染的顶级函数必须是异步的，以及各个步骤。

这种情况下不需要使用焦点事件，它允许选择多个值。

另外，getSelectItem 内部必须有异步回调。

const DOWN_ARROW = { keyCode: 40 };

it('renders and values can be filled then submitted', async () => {
  const {
    asFragment,
    getByLabelText,
    getByText,
  } = render(<MyComponent />);

  ( ... )

  // the function
  const getSelectItem = (getByLabelText, getByText) => async (selectLabel, itemText) => {
    fireEvent.keyDown(getByLabelText(selectLabel), DOWN_ARROW);
    await waitForElement(() => getByText(itemText));
    fireEvent.click(getByText(itemText));
  }

  // usage
  const selectItem = getSelectItem(getByLabelText, getByText);

  await selectItem('Label', 'Option');

  ( ... )

}

Answer 3

与@momimomo 的回答类似，我写了一个小助手来从 TypeScript 中的react-select 中选择一个选项。

帮助文件：

import { getByText, findByText, fireEvent } from '@testing-library/react';

const keyDownEvent = {
    key: 'ArrowDown',
};

export async function selectOption(container: HTMLElement, optionText: string) {
    const placeholder = getByText(container, 'Select...');
    fireEvent.keyDown(placeholder, keyDownEvent);
    await findByText(container, optionText);
    fireEvent.click(getByText(container, optionText));
}

用法：

export const MyComponent: React.FunctionComponent = () => {
    return (
        <div data-testid="day-selector">
            <Select {...reactSelectOptions} />
        </div>
    );
};

it('can select an option', async () => {
    const { getByTestId } = render(<MyComponent />);
    // Open the react-select options then click on "Monday".
    await selectOption(getByTestId('day-selector'), 'Monday');
});

Answer 4

export async function selectOption(container: HTMLElement, optionText: string) {
  let listControl: any = '';
  await waitForElement(
    () => (listControl = container.querySelector('.Select-control')),
  );
  fireEvent.mouseDown(listControl);
  await wait();
  const option = getByText(container, optionText);
  fireEvent.mouseDown(option);
  await wait();
}

注意： container：选择框的容器（例如：container = getByTestId('seclectTestId')）

Answer 5

最后，有一个库可以帮助我们：https://testing-library.com/docs/ecosystem-react-select-event。完美适用于单选或多选：

来自@testing-library/react docs：

import React from 'react'
import Select from 'react-select'
import { render } from '@testing-library/react'
import selectEvent from 'react-select-event'

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Select options={OPTIONS} name="food" inputId="food" isMulti />
  </form>
)
expect(getByTestId('form')).toHaveFormValues({ food: '' }) // empty select

// select two values...
await selectEvent.select(getByLabelText('Food'), ['Strawberry', 'Mango'])
expect(getByTestId('form')).toHaveFormValues({ food: ['strawberry', 'mango'] })

// ...and add a third one
await selectEvent.select(getByLabelText('Food'), 'Chocolate')
expect(getByTestId('form')).toHaveFormValues({
  food: ['strawberry', 'mango', 'chocolate'],
})

感谢https://github.com/romgain/react-select-event 提供这么棒的软件包！

Answer 6

这个解决方案对我有用。

fireEvent.change(getByTestId("select-test-id"), { target: { value: "1" } });

希望对奋斗者有所帮助。

Answer 7

另一种解决方案适用于我的用例，不需要在 react-testing-library spectrum chat. 上找到 react-select 模拟或单独的库（感谢 @Steve Vaughan）

这样做的缺点是我们必须使用container.querySelector，RTL 建议不要使用它来支持其更具弹性的选择器。

Answer 8

如果您没有使用 label 元素，则使用 react-select-event 的方法是：

const select = screen.container.querySelector(
  "input[name='select']"
);

selectEvent.select(select, "Value");

Answer 9

如果出于某种原因有一个同名的标签使用这个

const [firstLabel, secondLabel] = getAllByLabelText('State');
    await act(async () => {
      fireEvent.focus(firstLabel);
      fireEvent.keyDown(firstLabel, {
        key: 'ArrowDown',
        keyCode: 40,
        code: 40,
      });

      await waitFor(() => {
        fireEvent.click(getByText('Alabama'));
      });

      fireEvent.focus(secondLabel);
      fireEvent.keyDown(secondLabel, {
        key: 'ArrowDown',
        keyCode: 40,
        code: 40,
      });

      await waitFor(() => {
        fireEvent.click(getByText('Alaska'));
      });
    });

或者如果你有办法查询你的部分——例如使用 data-testid——你可以使用 inside：

within(getByTestId('id-for-section-A')).getByLabelText('Days')
within(getByTestId('id-for-section-B')).getByLabelText('Days')