Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

react.tar.gz

intro

intro-copy

ch3-something

generic

ch3-1

ch3-2

ch4-1

ch2-1

ch2-2

ch2-3

ch5-copy

intro-copy-wmhr0i

ch3-1-copy

ch4-1-copy

ch4-1-copy-2

generic-copy

ch4-copy

This course is a deep dive into testing in React. You will learn unit testing and integration testing using tools such as Jest and Enzyme. You will also learn about other tools such as ESlint, Prettier, Babel, Webpack, and Travis CI that add convenience for coding and testing.

Test-driven Development with React

# Running Jest tests automatically

Jumping to the console every time you want to run some tests is a chore. Happily, Jest has a “watch mode” where it automatically re-runs all tests when it detects any change to a test file or a source file dependent on a test.

To start Jest in watch mode, run it with the `--watchAll` flag:

~~~sh
$ npx jest --watchAll
~~~

Now you should see the same failure result as before. Try saving either `index.js` or `index.test.js`, and the test will re-run. You can press `q` at any time to quit. For now, leave Jest watch mode running.

# Getting to green

Since Jest is watching your project, see if you can tackle the `"FizzBuzz"` test case:




// index.js
module.exports = (num) => {
  if (num % 15 === 0) return 'FizzBuzz';
  return `${num}`
};

As soon as you hit save, your console output should change:

~~~sh
 PASS  ./index.test.js
  fizzBuzz()
    ✓ returns "FizzBuzz" for multiples of 3 and 5

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.121s, estimated 1s
Ran all test suites.
~~~

You’ve just completed a test-driven development cycle.


# Measuring test coverage

A great feature of Jest is its built-in code coverage measurement. This shows you how much of the code being tested actually ran during tests. To compute code coverage, add the `--coverage` flag. By default, this saves a report to a `coverage` directory and shows a summary in the console. To just get that summary output, use the flag `--coverageReporters=text`:

~~~sh
$ npm run test -- --coverage --coverageReporters=text

 PASS  ./index.test.js
  fizzBuzz()
    ✓ returns "FizzBuzz" for multiples of 3 and 5

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |       75 |       50 |      100 |    66.67 |                   |
 index.js |       75 |       50 |      100 |    66.67 |                 3 |
----------|----------|----------|----------|----------|-------------------|

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.121s, estimated 1s
Ran all test suites.
~~~

Here the report shows 75% of statements were covered, and 50% of branches. “Branches” refer to the possible outcomes of `if`/`else` statements. The 50% result reflects the fact that the current test only covers the case where the condition `num % 15 === 0` passes. Try adding a test to cover the case where it fails:



In this lesson, we will be writing tests while getting introduced to different features of Jest.


Before We Begin

Test-Driven Development with Jest

Integrated Tooling with VS Code

Testing React with Enzyme

Styling in JavaScript with Styled-Components

Refactoring with Higher-Order Components

Continuous Integration and Collaboration

Conclusion

Running Tests Automatically and Code Coverage

Running Jest tests automatically