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 an Example Page

* Create an `example` dir. Since it will contain web app code, it should be based on the same ESLint config as the `src` dir. However, one adjustment is in order. As it is, the linter will complain any time we return JSX from a function if that function doesn’t declare its arguments as `propTypes`. This is a bit of a nuisance, so disable the [`react/prop-types` rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md) within the `example` dir:

  ```
  //.eslintrc.js
  module.exports = {
    env: {
      browser: true, 
    },
    rules: {
      "react/prop-types": "off", }
    };
  ```
<embed file="code/ch4/example/.eslintrc.js" language="jsx" />

* Then add an `index.js` with some placeholder code:

  ~~~
  // example/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';

  const container = 
  document.createElement('div');
  document.body.appendChild(container);
  ReactDOM.render(# Hello, webpack!, container);
  ~~~

* Declare that JS file as a second entry point in the project’s webpack config:




module.exports = {
  mode: 'development',
  entry: {
    carousel: './src/Carousel.js',
    example: './example/index.js',
  },
  ...
};

* We need a page to host this app. Rather than writing up the HTML, you can make webpack generate it as part of the build process using `html-webpack-plugin`:

  ~~~sh
  $ npm install --save-dev html-webpack-plugin@3.2.0
  + html-webpack-plugin@3.2.0
  ~~~

* Once the plugin is installed, add it to the webpack config:


Learn about webpack configuration and webpack server to see the app we have been making in the browser.


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

Webpack Configuration and Server