Question

这是我的React Testing Library测试之一的一行：

expect(queryByTestId('tile-sample-service')).toHaveClass('regularTile-0-2-24', 'btn', 'btn-outline-secondary');

虽然有效，但是测试很脆弱，因为每次组件的结构发生变化时，我都需要返回并修复已更改的数字。

是否可以在RegEx查询中使用toHaveClass或是否有其他方法来检查是否存在类，但是可以避免添加诸如“ 0-2-24”之类的内容？

Answer 1

我认为toHaveClass(...classNames: string[])是不可能的，但是您可以使用Shallow Renderer，尝试一下

import ShallowRenderer from 'react-test-renderer/shallow';


    it('match claas name', () => {
         const renderer = new ShallowRenderer();
         renderer.render(<Component  />);

         expect(renderer.getRenderOutput().props.className).toMatch(/button/i);

    })

Answer 2

是的，对于JS生成的类名中的某些CSS而言，有时数字后缀会更改。

类似的事情应该起作用：

failure-domain.beta.kubernetes.io/zone

RegEx可以与React Testing Library一起使用来检查类名吗？

2 个答案: