Testing Your React Components with Jest

Rachel Ralston || rachel@rachelralston.com || twitter || linkedIn

• Slides
• jest docs
• enzyme docs
• react test utils

Get Up and Running

1. Clone this repo. Replace REPO_URL with the correct repo url.

   $ git clone REPO_URL react-testing-intro && cd react-testing-intro

2. from here, you can either
   • cd into /simple-example, install dependancies/run tests to see an ultra simple example working.
   • cd into /testing-components & follow the steps below to see testing react components irl.
3. Install dependancies

   $ npm install

4. To see the application running, start it:

   $ npm start

5. To run the tests in watch mode:

   $ npm test

6. To run the tests with a coverage report:

   $ npm test -- --coverage

Steps to set up from scratch

Read more in the create-react-app readme

• install a new project with create-react-app

  $ create-react-app weird-new-project
  $ cd weird-new-project

• create-react-app comes with jest installed, but let's also add enzyme.

  $ npm install --save enzyme enzyme-adapter-react-16 react-test-renderer

• add a enzyme set up file at src/setupTests.js

  import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new Adapter() });

Now you're able to write tests using both jest and enzyme.