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 a Travis configuration

Next, use your GitHub account to log into Travis CI. A screen will come up asking whether you want to grant the `travis-pro` organization access to your GitHub repositories. Authorize it. Travis needs that access to do its job. Once you’re logged in, you may be prompted to activate another layer of GitHub integration, GitHub Apps. Allow that, too.

Once Travis is able to connect to your GitHub account, you’ll see a list of your GitHub repositories, including `test-driven-carousel`. Click the link to the repo’s Travis page. At this point, there isn’t much to see because Travis doesn’t know what you want it to do for the project.

* To change that, you’ll need a file at the root of `test-driven-carousel` called `.travis.yml`. The `.yml` extension indicates that this is a YAML file, which is a minimal human-readable syntax for data. Add a single entry:

 ```yaml
  #.travis.yml
  language: node_js
  ```

  That’s all Travis needs to recognize this as a Node project. 
* There’s one small problem, though. Travis defaults to an old version of Node, which will run into problems when trying to build `test-driven-carousel`. Fortunately, we can specify any Node version we want by adding a configuration file for nvm, the node version manager:


 ```
  //.nvmrc
  10.15
  ```

  This tells Travis to switch to Node 10.15.x (the latest stable release as of this writing) before doing anything else.

  Commit this modest addition:

 ````text
  :wrench: Add Travis CI and nvm configs
  ````

* Then push to GitHub:

 ```
  $ git push origin master
  ```

Now watch as the project’s Travis page springs to life. Recognizing that `test-driven-carousel` is a Node project, it clones the project from GitHub, installs its dependencies from npm, then runs its tests for you:

````text
> jest
 PASS  src/tests/Carousel.test.js
 PASS  src/tests/HasIndex.test.js
 PASS  src/tests/AutoAdvances.test.js
 PASS  src/tests/CarouselSlide.test.js
 PASS  src/tests/CarouselButton.test.js
Test Suites: 5 passed, 5 total
Tests:       35 passed, 35 total
Snapshots:   2 passed, 2 total
Time:        3.318s
Ran all test suites.
````

Pretty cool, right? Although you should run your tests before pushing any changes, it’s reassuring to see the tests pass when another machine downloads your commit. And if anyone submits a pull request against your project, Travis will automatically run your tests against that branch and report the result there.


Let’s learn how to further configure Travis CI.

Travis CI Configuration

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

Travis CI Configuration

Adding a Travis configuration