React-Select 和用户事件库

Question

我想使用 User-Event-Testing-Library (https://testing-library.com/docs/ecosystem-user-event/) 测试我的 react-select 组件。
我只是想测试如果点击后选择打开菜单。

这是我的代码：

如果我使用 fireEvent 它可以工作，但是如果我使用 useEvent 它就不能工作..

  // WORKING with fireEvent


  test('should open select onclick', () => {
    const wrapper = render(
      <ReactSelect
        className="select"
        classNamePrefix="select"
        options={[{ value: '0', label: 'Label' }]}
      />,
    );
    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(0);
    userEvent.click(wrapper.container.querySelector('input'));
    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(1);
  });

  // NOT WORKING with userEvent

  test('should open select onclick', () => {
    const wrapper = render(
      <ReactSelect
        className="select"
        classNamePrefix="select"
        options={[{ value: '0', label: 'Label' }]}
      />,
    );
    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(0);
    userEvent.click(wrapper.container.querySelector('input'));
    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(1);
  });

Answer 1

我终于将 Jest 升级到 v26 并且可以正常工作了。