9

我目前正在为我正在处理的项目运行一些测试，并且无法将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;博士

有没有办法专注于 RTL 的输入字段？

4

1 回答 1

3

为了让它与 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...
于 2020-05-21T18:38:01.927 回答