Research - React Testing Library for Component Testing about pm-dashboard-v2 HOT 10 CLOSED

After doing a bit of research, I think that actually we might want to use React Testing Library instead of Enzyme...it seems to be a popular opinion on the Internet...many people are actually migrating from Enzyme to React Testing Library.

I guess in general one thing about react-testing-library is it's more like blackbox testing; you are kind of just testing how a user would interact with the components and ignore behind the scenes operations. From a Stack Overflow article, "The idea is that you should communicate with your application in the same way a user would. So rather than set the state of a component you reproduce the actions a user would do to reach that state." On the website for React Testing Library, it says its guiding principle is "The more your tests resemble the way your software is used, the more confidence they can give you." While testing with Enzyme is kind of testing the state of the components themselves and their internal behavior.

It also describes itself as being a replacement for Enzyme. So I'll look into React Testing Library instead.

from pm-dashboard-v2.

The React Testing Library is compatible with Jest–in fact it says on their website that while the library is not specific to a particular testing framework, Jest is their preferred testing framework. It doesn't actually need any configuration to be used. Also another benefit is what I described above, how React Testing Library seems to kind of focus on, this is what the end user sees and interacts with, and their guiding principle listed above.

In terms of complexity, I don't think it should be too complex, in terms of adding or setting up. It seems pretty well-documented. Probably the most common functions used in tests include render, which renders a React element into the DOM, and fireEvent, which allows you to simulate user actions.

For more information, look at their website.

from pm-dashboard-v2.

In regards to your first question, I can't find a general answer anywhere. Here is a Reddit post where one person says they keep things separate and the other says they keep them next to components. That's literally all I could find...I think I found some tutorials where they kept things in the same folder (but then again, they only had one component or something) and another where they separated them out. I think maybe we should keep them separate to keep things a bit cleaner, but I feel like either way is fine. What do you think?

from pm-dashboard-v2.

Potentially rename this issue to "Research - React Testing Library for Component Testing"

from pm-dashboard-v2.

Also, React Testing Library is part of this "family of libraries" thing called Testing Library, which also has a DOM Testing Library. So it looks like the React Testing Library basically has all the functions from the DOM Testing Library in addition to a few other functions, like render (see this).

from pm-dashboard-v2.

This is fantastic to hear and exactly the kind of things we want to unearth from our research. Thank you!

The one question I have remaining is: how should we structure file folders within the react app for testing files? All in one separate folder or next to each component?

from pm-dashboard-v2.

Also, how is the boilerplate setupTests.ts file usually used?

from pm-dashboard-v2.

In regards to your second question, I think having this import '@testing-library/jest-dom'; is enough. From this article, "Testing library documentation defines jest-dom as a companion library for React Testing Library that provides custom DOM element matchers for Jest."

from pm-dashboard-v2.

Also, React Testing Library is referenced on the React website. So I think we should definitely use it instead of Enzyme.

from pm-dashboard-v2.

Sounds great! Let's revisit folder structure when we actually create that for the front-end. Feel free to update the readme with research and decided being marked as yes with a "Y"

from pm-dashboard-v2.