Test-driven Development with React

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.

Beginner

58 Lessons

17h 30min

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

36 Playgrounds

6 Quizzes

This course includes

36 Playgrounds

6 Quizzes

Course Overview

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.

Course Content

Before We Begin

Learn how to use TDD with React, focusing on joyful coding and unit tests.

What Is This Course About?

A Few Tips to Enjoy the Course Better

Test-Driven Development with Jest

Get started with TDD in React using Jest for efficient testing and rapid feedback.

Why Test-Driven Development and Jest Node and npm Running Jest with npx and npm Your First Test Why Use Test-Driven Development Running Tests Automatically and Code Coverage Git with Test-Driven Development Mantra Test Yourself on Test-Driven Development with Jest.

Integrated Tooling with VS Code

Examine VS Code's features, integrating ESLint, Prettier, and Wallaby for a streamlined, customizable TDD environment.

Introduction to VS Code Editing Shortcuts and Source Control User Settings on VS Code ESLint to Check Code Quality ESLint Integration with VS Code Prettier to Beautify Your Code Prettier Integration with VS Code Wallaby with VS Code Mantra Test Yourself on VS code and Integrated Tooling

Testing React with Enzyme

Break down complex ideas to test React components using Enzyme, Jest, Babel, and more.

Introduction to Enzyme React, Babel and JSX Babel with Jest, ESLint, Prettier, and Wallaby Component Testing with Enzyme Working With and Testing Using Component's Props Jest Setup Testing with Children DOM Elements Testing Stateful Components Manipulating State of Stateful Component in Tests Mantra Test Yourself on Testing with Enzyme

Styling in JavaScript with Styled-Components

Take a closer look at using styled-components, webpack, and Jest for efficient React styling and testing.

Introduction to CSS-in-JS Webpack Webpack Configuration and Server Styled Components Create Styled Components Babel Plugin and StyleLint Test Styled Components Making Style Assertions for Styled Components Testing Jest Snapshot Mantra Test Yourself on Styled-Components

Refactoring with Higher-Order Components

7 Lessons

Investigate refactoring React components using Higher-Order Components for enhanced functionality and maintenance.

Continuous Integration and Collaboration

7 Lessons

Master the steps to enhance continuous integration, collaboration, and documentation using GitHub, Travis CI, and Storybook.

Conclusion

1 Lesson

Sharpen your skills in React testing and explore further learning resources.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!