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

# Writing a test

Time for your first test. Create a file called `greeting.test.js`:

```
// greeting.test.js
const greeting = guest => `Hello, ${guest}!`;

describe('greeting()', () => { // 1
  it('says hello', () => { // 2
    expect(greeting('Jest')).toBe('Hello, Jest!'); // 3
  });
});
````



> 1. `describe()` declares a **test suite**, which is a grouping of tests. Its first argument is a name, and the second is a function containing one or more tests.
> 2.  `it()` declares a **test**. Its first argument is a name, and the second is a function with the actual test code.
> 3. `expect()` creates an **assertion**. It takes a single argument, typically a value generated by the code being tested, and returns an object that exposes a set of matcher functions. 
> 4. `toBe()` a **matcher** that performs a strict equality test between the value being tested (the `expect()` argument) and the expected value (its own argument).

Note the grammatical convention here: the test suite name (`"greeting()"`) is a noun. The test name (`"says hello"`) is a verb. Together, they form a complete sentence describing the functionality covered by the test (`"greeting() says hello"`). This convention helps make test output easy to read. You can learn more about all of these methods in the Jest API docs.

To run the test, all you need to do is invoke the `jest` CLI. By default, it finds and runs every file in the current project with the `.test.js` extension. Since you set `jest` as the `test` script in `package.json`, you can run it with `npm run test`:

````text
$ npm test
...
 PASS  ./greeting.test.js
  greeting()
    ✓ says hello (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.83s
Ran all test suites.
````

Excellent! Jest found the test file, ran the test, and confirmed that `greeting('Jest')` produces the string `'Hello, Jest!'`.

You can go ahead and delete `greeting.test.js`. In the next section, we’ll start building this chapter’s project.

>We have filled the `greetings.test.js` file for you below, now try to run the test using `npm test`.



# Writing a test

Time for your first test. Create a file called `greeting.test.js`:

```
// greeting.test.js
const greeting = guest => `Hello, ＄{guest}!`;

describe('greeting()', () => { // 1
  it('says hello', () => { // 2
    expect(greeting('Jest')).toBe('Hello, Jest!'); // 3
  });
});
````



> 1. `describe()` declares a **test suite**, which is a grouping of tests. Its first argument is a name, and the second is a function containing one or more tests.
> 2.  `it()` declares a **test**. Its first argument is a name, and the second is a function with the actual test code.
> 3. `expect()` creates an **assertion**. It takes a single argument, typically a value generated by the code being tested, and returns an object that exposes a set of matcher functions. 
> 4. `toBe()` a **matcher** that performs a strict equality test between the value being tested (the `expect()` argument) and the expected value (its own argument).

Note the grammatical convention here: the test suite name (`"greeting()"`) is a noun. The test name (`"says hello"`) is a verb. Together, they form a complete sentence describing the functionality covered by the test (`"greeting() says hello"`). This convention helps make test output easy to read. You can learn more about all of these methods in the Jest API docs.

To run the test, all you need to do is invoke the `jest` CLI. By default, it finds and runs every file in the current project with the `.test.js` extension. Since you set `jest` as the `test` script in `package.json`, you can run it with `npm run test`:

````text
$ npm test
...
 PASS  ./greeting.test.js
  greeting()
    ✓ says hello (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.83s
Ran all test suites.
````

Excellent! Jest found the test file, ran the test, and confirmed that `greeting('Jest')` produces the string `'Hello, Jest!'`.

You can go ahead and delete `greeting.test.js`. In the next section, we’ll start building this chapter’s project.

>We have filled the `greetings.test.js` file for you below, now try to run the test using `npm test`.



Learn to write your first test in this lesson.

Your First Test

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

Your First Test

Writing a test