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; 博士

有沒有辦法用 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...