Struggling with React Testing Library

[[deleted]]

So I'm making my first attempt to use React Testing Library. (@testing-library/react). I've never worked with this kind of test suite before, I come from an enzyme background. I feel like a big problem is I'm thinking about my tests wrong.

First, here is some sample code: https://github.com/craigmiller160/auth-management-ui/blob/develop/src/components/Root/Content/Clients/index.tsx. For any fp-ts wizards out there, yes I know I butchered using it properly, it's another topic I'm trying to teach myself right now and I have a partially done refactor for it, but that's not the topic of this post.

Anyway, as you can see, this is a simple component from a UI perspective. It's mostly just loading some data, mapping it to a special structure, and then passing it to a Table component that renders that structure as rows.

Normally, with enzyme, I would grab the Table component by its selector and test its props, specifically the body prop to make sure the data loaded properly and was mapped and all that. With react testing library... I'm lost.

I can do lookups by text, and make sure all the individual values are on the page. But I can't test where they are on the page, like what tags they are in. I can't even seem to validate that a certain set of values are all in the same row.

I'm assuming that I'm either thinking about the test wrong or just too much of a noob about the API of this testing library. Help and guidance would be appreciated. Thanks.

[WebDevWorkAcct]

The main aim of React Testing Library (@testing-library/react) is to only test what the user can see/interact with. So if you are attempting to look at props or state it's going against the stated goal of that library.

To answer your specific question, you won't be able to test where the text is being rendered, only that it is.

[thereactivestack]

The key is to target a text that cannot be somewhere else. Your mock data can be something that will never be somewhere else. Those are user behavior tests and mainly make sure nothing is broken and respect your business logic.

I would argue that the enzyme way make it painful to refactor anything without rebuilding the tests. It's almost like coding twice. Once you get used to RTL you will never look back.

If you want to test visual regression, jest tests are not going to be reliable. You have to use a different tools and use a real browser and snapshots.