react-testing-library - fireEvent.select()不能用。

Question

我目前正在为我的一个项目运行一些测试，但在使用 fireEvent.select() 作为关注输入字段的一种方式。

到目前为止，我的测试。

it('is not working :(', () => {
  const input = queryByPlaceholderText('blah');

  fireEvent.change(input, {
    target: {value: 'some text'},
  });

  expect(input).toHaveAttribute('value', 'some text');

  fireEvent.select(input); <-- issue here
});

我正在测试的组件有一个下拉菜单 只有当输入被关注时才会被显示出来 但似乎既不像... ... fireEvent.change() 也不 fireEvent.select() 正在专注于这个领域。我知道 fireEvent.change() 改变输入值。

到目前为止，我已经尝试过。

• fireEvent.click()
• fireEvent.focus()
• fireEvent.select()
• input.focus()

但这些选项都没有用

我需要能够在这个下拉菜单中选择一个选项，以便能够正确地测试该组件。

TL;DR

有没有一种方法可以用RTL关注一个输入字段？

Answer 1

为了让这个功能与React-Select一起工作，我不得不使用ReactDOM而不是 fireEvent. 然后，我就可以证明的断言与 react-testing-library 像平常一样。

import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';

export const openDropdown = ($container) => {
  // Opens the dropdown
  // eslint-disable-next-line react/no-find-dom-node
  selectOption(ReactDOM.findDOMNode($container).querySelector('.Select-arrow'));
};

export const selectOption = ($container) => {
  // Selects an option from the dropdown
  TestUtils.Simulate.mouseDown($container, { button: 0 });
};

    const $fooSelect = await waitForElement(() => app.getByTestId('foo-select'));
    openDropdown($fooSelect);
    const $fooElement = await waitForElement(() => app.getByText(fooFixture[0].name));

    selectOption($fooElement);

    await wait()
    // do stuff...