我有一个这样的组件:
const MyComponent = ({ foo }) => (
<>
<div>
<Header />
{foo}
</div>
<div data-testid="self-closing-tag" className={styles.break} />
</>
)
(注意。React应该处理div作为一个自关闭标签，而没有React，这是无效的html)
我写了一个测试，为foo道具渲染我的组件<div data-testid="foo" />，并运行通过的expect(screen.getByTestId('foo')).toBeInTheDocument();。如果我在该测试中使用screen.debug，我将得到完全渲染的DOM。
但是当我为自我关闭标记编写测试时，像这样:expect(screen.getByTestId('self-closing-tag')).toHaveClass('break');我得到:
无法通过:
[data-testid="self-closing-tag"]获取元素
，我希望它打印出完全渲染的DOM，它只是打印<body />。
如果我在'foo'的测试中为自关闭标记添加expect断言，它们都通过了。
describe('<My Component />', () => {
beforeEach(<MyComponent foo={<div data-testid="foo" />} />);
it('renders foo', () => {
expect(screen.getByTestId('foo')).toBeInTheDocument();
// expect(screen.getByTestId('self-closing-tag')).toHaveClass('break'); -- this passes if uncommmented!
};
it('renders the self closing tag', () => {
expect(screen.getByTestId('self-closing-tag')).toHaveClass('break'); // cannot find element, prints '<body />' as the DOM.
})
})
我显然可以把所有东西都塞进同一个it语句中，但如果可能的话，我宁愿不这样做。我也想知道发生了什么。
我做错了什么?
这是因为toHaveClass需要一个带有类名的参数，您可以查看这里的文档。
expect(screen.getByTestId("self-closing-tag")).toHaveClass("XX class name you expect XX");
或者只是想检查元素是否有属性类
expect(screen.getByTestId("self-closing-tag")).toHaveAttribute("class");