Search code examples
javascriptreactjstddbddreact-testing-library

React Testing: Should Text Contents Be Tested For?

Should an element's text contents be tested, or only the visibility thereof? I think this is a question of what is an implementation detail.

Example:

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)
})

I feel like it is an implementation detail regarding how the body text is rendered, that I should only care that something was rendered.

For example, I next I want to store the body text as markdown and render it as HTML. To implement this, I must first change the test, because no longer will the stored text be equal to what is rendered in the DOM.

However, if only testing the visibility of a rendered element, there is no guarantee that element actually contains anything. I feel the test should be safer than that.

expect(getByTestId('post-body')).not.toBeEmpty() comes to mind in the jest-dom api, but that would pass even if the element contained only another element with no actual text contents.

Solution

  • Especially thanks to the guiding principals, I think it’s fair to say if you are testing your component or app the same way you would instruct a human to test it in production, then you are doing it right.

    If your component is taking an API call, and formatting it into Markdown, then you should test that it is actually happening correctly. How the component is rendering (and mimicking it in your test) is an example of testing implementation details. Testing what the component renders is not.

    I know it’s a fine line, but I think you should include your last line. I also think it’d be great if you could find a way to query by something other than test-id.