我目前正在为我正在从事的项目运行一些测试,但在使用 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...
关于javascript - React-testing-library - fireEvent.select() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53305648/