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

Question

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

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

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

提前感谢。

Answer 1

作为一个也必须与两者一起工作的人，我了解到RTL在概念上与酶是非常不同的。RTL非常受可访问性驱动，这就是为什么他们鼓励使用像getByRole这样的高优先级查询。在你的例子中，我认为你可以用它来抓取按钮:

it('renders a disabled button', () => {
const props = {
...componentProps,
}
render(<InitialForm {...props} />);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
});

如果你在组件中有多个按钮，你可以尝试传递第二个选项参数来找到你想要的按钮:

const button = screen.getByRole('button', { name: '<the text in the button>' });

值得注意的是，RTL不鼓励使用prop断言，相反，他们建议编写用户驱动的测试。我用RTL编写测试的方式是从用户的角度思考和问自己问题，比如"用户现在看到了什么?"或者"用户在屏幕上看到了什么变化?"所以在你的例子中，我可能会在按钮上添加一个点击事件并断言分配给它的onClick函数是而不是叫做