Another take on testing using Jest, Enzyme to build out a react-redux todo-list app.
To run tests, enter $ yarn test
in the terminal.
- Make sure small parts of application are working as expected
- Make sure new features don't break old features
- Automate previous two points - checking existing code is less tedious simulate events like clicks, typing, form submit, fetch
- Reusable - running into the same bug more than once?
- Communicate ideas to other developers - 'self-document' your code by writing tests
- highlight bugs at their source
- proof that your code works
- This is the trickiest part - you can test anything small or large.
- Deciding what exactly to test can be painful, but will lead to a deeper understanding of the code you wind up writing.
- Test the behavior of your app! If it's event-driven, simulate the events that trigger different functions.
- Test functions that accept input and return an output
- (in react) test components! Test their methods, whether they render, that they match a snapshot etc.
- fetches || network requests
- inputs/outputs
- test changes to data structures
- Jest - facebook's test runner, included with 'create-react-app'
- Enzyme - Airbnb's test suite, allows for shallow rendering, snapshotting components and more
- Rspec - Testing Ruby code (useful if your backend is built in rails!)
To add Enzyme: $ yarn add enzyme enzyme-adapter-react-16
Create setup file called setupTests.js
. add the following:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() })
to configure enzyme-to-json (which makes snapshots more readable): $ yarn add enzyme-to-json
and add the following to your package.json:
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
to run tests: $ yarn test (or npm test)
- export a 'non-connected' or 'non-combined' version of your components/reducers for easy testing
- If a test seems simple, write it anyway! It could prevent sneaky bugs
- Keep calm, and read the docs!