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

# Adding a Jest setup file

Since this chapter’s project will have three components (`Carousel`, `CarouselButton`, and `CarouselSlide`), it’s going to have three test files. Rather than duplicate the Enzyme configuration logic across all three, we should move that logic into a “setup file” that will only run once whenever Jest runs our tests.

Actually, we’re going to need two files. The setup file, and a Jest configuration to point to it. Let’s start with the configuration. By default, Jest looks for a file called `jest.config.js` in the root of the project:

```
//jest.config.js
module.exports = {
  setupTestFrameworkScriptFile: './src/tests/jestSetup.js',
};
```

>1. The `setupTestFrameworkScriptFile` entry tells Jest to go ahead and “Run the file called `src/tests/jestSetup.js` in the root of this project before running any tests.”

Jest supports many other configuration options, but we won’t be needing them. If you’re curious, consult the [official docs.](https://jestjs.io/docs/en/configuration.html)

* Now let’s create that file:

  ```
  //src/tests/jestSetup.js
  import Adapter from 'enzyme-adapter-react-16'; 
  import { configure } from 'enzyme';
  configure({ adapter: new Adapter() });
  ```

If you’re running Wallaby or `jest --watchAll`, you’ll need to restart it in order for Jest to recognize the new setup.

>**Linting and Project Structure**<p>Why put the Jest setup file in the `tests` directory? Although the Jest setup file isn’t a test file, it does run in the same environment as the test files. That means that it should follow the Jest-specific linter rules defined in `src/tests/.eslintrc.js`. At this point, the setup file satisfies either set of linter rules, but that could change if the test setup grows more elaborate.</p><p>It’s always useful to remember which environment each JavaScript file in your project runs in and to keep it in a directory with an appropriate ESLint configuration. Ideally, we’d move `jest.config.js` and `wallaby.js` into a more precisely configured directory as well, but (as of this writing) Jest and Wallaby expect those files to live in the project root.</p>

With the Jest setup file in place, you no longer need to run Enzyme’s `configure()` method in each individual test file:





Get introduced with the Jest setup file and learn why it’s used.


Jest Setup

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

Jest Setup

Adding a Jest setup file