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

## Real-time testing with Wallaby

Imagine a world where there are no boundaries between your code and your tests. Instead of saving changes to your code and seeing the output from Jest in a separate panel, you would see the results of your tests instantly as you type. Code with passing tests would be marked with a reassuring green. Code with failing tests would be highlighted in red, with a description of the failure floating next to it. Wallaby is the wonderful tool that allows this to happen.

In addition to working like magic, Wallaby is a commercial product. JavaScript developers have been blessed (spoiled, some would say) by an abundance of free tools. All of the other amazing software mentioned in this chapter (VS Code, Jest, ESLint, Prettier) are free and open source. But there is, quite simply, nothing else like Wallaby. There’s a 30-day free trial, so don’t let the price tag deter you from following along with this chapter.


Open up the Extensions sidebar, search for “Wallaby.js,” and install. A notification will pop up in the corner:

>Installing wallaby.js dependencies. It may take a minute or two. You will be notified once the install is finished.


While that’s happening, we can configure Wallaby for our project. Create a file called `wallaby.js` at the root of the project:


# Real-time testing with Wallaby

Imagine a world where there are no boundaries between your code and your tests. Instead of saving changes to your code and seeing the output from Jest in a separate panel, you would see the results of your tests instantly as you type. Code with passing tests would be marked with a reassuring green. Code with failing tests would be highlighted in red, with a description of the failure floating next to it. Wallaby is the wonderful tool that allows this to happen.

In addition to working like magic, Wallaby is a commercial product. JavaScript developers have been blessed (spoiled, some would say) by an abundance of free tools. All of the other amazing software mentioned in this chapter (VS Code, Jest, ESLint, Prettier) are free and open source. But there is, quite simply, nothing else like Wallaby. There’s a 30-day free trial, so don’t let the price tag deter you from following along with this chapter.


Open up the Extensions sidebar, search for “Wallaby.js,” and install. A notification will pop up in the corner:

>Installing wallaby.js dependencies. It may take a minute or two. You will be notified once the install is finished.


While that’s happening, we can configure Wallaby for our project. Create a file called `wallaby.js` at the root of the project:


Learn how to use Wallaby for a better testing experience.

Wallaby with VS Code

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

Wallaby with VS Code

Real-time testing with Wallaby