This simple application has been created as an exercise on my way to learn and master testing in JavaScript and React.
The testing libraries that have been chosen are Jest, Enzyme and Cypress. [Update June 2018 - In my future projects I will switch to react-testing-library in place of Enzyme].
The application has been built using create-react-app, which takes care of setting up the development environment and ships with Jest as default testing library.
To install this application you can (fork and) download it and then run the command npm install from your terminal.
After the installation has successfully complete, you can launch it with the command npm start.
To run the unit tests, use the command npm test in a separate command prompt window.
To run the end-to-end tests (at the moment there's only a basic one) with Cypress, type npx cypress open at the root of the project folder and then Run all specs in the Cypress window that will open.
- React - A JavaScript library for building user interfaces
- Jest - A complete and easy to set-up JavaScript testing solution
- Enzyme - A JavaScript Testing utility for React
- Cypress - A test runner for anything that runs in a browser
- Daniele Erbì - daniel-234
The tests to mock a call to an external API are taken from the course Testing React with Jest and Enzyme. The article But really, what is a JavaScript mock? by Kent C. Dodds helped me simplify the mock test even further by using a mock directory.
Instead of using the built-in React Router v4 library, I re-wrote the custom version built by Tyler McGinnis in his course (reference in Acknowledgments below).
It's probably enough to follow the instructions on the Getting Started section above to install and run the application. If you encounter an error about missing the jest-cli module, though, here are some steps to follow.
First error message:
Error: Cannot find module 'jest-cli'.
After reinstalling the 'jest-cli' module, another one would show up:
TypeError: environment.setup is not a function.
The solution suggested on this issue by Dan Abramov (Gaeron) solved the problem.
Here is what he wrote: "If you have both react-scripts and jest in your package.json, delete jest from it. Then delete package-lock.json, yarn.lock and node_modules. Then run npm install (or yarn if you use it)."
As Visual Studio Code has been used as IDE for this project and there seems to be issues about the extension it uses to support Flow, this project commits regarding Flow have been reverted.
All code regarding Flow has been moved to another branch, while in the master branch it will be only added type checking with PropTypes.
This project is licensed under the MIT License.
- Frontend Masters - Testing JavaScript Applications (feat. React and Redux) by Kent C. Dodds
- Egghead - Testing JavaScript with Jest, by Kent C. Dodds
- An introduction to testing React components with Enzyme 3
- JavaScript Playground - Testing React with Jest and Enzyme
- Medium - But really, what is a JavaScript mock?
- Google Developers - Async Functions: Making Promises Friendly
- Tyler McGinnis - Build your own React Router v4
- React Training GitHub - testing the Route Component
- Stackoverflow - Updating address bar with new URL without hash or reloading the page
- MDN Web Docs - Manipulating the browser history
- 39Digits - Configure Prettier and ESLint in Visual Studio Code
- 39Digits - Automatically format your JavaScript commits using Prettier and Husky
- Stackoverflow - Unexpected use of no restricted globals