如何检查反应测试库中的水平?

Question

我在页面上有一个标题<h4>Big offer!</h4>，当我第一次运行我的测试时，我得到:

Expected: "Big offer!"
Received: <h4>Big offer!</h4>
35 |     const switchToggle = screen.getByRole('checkbox');
36 |     expect(switchToggle.checked).toEqual(true);
> 37 |     expect(titleEl).toEqual(title);

好的，它得到了正确的文件，所以我改变了我的代码来实际检查标题级别和文本，但它失败了:

Expected: "Big offer!"
Received: undefined
35 |     const switchToggle = screen.getByRole('checkbox');
36 |     expect(switchToggle.checked).toEqual(true);
> 37 |     expect(titleEl.name).toEqual(title);
|                          ^
38 |     expect(titleEl.level).toEqual(4);

我一直认为.name等于getByText()。我注释掉一行并尝试检查级别，但再次失败:

Expected: 4
Received: undefined
36 |     expect(switchToggle.checked).toEqual(true);
37 |     //expect(titleEl.name).toEqual(title);
> 38 |     expect(titleEl.level).toEqual(4);

我不明白为什么我的测试用例失败了。测试代码为:

const title = 'Big offer!';
render(<Component title={title}/>);
const titleEl = screen.getByRole('heading');
expect(titleEl).toEqual(title);
expect(titleEl.level).toEqual(4);

Answer 1

它不会工作，因为screen.getByRole(或其他查询)返回HTMLElement(在您的情况下返回继承HTMLElement的HTMLHeadingElement)。它没有name或level属性。你可以在这里查看更多。

要检查呈现的文本，您应该使用:

expect(titleEl).toHaveTextContent(title);

对于h4类型检查，您只需要在查询时过滤它:

const titleEl = screen.getByRole('heading', { level: 4 });

完整测试:

it('test search input', async () => {
const title = 'Big offer!';
render(<SearchBox title={title} />);
const titleEl = screen.getByRole('heading', { level: 4 });
expect(titleEl).toBeInTheDocument();
expect(titleEl).toHaveTextContent(title);
});