Skip to content
This repository has been archived by the owner on May 19, 2022. It is now read-only.

daniel-234/testing-react-with-jest-enzyme-and-cypress

Repository files navigation

Testing React with Jest, Enzyme and Cypress

🔴 This repository is now archived!

code style: prettier Cypress.io tests

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.

Getting Started

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.

Built With

  • 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

Author

Notes

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).

Notes on the Installation process

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:

  1. Error: Cannot find module 'jest-cli'.

After reinstalling the 'jest-cli' module, another one would show up:

  1. 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)."

Notes on Flow, flow-typed and Visual Studio Code

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.

License

This project is licensed under the MIT License.

Acknowledgments

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published