我目前正在为我正在处理的项目运行一些测试,并且在使用 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的输入字段?

    最佳答案

    为了使它与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...
    

    09-18 05:02