Table of Contents
The react-testing repository is a frontend workshop about how to test with the Reactjs.org library.
It turns around global topics about testing application but using the testing libraries as Jest, Enzyme, React-testing-library is the main focus.
react-testing
|--- apps
| |-- click-counter
| |-- jotto-app
| |-- jotto-react-content
| |-- jotto-redux
| |-- color-button
|
|-- images
|-- markdown
|-- links
|
|-- random-word-server-api
|
|__ setups
| ├── cra-setup
| ├── standard-setup
|
|__ README.md
Fork the repository using this guide, then clone it locally.
git clone https://github.com/CodeIsaMystic/react-testing.git
cd react-testing
npm installYou can now run the Express Server on your localhost.
npm startTo run your tests suites with Jest on watch mode.
npm testNOTICE: you can even use yarn if you prefer to npm, also the syntax using the run keyword as npm run start for example.
Writing tests should not be complicated so, "Always Keep Things Simple!!"
It only need to code clean and organized as much as possible and it should allowing for us to test in a simplifying way.
Combining Unit Test with Snapshots on React should do the job!
So, in summary:
- coding clean, pure functions
- organizing files architecture
- trying to be sure of what we render (shallowing, units tests)
- making some snapshots ( updating, checking... )
- using code coverage
Jest is a pretty big package, Pure javascript. There's no DOM API for example, that's why, in some cases, we need to include jsdom env in it.
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. This framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly.
By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.
Generate code coverage by adding the flag --coverage. No additional setup needed. Jest can collect code coverage information from entire projects, including untested files.
Jest uses a custom resolver for imports in your tests, making it simple to mock any object outside of your test’s scope. You can use mocked imports with the rich Mock Functions API to spy on function calls with readable test syntax.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
Jest is well-documented, requires little configuration and can be extended to match your requirements.
The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices.
Its primary guiding principle is:
The more your tests resemble the way your software is used, the more confidence they can give you.
The React Testing Library created by Kent C. Dodds, is a testing library known as "opinionated". Made initially for Reactjs, this library gives a specific approach to make and think our tests. It lets us test our software the way the users use it. It provides a virtual DOM, and lets us find some elements...
The react testing library provides a virtual DOM just for testing, and combine with Jest to code some suites tests, run them and determines whether it pass or fail.
- A test runner or framework
- Specific to a testing framework (though we recommend Jest as our preference, the library works with any framework. See Using Without Jest)
NOTE: This library is built on top of DOM Testing Library which is where most of the logic behind the queries is.
- The
react-testing-libraryrepository - The
react-testing-librarydocumentation - The
react-testing-librarycheat sheet - A
react-testing-librarytutorial
- The
Testing Librarymain repository - The
Testing Librarymain website - The
Testing Librarywebsite guidelines
Snapshots in Jest documentation. Empty Shallow Wrapper on snapshots tests using Jest with Enzyme. Conditional rendering of components with Jest & Enzyme.