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 in changes

Whenever you add a new test and get it to pass, that’s a good time to get your project into source control. That way, no matter what you do to the project, you can always restore it to the all-green state later.

We’ll use Git as our source control system in this course. If you’re not familiar with Git, you might want to read through the “Git Basics” section of the excellent *Pro Git by Scott Chacon and Ben Straub*.

The first step is initializing this project as a Git repository:

~~~sh
$ git init
Initialized empty Git repository in
/Users/tburnham/code/test-driven-fizzbuzz/.git/
~~~

Don’t commit just yet. If you run `git status`, you’ll notice that there are a _staggering_ number of files. Remember those “538 packages” npm mentioned when you installed Jest? They’re all hanging out in the project’s `node_modules` directory. Fortunately, you don’t need to keep those in source control, because all of the information needed to re-create the `node_modules` tree is contained in `package-lock.json`. So tell Git to ignore the installed packages by creating a `.gitignore` file at the root of the project:

```
//.gitignore
node_modules/
```

There. Now the project looks a lot more manageable. From Git’s point of view:

~~~sh
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        index.js
        index.test.js
        package-lock.json
        package.json

nothing added to commit but untracked files present (use "git add" to track)
~~~

All of those files belong in source control, so stage them for commit:

~~~sh
$ git add .
~~~

Just for fun, this course uses the recommended gitmoji for all of its commit messages. These are ASCII-friendly aliases that render as emojis on GitHub and in some other tools. For a project’s first commit, the appropriate gitmoji is `:tada:`, which represents the [“Party Popper” emoji:](https://emojipedia.org/party-popper/)

~~~sh
$ git commit -m ":tada: First commit"
[master (root-commit) dca2255] :tada: First commit
 5 files changed, 5893 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.js
 create mode 100644 index.test.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
~~~

Congrats on completing your first feature. You wrote a test for the feature, made the test pass, and then checked that change into source control. 

As an exercise, see if you can repeat the TDD process for the remaining Fizz Buzz requirements. Namely, your `fizzBuzz()` function should return:

1. "Fizz" for multiples of 3,
2. "Buzz" for multiples of 5, and
3. The given number for multiples of neither 3 nor 5.

For each of those requirements, add a test within the same suite (the `describe()` block), modify the implementation to make everything pass, then move to the next requirement. You can find an example solution at the end of the chapter.

<extract idref="ex.2"/>



Learn how to use Git with test-driven development.


Git with Test-Driven Development

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

Git with Test-Driven Development

Checking in changes