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

# Continuous integration and collaboration 

A recurring theme of this course has been the power of automation to improve your workflow. When properly applied, tools like ESLint and Jest greatly increase the chances that you’ll catch mistakes in your code long before that code has a chance to go into production. When you’re working as part of a team or maintaining an open-source project, how do you extend the power of automation to your collaborators?

One answer is good old-fashioned documentation: “Please run the tests before submitting a patch.” But that leaves the door open for human error. A better solution is to offload such quality control checks to a server, away from the personalized environments of developer machines. This technique has become known as continuous integration (CI).

Continuous integration takes the weight off of your shoulders as a project maintainer by allowing you to automate tasks you’d otherwise have to take on yourself. The CI server can tell potential contributors not only whether their patches pass the project’s tests, but also how much those changes affect test coverage, compiled asset size, and any other metrics you care about.

Adding a CI server is a solid first step for project automation. You can go further by adding scripts to your contributors’ development workflows and providing live documentation for developers to play with. Taking the time to set up all of these support tools will pay dividends by making your project’s requirements crystal-clear to potential contributors and streamlining the process of reviewing their patches.

In this chapter, you’ll learn to set up the popular Travis CI service to run the tests for the `test-driven-carousel` project. You’ll also learn how to use Husky to add Git hooks to your project to check code before it’s committed, spotting potential problems early. And finally, you’ll generate sleek, interactive documentation for your carousel component with Storybook.

## Setting up Travis CI

Travis CI is a continuous integration service that’s become enormously popular in recent years thanks to its convenience and versatility. Travis can run your project’s scripts automatically every time you or a collaborator pushes a change and report the results through GitHub’s “Pull Request” interface for branches. Each run is performed in its own isolated environment, producing more reliable results than you get in the personalized environment of a developer machine.

This section will walk you through the process of giving Travis CI access to your project, allowing you to offload tests and other automated tasks to the cloud. This will be a speedy process. You’ll upload your project to GitHub, authorize Travis to access it, then add a configuration file to tell Travis to run your project’s tests. Finally, you’ll add a “badge” to show the world that your project’s tests are passing on Travis CI.

### Hosting your project on GitHub

Travis CI is designed as an extension of GitHub, the preeminent source code hosting giant. If you don’t already have an account with GitHub, now would be a good time to create one. Once you’re logged in, create a new repository for your personal incarnation of the `test-driven-carousel` project. Be sure to make it a public repository. Travis CI is free for public, open-source projects. You can ignore all of the other options, as shown in the screenshot below: 


Learn about continuous integration through Travis CI and integrating Github repositories with Travis CI.


Github and Travis CI

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

Github and Travis CI

Continuous integration and collaboration