时间戳

首页 > 解决方案 > React 测试：是否应该测试文本内容？

javascript - React 测试：是否应该测试文本内容？

问题描述

应该测试元素的文本内容，还是只测试其可见性？我认为这是一个实现细节的问题。

例子：

it('renders post body', async () => {
    getPost.resolves(fakePost)
    const { getByTestId } = render(<Post />)
    await wait(() => getByTestId('post-body'))
    expect(getByTestId('post-body')).toBeVisible()
    // Should this next line be included?
    expect(getByTestId('post-body')).toHaveTextContent(fakePost.body)
})

我觉得这是一个关于如何呈现正文文本的实现细节，我应该只关心是否呈现了某些内容。

例如，接下来我想将正文文本存储为 markdown 并将其呈现为 HTML。要实现这一点，我必须首先更改测试，因为存储的文本将不再等于 DOM 中呈现的内容。

但是，如果只测试渲染元素的可见性，并不能保证该元素实际上包含任何内容。我觉得测试应该比那更安全。

expect(getByTestId('post-body')).not.toBeEmpty()在jest-dom api中想到了，但即使该元素仅包含另一个没有实际文本内容的元素，也会通过。

标签： javascriptreactjstddbddreact-testing-library

解决方案

特别感谢指导原则，我认为可以公平地说，如果您以与指导人类在生产中测试它的方式相同的方式测试您的组件或应用程序，那么您就做对了。

如果您的组件正在接受 API 调用，并将其格式化为 Markdown，那么您应该测试它实际上是否正确发生。组件如何呈现（并在您的测试中模仿它）是测试实现细节的一个示例。测试组件呈现的内容不是。

我知道这是一条很好的线路，但我认为您应该包括最后一行。我还认为，如果您能找到一种通过test-id 以外的方式进行查询的方法，那就太好了。

推荐阅读