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

Question

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

例子：

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 中，但即使该元素仅包含另一个没有实际文本内容的元素，也会通过。

Answer 1

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

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

我知道这是一条很好的线路，但我认为您应该包括最后一行。我也觉得如果你能找到通过something other than test-id查询的方法就好了。