reactjs React测试库-按组件类型获取

blmhpbnm 于 2023-01-02 发布在 React

关注(0)|答案(1)|浏览(131)

我最近开始将我当前的React 16和17项目升级到React 18。因此，我不得不将我的测试库从Enzyme更改为React测试库（RTL）。我遇到了一个找不到等效库的场景。我使用material-ui作为样式库。在Enzyme中，我可以如下查询组件：

const wrapper = shallow(<InitialForm />);
const moreButton = wrapper.find(MoreMenu);
expect(moreButton.props().disabled).toBe(true);

我正在RTL中寻找类似的东西。我也尝试了findByRole，但它没有给予类似的输出。
先谢了。

reactjs

来源：https://stackoverflow.com/questions/74945466/react-testing-library-get-by-component-type

1条答案

按热度按时间

vwkv1x7d1#

作为一个同时使用这两种查询的人，我了解到RTL在概念上与Enzyme非常不同。RTL是非常受可访问性驱动的，这就是为什么他们鼓励使用像getByRole这样的高优先级查询。在您的情况下，我认为您可以使用它来抓取按钮：

it('renders a disabled button', () => {
  const props = {
    ...componentProps,
  }

  render(<InitialForm {...props} />);
  const button = screen.getByRole('button');

  expect(button).toBeDisabled();
});

如果该组件中有多个按钮，可以尝试传递第二个options参数来查找所需的确切按钮：
const button = screen.getByRole('button', { name: '<the text in the button>' });
值得注意的是，RTL不鼓励进行正确的Assert，相反，他们推荐编写用户驱动的测试。我用RTL编写测试的方法是从用户的Angular 思考和问自己问题，如“用户现在看到了什么？”或“用户屏幕上发生了什么变化？"因此，在您的示例中，我可能会在按钮上添加一个单击事件，并Assert分配给它的onClick函数没有被调用

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs React测试库-按组件类型获取

1条答案

相关问题

热门标签

最新问答