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