繁体   English   中英

react-testing-library - fireEvent.select() 不工作

react-testing-library - fireEvent.select() not working

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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...
1 react-testing-library中的fireevent问题

我正在为我的 React 应用程序使用 react-testing-library。 在一个测试用例中,我需要在文本框和焦点中填充一些值。 这是测试脚本 - 运行测试用例时出现以下错误 - 如果我能提供更多信息,请告诉我 ...

3 React-Testing-Library - 在fireEvent之后拍摄快照

我在调用fireEvent.focus()后拍摄快照时遇到问题。 这是测试。 我在这里有两个测试,1个用于比较输入聚焦前的快照,1个用于比较输入聚焦后的快照。 但是,当我检查快照时,只创建了1: 似乎asFragment是在组件的初始渲染期间创建的,并且不会被fireEv ...

7 double fireEvent 在我的 react-testing-library 测试中不起作用

我正在使用 React 测试库和 Typescript。 我需要测试我的菜单:点击一个按钮,测试一个带有内容的Popper是否可见,再次点击一个按钮并测试一个带有内容的Popper是否不可见。 我还测试触发按钮是否一直可见。 在浏览器中一切正常。 AMenu对屏幕大小没有依赖性。 当我co ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM