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

# Checking code quality with ESLint

A linter is a program that uses a set of rules to detect code that, though syntactically valid, is likely to contain mistakes. A classic example is using `=` (assignment) instead of `==` or `===` (equality) in an `if` statement:

~~~
if (savings = 0) {
  // This "condition" would empty your account!
}
~~~

Linting JavaScript is especially valuable because of its relatively freewheel nature. If you mistype `window` as `wimdow`, your program won’t refuse to run. it just won’t run the way you’d hoped. Of course, one way to avoid such bugs is to have extensive test coverage. But a linter can often identify such problems sooner and give you more helpful information for fixing them. Enter ESLint.


Although other JavaScript linters have been tried before, ESLint is the first to really take off, thanks to its pluggable architecture. There are plugins for React, Angular, and every other popular JavaScript framework to warn developers against the most common gotchas. And what do you know? There’s a Jest plugin, too.

You’ll find that linting is an invaluable addition to your TDD toolbelt. One that you’ll continue to use throughout this course. In this section, you’ll learn how to run ESLint, how to configure it, and how to integrate it with the VS Code for fast, automatic feedback.


## Installing and configuring ESLint

Here are the steps to install and configure ESLint in VS Code:

* Let’s add ESLint to our project. First, open the VS Code Terminal. If Jest is running in watch mode, press <kbd>Q</kbd> to quit. Then install the `eslint` package:

  ~~~sh
  $ npm install --save-dev eslint@5.10.0
  + eslint@5.10.0
  ~~~

* You can try running ESLint with `npx eslint .`, but it won’t do anything yet. The project needs an ESLint configuration first. Create a new file and save it as `.eslintrc.js`:

  ~~~
  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
  };
  ~~~

  This tells ESLint to use its recommended rule set as the base for our configuration. For a complete list of the included rules, check the ESLint docs. We’ll tweak those rules in the next section.
* Now try  linting `palindromes.js` using the npm `lint` script:

  ~~~sh
  $ npx eslint palindromes.js

  /Users/tburnham/code/test-driven-palindromes/palindromes.js
    1:25  error  Parsing error: Unexpected token >

  ✖ 1 problem (1 error, 0 warnings)
  ~~~

  ESLint refused to parse the arrow function syntax, `(expression) =&gt; { ... }`. By default, ESLint makes the conservative assumption that all code must conform to the ECMAScript 5 standard. Arrow functions were added in ECMAScript 6.
 functions were added in ECMAScript 6. 
* To change that assumption, add a new entry called `parseOptions` to the ESLint configuration:

  ~~~
  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
      ecmaVersion: 6,
    },
  };
  ~~~

* Rerun the linter, and you’ll see a different error:

  ~~~sh
  $ npx eslint palindromes.js

  /Users/tburnham/code/test-driven-palindromes/palindromes.js
    1:1  error  'module' is not defined  no-undef

  ✖ 1 problem (1 error, 0 warnings)
  ~~~

  Once again, ESLint is erring on the side of caution. The `module` global isn’t part of any ECMAScript standard, and would indeed be undefined in many environments. 
* We expect it to be defined, however, because this code will run in a Node environment. To let ESLint know that, add an entry called `env` to its configuration:

  ~~~
  // .eslintrc.js
  module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
      ecmaVersion: 6,
    },
    env: {
      node: true,
    },
  };
  ~~~

* Now give the linter one more try:

  ~~~sh
  $ npx eslint palindromes.js
  ~~~

 Now there’s no output. When it comes to linting, no news is good news.

Commit your work so far, using the recommended gitmoji for configuration changes:

~~~shell
:wrench: Initial ESLint setup
~~~

If you’d like more information on anything we’ve done so far, see the docs on configuring ESLint. Next up, we will build a slightly different set of linter rules for our test file.

>Install ESLint in the widget below by running the commands that we just learned about,, and then try running `npx eslint palindromes.js`. The `.eslintrc.js` file has already been configured for you.



Learn to use ESLint to identify any mistakes in your code, and find out how to configure and install it.

ESLint to Check Code Quality

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

ESLint to Check Code Quality

Checking code quality with ESLint