Testing React with Jest and Enzyme ⚛️🃏

Unit tests are written to verify the functionality of "units" (small pieces) of code. Hence, good unit tests do not test implementation details. Instead, they should test the behavior of the code being tested.

This is a list of patterns and anti-patterns widely used when testing react applications.

Patterns:

1. Check if a component exists
   1. Check if a given component exists
   2. Check if a component with given text exists
2. Simulating action on a button
   1. Check if the value has changed on screen
   2. Check if the props to child component has changed
3. Testing change in props
   1. Check if the DOM has been updated based on new prop
4. Testing if callback is called
   1. Check if the callback is called when an action is performed
5. Testing if a dependency was called
   1. Check if a function was called on a library/module (Using spy)

Anti-patterns:

1. Verifying state
2. Modifying state from test
3. Modifying props from test

Conventions in this repository:

Examples could be found in the examples/src folder. They are grouped by test behavior.

Patterns

Patterns can be found in the pattern.test.js file. (I usually name tests after my component so that it is easy to understand)

Anti-patterns

Anti-patterns can be found in antipattern.test.js along side the pattern.test.js.

Contributors

Send a Pull Request with patterns you have found interesting when testing React code with jest and enzyme. You can also share some antipatterns you have come across. Please explain why you think of it as a pattern/anti-pattern in the commit message.

If you have any feature requests, please create an issue in this repository.

If you have any comments on the patterns/anti-patterns listed here, let's discuss in comments 😊