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

# Using Editor Groups

Let’s get back into the rhythm of TDD. For our project, we’re going to write a function that finds all palindromes in a string. A palindrome is a phrase that’s spelled the same forwards and backwards (ignoring spaces and punctuation). For example:

~~~
palindromes('What number is never odd or even, asked the Sphinx?')
~~~

would return:

~~~
['neveroddoreven']
~~~

As frivolous as a program for finding palindromes may sound, it’s a good approximation of a real project in one important sense: the requirements aren’t precisely defined. Whereas Fizz Buzz had crystal-clear rules that we could translate directly into tests, figuring out a reasonable set of rules for the palindrome finder will require creativity and experimentation.

Create a “New Untitled File” (<kbd>⌘</kbd> <kbd>N</kbd> on macOS, <kbd>^</kbd> <kbd>N</kbd> on Windows and Linux), then save it (<kbd>⌘</kbd> <kbd>S</kbd> on macOS, <kbd>^</kbd> <kbd>S</kbd> on Windows and Linux) as `palindromes.js`. Repeat for `palindromes.test.js`.

Now let’s try viewing the two files side-by-side: `palindromes.js` on the left, `palindromes.test.js` on the right. There are several ways to do this. If you’re a mouse person, the fastest way is to click-and-drag the `palindromes.test.js` tab to the right edge of the editor area. If you’d rather stick with the keyboard, trigger the “Move Editor into Right Group” command from the Command Palette.

Now all the relevant parts of the project are in view. You can move the focus to different editor groups by pressing the primary modifier key (<kbd>⌘</kbd> on macOS, <kbd>^</kbd> on Windows and Linux) with the number corresponding to the group’s ordinal position. So `palindromes.js` is <kbd>⌘</kbd> <kbd>1</kbd> or <kbd>^</kbd> <kbd>1</kbd>, and `palindromes.test.js` is <kbd>⌘</kbd> <kbd>2</kbd> or <kbd>^</kbd> <kbd>2</kbd>. This even works from the Terminal.

* In `palindromes.test.js`, create the first test:

  ~~~
  // palindromes.test.js
  const palindromes = require('./palindromes')

  describe('palindromes()', () => {
    it('correctly identifies one-word palindromes', () => {
      expect(palindromes('madam')).toEqual(['madam']); //1
    });
  });
  ~~~

>1. Previously, we’ve made equality assertions with `toBe()`. However, `toBe()` does a strict equality check, which would fail here. The `toEqual()` assertion method, by contrast, checks for deep object equality. So the assertion `expect(x).toEqual(['madam'])` passes as long as `x` is an array with the string `"madam"` as its only entry.

* In `palindromes.js`, write a placeholder implementation:

  ~~~
  // palindromes.js
  module.exports = (str) => {
    return [str];
  };
  ~~~

* Then open the integrated Terminal and start Jest in watch mode:

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

The resulting layout should resemble the following screenshot, with your code and test output visible all at once:



Get introduced to the VS code environment, shortcuts, and how integrated source control works on VS Code.

Editing Shortcuts and Source Control

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

Editing Shortcuts and Source Control

Using Editor Groups