Comments (10)
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.
Related Issues (20)
- Change Requests - Displays Incorrect Implemented Change Date Implemented
- Change Requests - Make URL Even Shorter
- General - Add a Help Page alongside settings
- Change Requests - Add Date Submitted as Table Column
- Change Requests - Add `COMPETITION` and `MAINTENANCE` as CR Why Types
- General - Alphabetize Users for Easier Selection
- General - Create Manual Database Insertion Script
- Projects - Upcoming Deadlines & Timeline Status
- Users - Enable Users to Save Settings
- Users - Add Teams HOT 2
- General - Enhanced Useful Links
- General - Abstract Card Component
- General - Convert All TSX Pipes to Components
- Projects - Link Back to Project on Work Package Page
- General - More Breadcrumbs
- General - Upgrade middyjs to v3 HOT 1
- General - Remove Empty Stylesheets
- Projects - Endpoint for getting risks
- [Frontend] - Move Remaining CSS Files to Stylesheets Folder
- [Frontend] - Move Test Files to Mirrored Folder Structure
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pm-dashboard-v2.