gpt4 book ai didi

javascript - React-testing-library - fireEvent.select() 不起作用

转载 作者:行者123 更新时间:2023-12-03 13:31:50 25 4
gpt4 key购买 nike

我目前正在为我正在从事的项目运行一些测试,但在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com