Testing React

Articles & Tutorials

Successful Refactoring with React Testing Library (blog.logrocket.com)
Mar 15, 2021
In this article, we’ll take a look at a simple React component and observe how our test suite responds to simple refactors. We’ll use React Testing Library to highlight the power of testing how the user interacts with the app.
  • Tyler Hawkins
Guide to unit testing in React Native (blog.logrocket.com)
Mar 15, 2021
React Native is among the most commonly used libraries for building mobile apps today. In this guide, we will explore unit testing in React Native applications, covering benefits, best practices, testing frameworks, and more.
  • Chidume Nnamdi
Testing and error handling patterns in Next.js (blog.logrocket.com)
Mar 09, 2021
Two valid concepts worth exploring when using every framework are testing and error handling. It’s no different with Next.js. This article aims to reveal the different ways to run tests and handle errors in a Next.js application.
  • Raphael Ugwu
What’s new in Cypress 6.0 (blog.logrocket.com)
Mar 08, 2021
With Cypress, you can manipulate the DOM, inspect your UI elements, test forms, and much more. In this article, we’ll set it up and explore the exciting features released in Cypress 6.0.
  • Kasra Khosravi
React Testing Library – Tutorial with JavaScript Code Examples (freecodecamp.org)
Mar 07, 2021
This post will help you to learn what the React Testing Library is, and how you can use it to test your React application.
  • Nathan Sebhastian
Testing apps with Jest and React Testing Library (blog.logrocket.com)
Mar 01, 2021
In this article, we’ll test React applications with Jest and React Testing Library, a popular combination of a JavaScript testing framework and a React utility for testing components.
  • Juan Cruz Martinez
React Component Tests for Humans (css-tricks.com)
Feb 23, 2021
React component tests should be interesting, straightforward, and easy for a human to build and maintain.
  • Miroslav Nikolov
How to Test React.useEffect (epicreact.dev)
Dec 04, 2020
So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.
Testing UI - Next JS, Typescript, Jest and React Testing Library (dev.to)
Nov 10, 2020
As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library.
  • Maciek Grzybek
How to build a search bar in React (emgoto.com)
Nov 06, 2020
A search bar is a great way to make content on your website discoverable. In this tutorial, we’ll be building an accessible search bar component using React. We’ll also be adding a couple of unit tests with React Testing Library.
  • Emma Goto
Testing React Native Apps In the Cloud Part 1 (callstack.com)
Oct 22, 2020
A quick guide on how to test React Native apps in the cloud instead of using testing devices.
  • Mike Grabowski
How to unit test your Gatsby blog with React Testing Library (emgoto.com)
Oct 16, 2020
Writing unit tests will keep your Gatsby blog bug-free, and leads to more maintainable code. This post covers how you can use Jest and React Testing Library to cover some of your Gatsby blog’s most essential features.
  • Emma Goto
Supercharge Testing React Applications With Wallaby.js (smashingmagazine.com)
Oct 16, 2020
This article will introduce you to Wallaby.js — a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file. You will also learn how to use Wallaby.js for testing React applications.
  • Kelvin Omereshone
Unit Testing In React Native Applications (smashingmagazine.com)
Sep 29, 2020
Unit testing has become an integral part of the software development process. It is the level of testing at which the components of the software are tested. In this tutorial, you’ll learn how to test units of a React Native application.
  • Fortune Ikechi
A low-friction way to do TDD with React (blog.logrocket.com)
Aug 17, 2020
This tutorial shows you how and why to use React Testing Library for low-friction Test Driven Development (TDD).
  • Jeff Auriemma
Testing with react-testing-library and Jest (blog.bitsrc.io)
Aug 04, 2020
In this post, we’ll look at two libraries that enable us to carry out UI testing in our React application.
  • Chidume Nnamdi
Unit testing React - What you need to know (felixgerschau.com)
Jul 20, 2020
I intent this article to serve as a starter guide for developers who are new to testing React components or even unit testing in general. I won't go into the technical details here, but I'll point you to articles and books that I read and found useful.
  • Felix Gerschau
From Enzyme to React Native Testing Library: How I Changed My Way of Unit Testing (callstack.com)
Jul 08, 2020
How I went from Enzyme to React Native Testing Library and made my unit test more effective and closer to what the users can interact with.
  • Ferran Negre
How To Test Your React Apps With The React Testing Library (smashingmagazine.com)
Jul 03, 2020
In this article, we’re going to show how React developers can quickly start testing their app with the React Testing Library (RTL).
  • Chidi Orji
A Practical Guide To Testing React Applications With Jest (smashingmagazine.com)
Jun 24, 2020
Building a well-functioning application requires good testing; otherwise, knowing whether your application works as expected would be a matter of guesswork and luck. Jest is one of the best tools available for testing React applications.
  • Adeneye David Abiodun
Stop mocking fetch (kentcdodds.com)
Jun 08, 2020
Why you shouldn't mock fetch or your API Client in your tests and what to do instead.
How to use React Testing Library Tutorial (robinwieruch.de)
Jun 01, 2020
In this React Testing Library tutorial, we will go through all the steps necessary to unit test and integration test your React components with confidence.
Testing state changes in React functional components (blog.logrocket.com)
Jun 01, 2020
Learn how to test your React functional components and the state changes for components that use hooks with Jest and Enzyme as testing libraries.
  • Eslam Hefnawy
React Native Testing Library 2.0 – What’s New? (callstack.com)
May 28, 2020
We are happy to announce the release of version 2.0 of React Native Testing Library. For the last couple of weeks, we’ve been working really hard to bring you useful new features and to polish our APIs and their documentation, as well as improve compatibility with other Testing Library implementations.
  • Michał Pierzchała
Unit Testing React components with Cypress (itnext.io)
May 19, 2020
Cypress 4.5.0 is out with a long-awaited feature: first-class support for framework’s components render.
  • Stefano Magni
React Testing Crash Course (dev.to)
May 13, 2020
In this tutorial, I’ll show you how to write unit, integration and end-to-end tests for React applications.
  • Gábor Soós
Common mistakes with React Testing Library (kentcdodds.com)
May 05, 2020
Some mistakes I frequently see people making with React Testing Library.
Enzyme vs. react-testing-library: A mindset shift (blog.logrocket.com)
May 04, 2020
In a world of myriad tools, it can be difficult to choose the one best suited for your purposes in different scenarios.
  • Will Soares
React Integration Testing: Greater Coverage, Fewer Tests (css-tricks.com)
May 01, 2020
This article follows an exercise that starts with a simple website, validates behavior with unit and integration tests, and demonstrates how integration testing delivers greater value from fewer lines of code.
  • Sarah Mogin
Testing a Virtual List component with Cypress and Storybook (itnext.io)
Apr 01, 2020
The challenges coming from integrating the tools, the current status of integration, and some best practices to properly test a rendered component.
  • Stefano Magni
Jest tests with react context api (itnext.io)
Apr 01, 2020
I always find myself doing dumb mistakes all over the code that could easily be caught by well-written tests. Last fall I attended this conference where this workshop leader said if you really want your developers to write good tests, you have to make the developers accountable. And you do that by fire all the testers. I love testers though.
  • Malin Milford
How to test custom React hooks (kentcdodds.com)
Mar 24, 2020
Get confidence your custom React hooks work properly with solid tests.
How to Start Testing Your React Apps Using the React Testing Library and Jest (freecodecamp.org)
Mar 12, 2020
Testing is often seen as a tedious process. It's extra code you have to write, and in some cases, to be honest, it's not needed. But every developer should know at least the basics of testing. It increases confidence in the products they build, and for most companies, it's a requirement.
  • Ibrahima Ndaw
Semantic tests with React Testing Library (blog.logrocket.com)
Feb 21, 2020
Testing code can be a controversial subject, largely due to the multitude of ways one can go about writing a test.
  • Rafael Quintanilha
Testing Ionic React Apps with Jest and React Testing Library (ionicframework.com)
Feb 18, 2020
Have you been looking into testing an Ionic React project, but not sure where to start? In this post, I’ll go over the basics of how to get started as we build out an app using tests.
  • Ely Lucas
Fix the "not wrapped in act(...)" warning (kentcdodds.com)
Feb 03, 2020
There are a few reasons you're getting this warning. Here's how you fix it.
How to (unit) test in React (itnext.io)
Jan 23, 2020
This guide explains what unit testing is, why it’s needed and the best practices for small to large React applications.
  • Onoufrios Malikkides
Comparing React testing libraries (blog.logrocket.com)
Jan 02, 2020
If you create something, no matter what it is, you should test it before serving it to other people. That way, you can have more confidence and control over your finished product before you roll it out.
  • Murat Çatal
Patterns For Testable React Components (zemuldo.com)
Dec 30, 2019
In this post, I share how to make React components ready for testing. I cover testing render, component actions, and different states.
  • Danstan Onyango
How I test my React apps in 2019 (react.christmas)
Dec 18, 2019
Testing your apps is becoming so easy, it's starting to become worth the trouble!
  • Kristofer Selbekk
Testing Custom React Hooks with Jest (newline.co)
Dec 10, 2019
Hooks in React are a new, popular, and extensible way to organize side-effects and statefulness in React components. By composing the base hooks provided by React, developers can build their own custom hooks for use by others.
  • James P. Fulford
Test your applications in production (react.christmas)
Dec 09, 2019
Wouldn’t it be sweet to be able to test your application straight in production? Not having to wait 20 min to redeploy and roll out your new features?
  • Jørgen Johansen
Testing React Hooks With Enzyme and React Testing Library (css-tricks.com)
Nov 29, 2019
In this tutorial, we will look at how to do that by making use of a to-do application built with hooks. We’ll cover writing of tests using Ezyme and React Testing Library, both of which are able to do just that.
  • Kingsley Silas
Writing end-to-end tests for GraphQL servers using Jest (blog.logrocket.com)
Nov 24, 2019
Writing end-to-end tests for applications helps to ensure applications behave as expected. It also comes in handy when we add new features to existing applications because it ensures the newly introduced features integrate well with our already existing features.
  • Gbolahan Olagunju
TDD with React Test Renderer (blog.logrocket.com)
Nov 10, 2019
It’s no secret that Enzyme has become the de facto standard for React components testing, but there are other good options around. For example: React Test Renderer.
  • Alexander Solovyev
React Native End-to-end Testing and Automation with Detox (sitepoint.com)
Nov 06, 2019
Detox is an end-to-end testing and automation framework that runs on a device or a simulator, just like an actual end user.
  • Ahmed Mahmoud
What I've Learned About Testing React Apps - Part 1: Unit Tests (dev.to)
Nov 01, 2019
There are a couple of types of testing - most notably unit, integration and e2e (end-to-end) testing. For the purpose of this post I'd like to combine unit and integration tests under the name of "unit tests" (any QA engineers who are reading this, please forgive me).
  • Tomasz Łakomy
How to add testing to an existing project (kentcdodds.com)
Oct 29, 2019
This is how you get started in testing your application.
End-to-end testing in React Native with Detox (blog.logrocket.com)
Oct 09, 2019
End-to-end testing is a technique that is widely performed in the web ecosystem with frameworks like Cypress, Puppeteer, or maybe with your own custom implementation.
  • Emanuel Suriano
How to test your React apps with the React Testing Library (freecodecamp.org)
Oct 09, 2019
Building web applications is not an easy task as of today. To do so, you're probably using something like React, Vue or Angular. Your app is faster, and the code is both more maintainable and readable.
  • Thomas Lombart
Making your UI tests resilient to change (kentcdodds.com)
Oct 07, 2019
User interface tests are famously finicky and prone to breakage. Let's talk about how to improve this.
Testing Universal React (Native) Apps with Jest and Expo! (blog.expo.io)
Sep 26, 2019
Unit testing with Jest is an integral part of projects that are built with React. But we’ve also found that sometimes entire classes of bugs slip through with several Jest configurations, such as the preset included with React Native, and the testing never seems to really cover everything.
How to Create and Test React Custom Hooks (blog.bitsrc.io)
Sep 24, 2019
A quick React Custom Hooks tutorial — with examples!
  • Shubham Zanwar
Testing React applications in 2019 (blog.logrocket.com)
Sep 19, 2019
In this post, we’ll take a closer look at some of the best ways you can go about testing your React applications.
  • Peter Ekene Eze
Pixels matter or easy UI screenshot testing in React Native (medium.com)
Sep 10, 2019
In this article you will find an introduction to the pixels-catcher project that can be applied to any React Native application and will enable you to do UI snapshots testing of any screen or a component.
  • Maksym Rusynyk
Model-Based Testing in React with State Machines (css-tricks.com)
Sep 04, 2019
We’ll learn how model-based testing can eliminate the need to manually write integration and end-to-end tests, by automatically generating full tests that keep up-to-date with an abstract model for any app.
  • David Khourshid
A quick guide to Testing React hooks that use RxJS (dev.to)
Sep 03, 2019
This post helps explain how thou can test useEffect hook that uses RxJs inside to listen to mouse click and delay the click with RxJs's debounceTime operator.
  • Kamaal Aboothalib
How to test React-Redux connected Components (robinwieruch.de)
Aug 30, 2019
React components connected to Redux can turn out pretty complex. Thus most people think that testing these complex components can turn out very complex as well. But it shouldn't be complex at all, if you take full control of the Redux store in your integration/unit test for the React component.
Best Practices for Unit Testing in React Version 16 (eng.uber.com)
Aug 29, 2019
With the introduction of React version 16 in 2017, hooks now make it possible to reuse stateful logic between components. However, with these new features, engineers must revisit previously defined conventions for using React. Unit testing is one of these practices.
  • Anat Kleiman
Write fewer, longer tests (kentcdodds.com)
Aug 27, 2019
Making tests too short often leads to poor testing practices and way more tests.
Testing in Next.js: Dynamic Imports (sergiodxa.com)
Aug 22, 2019
Learn how to test components using dynamic imports in a Next.js application.
  • Sergio Xalambrí
The Big Mac index and Jest fetch testing (swizec.com)
Aug 22, 2019
The Big Mac index is a purchasing power parity index published by The Economist. Jest fetch testing is a tech task so frustrating that it almost made me quit the industry.
How to Jest Snapshot Test the Difference (robinwieruch.de)
Aug 15, 2019
Snapshot tests are a common way to write lightweight component tests. When a snapshot test runs for the first time, it stores its output (e.g. rendered component’s HTML structure) in a snapshot output file.
Increase Code Maintainability with React Integration Testing (toptal.com)
Aug 14, 2019
Integration tests are a sweet spot between cost and value of tests. Writing integration tests for a React app with the help of react-testing-library instead of or in addition to component unit tests can increase code maintainability without impairing development speed.
  • Anton Rublev
How to shallow render Jest Snapshot Tests (robinwieruch.de)
Aug 10, 2019
If you are using Snapshot Tests with Jest for your components, there are a few pitfalls you have to be aware of.
Simplifying Gatsby Unit Testing using a Jest Preset (dev.to)
Aug 10, 2019
Recently I have been expanding the codebase for my website and blog in order to have a more robust web presence. Part of this of course includes unit testing the source code using Jest.
  • Kepler Sticka-Jones
Mocking and Testing GraphQL in React (telerik.com)
Jul 31, 2019
Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze.
Avoid Nesting when you're Testing (kentcdodds.com)
Jul 30, 2019
Why using hooks like beforeEach as a mechanism for code reuse leads to unmaintainable tests and how to avoid it.
How to test React components with Mocha, Chai & Enzyme (robinwieruch.de)
Jul 21, 2019
Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place.
End to End Testing React with Cypress (robinwieruch.de)
Jul 18, 2019
End-to-end testing (E2E) was always a tedious task with testing frameworks from the past. However, nowadays many people are using Cypress.io for it. Their documentation has a high quality and their API is concise and clean.
How to test React components with Jest & Enzyme (robinwieruch.de)
Jul 17, 2019
In this React testing tutorial, we will introduce Enzyme in our Jest testing environment.
Write tests. Not too many. Mostly integration. (kentcdodds.com)
Jul 17, 2019
Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.
How to test React components with Jest (robinwieruch.de)
Jul 16, 2019
Jest got introduced by Facebook for testing JavaScript and especially React applications. It’s one of the most popular ways to test React components nowadays. Since it comes with its own test runner, you can simply call Jest from the command line to run all your tests.
Testing React Components: Complete Guide (freecodecamp.org)
Jul 11, 2019
When I first started learning to test my apps back in the day, I would get very frustrated with the different types, styles and technologies used for testing, along with the disbanded array of blog posts, tutorials and articles. I found this to be true as well for React testing.
  • Mohammad Iqbal
React/Redux Integration Tests with Jest & Enzyme (itnext.io)
Jun 12, 2019
I write tests because I want to be confident about two things: 1) That I didn’t break any existing code. (Existing tests to the rescue). 2)That my new code works as intended.
  • Quinton Aiken
Using Cypress to Write Tests for a React Application (css-tricks.com)
Jun 12, 2019
In this tutorial, we will write tests to cover a todo application I’ve built.
  • Kingsley Silas
Making unit tests fail when PropTypes error (javascriptplayground.com)
Jun 03, 2019
Documenting components with React's PropTypes library is a great way to be notified when you've forgotten to pass a certain prop. Today we're going to see how we can leverage these to make our tests fail when our PropTypes are incorrect.
Avoid the Test User (kentcdodds.com)
May 24, 2019
How your UI code has only two users, but the wrong tests can add a third.
Getting started with Enzyme for React (blog.logrocket.com)
May 24, 2019
In this tutorial, we’ll explore the different rendering options the utility provides, along with some practical examples.
  • Diogo Souza
Getting Started with React Testing Library (css-tricks.com)
May 22, 2019
We’re going to spend some time writing tests together using react-testing-library for a light to-do application I built.
  • Kingsley Silas
My experience moving from Enzyme to react-testing-library (medium.com)
May 21, 2019
Hopefully, this post can help you understand some key differences between the two libraries and inspire you to explore them for yourself.
  • David Boyne
How to know what to test (kentcdodds.com)
Apr 13, 2019
Practical advice to help you determine what to test.
Testing Stateful React Function Components with React Testing Library (robertcooper.me)
Apr 08, 2019
In this post, I'll look at an example stateful function component that is tested with react-testing-library. I'll also write the same component into its class component equivalent and show how the class component can be tested with enzyme.
  • Robert Cooper
AHA Testing (kentcdodds.com)
Apr 07, 2019
How to apply the "Avoid Hasty Abstraction" principle to your test code.
Testing React — an overview (medium.com)
Mar 08, 2019
Testing your frontend application has never been easier before. Within this article, I’ll explain different levels of testing your application as well as the most suited solutions for testing the specified levels.
  • Daniel Schulz
Async Axios in React Testing Library (leighhalliday.com)
Mar 07, 2019
In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.
Firing Events in React Testing Library (leighhalliday.com)
Mar 07, 2019
In this article we'll see how to fire and test events in our React components using the React Testing Library.
Async MobX in React Testing Library (leighhalliday.com)
Mar 07, 2019
In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.
Writing Tests for React Applications Using Jest and Enzyme (css-tricks.com)
Mar 01, 2019
While it is important to have a well-tested API, solid test coverage is a must for any React application. Tests increase confidence in the code and helps prevent shipping bugs to users. That’s why we’re going to focus on testing in this post, specifically for React applications. By the end, you’ll be up and running with tests using Jest and Enzyme.
  • Kingsley Silas
Nock it out of the park, HTTP mocking for React (itnext.io)
Feb 24, 2019
Nock is used to mocking calls to HTTP. It makes it possible for us to specify what URLs to listen to and what to respond with. This is a fairly short article that shows how you use the library nock.
  • Christoffer Noring
A quick guide to testing React Hooks (blog.logrocket.com)
Feb 20, 2019
Before we go on to see how to write tests for React Hooks, let’s see how to build a React app using Hooks. We’ll be building an app that shows the 2018 F1 races and the winners for each year.
  • Yomi Eluwande
Jest 24: Refreshing, Polished, TypeScript-friendly (jestjs.io)
Jan 25, 2019
Today we are happy to announce the next major release of Jest - version 24! It's been 4 months since the last minor release, and 8 months since Jest 23, so this upgrade is a big one, with something for everyone!
  • Simen Bekkhus
Testing React components (flaviocopes.com)
Jan 05, 2019
Test your first React component using Jest and `react-testing-library`
React Hooks: What’s going to happen to my tests? (blog.kentcdodds.com)
Dec 24, 2018
How can we prepare our tests for React’s new hooks feature?
A new approach to mocking GraphQL data (medium.freecodecamp.org)
Dec 11, 2018
How we power React component tests and examples at Stripe
  • Sashko Stubailo
Testing of React component with a real Redux store (react.christmas)
Dec 05, 2018
Do you avoid testing of components that depend on Redux because you fear the complexity? Are you loosing sleep worrying about configuring huge mock stores for testing the simplest of components? Fear no moarrr!
  • Aleksander Sjåfjell
  • Kjetil Børs-Lind
How to set up Jest & Enzyme like a boss (medium.freecodecamp.org)
Nov 12, 2018
When I started out writing tests for my React application, it took me some tries before I figured out how to set up my testing environment using Jest & Enzyme.
  • Adeel Imran
Test-Driven Development with React, Jest, and Enzyme - Part 2 (testdriven.io)
Nov 06, 2018
In this part, we'll finish the UI by adding the number and operator keys before we dive in to adding the basic calculator functionality.
  • Caleb Pollman
Test-Driven Development with React, Jest, and Enzyme - Part 1 (testdriven.io)
Nov 06, 2018
In this post, we'll develop a React app using Test-Driven Development (TDD) with Jest and Enzyme.
  • Caleb Pollman
Writing Tests for Apollo Client in React (robinwieruch.de)
Oct 19, 2018
The tutorial builds up on a mocked GraphQL API enabling you to write tests for your Apollo Client queries and mutations in React. It answers the question: How to test Apollo Client in React ...
Components testing in React: what and how to test with Jest and Enzyme (medium.freecodecamp.org)
Oct 03, 2018
Testing React components may be challenging for beginners as well as experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project. In order to cover the codebase, you have to know which components must be tested and which code exactly in the component should be covered.
  • Alyona Pysarenko
How to Test React Components using Jest and Enzyme (blog.bitsrc.io)
Sep 26, 2018
Learn how to test React components using Jest and Enzyme
  • Linh Nguyen My
Reactjs Unit Testing with Storybook + Jest (blog.cloudboost.io)
Sep 23, 2018
Reactjs is a UI library by facebook while Storybookjs is a testing tool for components by representing different states of the component and Jest is another cool unit testing tool by the creators of reactjs for javascript including reactjs.
  • Danstan Onyango
Building a Visual Unit Test for React (telerik.com)
Sep 07, 2018
Building a simple app for teaching concepts around scoring a hand of poker using functional programming.
  • Ed Charbeneau
An Intro to Web Site Testing with Cypress (css-tricks.com)
Aug 29, 2018
End-to-end testing is awesome because it mirrors the user’s experience.
  • Devon Campbell
Testing Components in React Using Jest and Enzyme (code.tutsplus.com)
Aug 17, 2018
In this post, we'll get a deeper understanding of testing components in React by writing more practical and realistic tests.
  • Manjunath M
Testing Components in React Using Jest: The Basics (code.tutsplus.com)
Aug 10, 2018
In this article, I will take you through everything that you need to know to write tests for your React components. I'll also cover some of the best practices and techniques while we're at it.
  • Manjunath M
Demystifying Jest Async Testing Patterns (medium.com)
Aug 09, 2018
In this post I’d like to demystify some of these async patterns and highlight the traps that are hidden inside.
  • Liran Tal
Why I Never Use Shallow Rendering (blog.kentcdodds.com)
Jul 23, 2018
Tests should help me be confident that my application is working and there are better ways to do that than shallow rendering.
Confession: I don't unit test React/Redux code (blog.jakoblind.no)
Jul 12, 2018
I am just as careful about not introducing too many tests as I am careful about adding too many dependencies or writing more code than is necessary.
Testing React / Redux Apps with Jest & Enzyme - Part 4: Testing Redux Reducers (alligator.io)
Jul 10, 2018
In this part we’ll cover some simple examples on how to test Redux reducers.
  • Jasper Valero
Test Isolation with React (blog.kentcdodds.com)
Jul 02, 2018
Why your tests should be completely isolated from one another and how to do that.
Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions (alligator.io)
Jun 27, 2018
In this part we’ll cover some simple examples on how to test Redux actions.
  • Jasper Valero
Reacting, a short guide for react testing (tech.sumone.com.br)
Jun 16, 2018
This article tries to give some hints from a bunch of articles that I have read, trying to find a fast and scalable way to write react tests, with a bit of personal experience and thoughts.
  • Lucas Bordignon
React Baby Steps IV: Testing React-Redux (x-team.com)
Jun 14, 2018
I prefer to apply the KISS Principle when solving problems, so the same goes for testing React-Redux apps.
  • Vanja Petreski
Testing React / Redux Apps with Jest & Enzyme - Part 2: Testing React Components (alligator.io)
Jun 03, 2018
In this part we’ll cover some simple examples on how to test React components.
  • Jasper Valero
Testing React / Redux Apps with Jest & Enzyme - Part 1: Installation & Setup (alligator.io)
May 20, 2018
Learn how to install and setup Jest and Enzyme for testing React.
  • Jasper Valero
Patterns Principles and Tools for Testing Your React (Native) Apps (philosophicalhacker.com)
May 18, 2018
I want to talk about some patterns, principles, and tools for testing react native applications.
  • Matt Dupree
End-to-end testing React apps with Puppeteer and Jest (blog.logrocket.com)
May 09, 2018
In this tutorial, we’ll see how to write tests for a React app using Jest and Puppeteer. Testing is an important part of modern web application development, it helps to check if the code you wrote is acceptable and works as accepted. It’s a way of catching bugs in your code before you go “live”.
  • Yomi Eluwande
Testing your React App with Puppeteer and Jest (blog.bitsrc.io)
May 07, 2018
How to use Puppeteer and Jest to perform End-to-End Testing on your React App
  • Rajat S
A quick guide to test-driven development in React (medium.freecodecamp.org)
Apr 07, 2018
Following the principles of Test-Driven Development (TDD) when writing a front-end React app might seem more difficult than doing the same on the back-end.
  • Michał Baranowski
Introducing the react-testing-library (blog.kentcdodds.com)
Apr 02, 2018
A simpler replacement for enzyme that encourages good testing practices.
React Testing Tutorial: Test Frameworks & Component Tests (robinwieruch.de)
Mar 19, 2018
A React tutorial on how to setup and use React component tests with testing frameworks such as Mocha, Chai, Sinon, Enzyme and Jest.
Tutorial: User Interface Testing with Jest and Puppeteer (valentinog.com)
Mar 11, 2018
I started to consider testing with Jest and Puppeteer right after the library came out. Puppeteer has quite an interesting API.
  • Valentino Gagliardi
Debugging a Create React App with VS Code (elijahmanor.com)
Feb 05, 2018
In this post we’ll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app.
  • Elijah Manor
Testing components using render props (blog.kentcdodds.com)
Jan 08, 2018
Let’s look at how we can write tests for React components that use render props!
Testing your code (react.christmas)
Dec 02, 2017
Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!
  • Kristofer Selbekk
Write tests. Not too many. Mostly integration. (blog.kentcdodds.com)
Oct 16, 2017
Guillermo Rauch tweeted this a while back. Let’s take a quick dive into what it means.
A Guide to Testing React Components (sitepoint.com)
Sep 22, 2017
In this take, let’s explore what it takes to unit test React components. I’ll show the thought process for making your components testable.
  • Camilo Reyes
Testing in React Native  -  Jest & Detox (pillow.codes)
Sep 08, 2017
Writing unit & end-to-end tests to ship your mobile app with confidence.
  • Monte Thakkar
Snapshot Testing React with Jest (daveceddia.com)
Apr 05, 2017
Testing is a double-edged sword. On one hand, having a solid test suite makes code easier to refactor, and gives confidence that it works the way it should. On the other hand, tests must be written and maintained. They have a cost, like any other code.
Testing React Applications with Jest (auth0.com)
Jan 26, 2017
Learn how to test React applications with the Jest JavaScript testing framework.
  • Joyce Echessa
Diverse Test-Automation Frameworks For React Native Apps (smashingmagazine.com)
Aug 24, 2016
The bar is set high for today’s mobile apps. First, apps must meet the standard of quality that app markets expect. Secondly, mobile app users are very demanding. Plenty of alternatives are available to download, so users will not tolerate a buggy app. Because mobile apps have become such a crucial part of people’s lives, users won’t be shy about sharing their love or hate for an app — and that feedback gets in front of millions of users in seconds.
  • Ville-Veikko Helppi

Video Guides & Talks

What Is React Native Testing Library (youtube.com)
Aug 18, 2020
In this video Mike Grabowski and Mike Pierzchała talk about the React Native Testing Library.
  • Mike Grabowski
  • Mike Pierzchała
Don't Mock Fetch (or Axios): Use Mock Service Worker and Test Like a User (youtube.com)
Jun 08, 2020
Despite having launched a video showing how to mock both Fetch and Axios recently... here is another solution, the one recommended by Kent C. Dodds (creator of React Testing Library), showing how to use Mock Service Worker to avoid making actual HTTP requests when you are running your tests.
Mocking Fetch in React Components (youtube.com)
May 17, 2020
In this video we'll test that a react component renders correctly when making a fetch call via the useSWR hook. We then mock the function that calls fetch, rather than fetch itself, to focus on the interface rather than the internal implementation details.
Writing first React component test (youtube.com)
May 16, 2020
In this video, we will write our first React component test using cypress-react-unit-test and Cypress.
  • Gleb Bahmutov
Mocking Fetch Using jest-fetch-mock (youtube.com)
May 16, 2020
This video focuses on testing a function which makes a fetch call, mocking fetch using the jest-fetch-mock package rather than mocking the module manually ourselves (like we did in the previous video).
How to NOT render something in React (youtube.com)
Jan 21, 2020
We cover 5 ways to either not render an element or to have it hidden, and then we'll write tests to verify the presence or lack of presence of an element, and whether an element has a class or not using React Testing Library.
Testing in React Native: Unit & E2E (youtube.com)
Oct 03, 2019
This talk I am going to share with you my experience of dealing with these in React Native by moving towards TDD. Also how writing unit and e2e tests helped me write better code and build beautiful apps.
  • Preeti Wadhwanni
Testing in Production (youtube.com)
Oct 03, 2019
How do you know your feature is working perfectly in production? And if something breaks in production, how will you know? Will you wait for a user to report it to you? What do you do when your staging test results do not reflect current production
  • Talia Nassi
Testing Is All About Principles (youtube.com)
Sep 13, 2019
Should we use react-testing-library or Enzyme? What about snapshot testing? What should be our code coverage? Those are questions we often hear when discussing testing. Those questions are easy to discuss but the answers won't necessarily make us write more reliable code.
  • Alex Lobera
Testing React Hooks (youtube.com)
Jul 15, 2019
You may be wondering, "How do I test React Hooks?" The short answer is: Just like normal React Components! Yay!
  • Harry Wolff
How I like to Write Integration Tests in React (youtube.com)
Jun 15, 2019
I share how I like to write integration tests in React with React Testing Library and Apollo.
Intersection of Automation and Exploratory Testing (youtube.com)
May 01, 2019
In this talk, we look at skills-focused path to better testing in the intersection of automation and exploratory testing. We can arrive at the intersection by enhancing our individual skills, or our collaboration skills. What could you do to become one of those testers who companies seek after that work well in the intersection, giving up the false dichotomy?
  • Maaret Pyhäjärvi
Testing MobX with React Testing Library (youtube.com)
Mar 20, 2019
In this video we cover how to use React Testing Library to test a component being injected with a MobX store.
React Testing Library - Testing Redux (youtube.com)
Mar 02, 2019
In this video we'll see how to test using Redux and connected components with the React Testing Library.
How to Test a Custom React Hook (that uses setTimeout) (youtube.com)
Feb 27, 2019
Someone asked me to test the hook we used yesterday.
React Testing Library - Testing a mock Axios request (youtube.com)
Feb 13, 2019
In this video we look at how to test a component with react testing library which contains an asynchronous Axios request that we'll mock out using Jest mocks.
Updating react-testing-library for React 16.8.0 (part 2) (youtube.com)
Feb 06, 2019
Hooks was released along with a special utility for testing React properly. I'm going to update react-testing-library to make it easier for people to test things properly.
Updating react-testing-library for React 16.8.0 (youtube.com)
Feb 05, 2019
React has a new utility for testing and I'm going to update react-testing-library to use that utility.
React Testing Library - Events and Async (youtube.com)
Jan 31, 2019
In this video we'll see how to fire events (click) and how to wait for elements to appear on the screen when the code is asynchronous.
Intro to React Testing Library (youtube.com)
Jan 29, 2019
We'll investigate how to easily test our React components using the React Testing Library an alternative to Enzyme that works alongside Jest. This is an introduction, covering installation, snapshots, finding elements and verifying certain attributes on those elements.
How NOT to test custom React hooks (and how to test them) (youtube.com)
Jan 07, 2019
It can be tempting to try and call your custom hook manually and test it that way, but you'll run into the error "Hooks can only be called inside the body of a function component." And for good reason. Let's talk about why that is and the proper way to test a custom React hook.
Sleeping better at night with cypress.io (youtube.com)
Dec 20, 2018
In this talk Tomasz would like to show you how YOU can start covering your app with e2e tests and showcase coolest features that cypress.io has to offer.
  • Tomasz Łakomy
Add Cypress to a gatsby app (youtube.com)
Dec 20, 2018
I've got a little gatsby app, let's see how we can add Cypress to test it!
Tip Top Testing in JavaScript (youtube.com)
Dec 17, 2018
In this talk we'll dive into the approaches and strategies needed to create a great unit test environment for your JavaScript and React applications. We'll examine what makes the perfect test, what to avoid, and how to use more complex features like mocks and spies to enable you to write tests more easily.
Test components that use React.lazy + Suspense (youtube.com)
Dec 12, 2018
This was something I bumped into yesterday and thought I'd share how I test it.
How to test React and Apollo code with MockedProvider (youtube.com)
Nov 16, 2018
Learn how to test your React and Apollo code using MockedProvider.
Effective unit testing (youtube.com)
Nov 15, 2018
True units are awesome to test!
React Hooks & testing: Stepping through React code (youtube.com)
Nov 05, 2018
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
Test Driven Development: When it works and when it doesn't (youtube.com)
Oct 24, 2018
Testing code before its written has some great advantages, but it's not a perfect solution for every scenario. Let's explore some of these situations.
Testing Q&A: You ask, I answer. Part 2! (youtube.com)
Oct 23, 2018
You have more questions. View live and ask in the chat and I'll get through as many as I can!
Demystifying Testing (youtube.com)
Oct 18, 2018
I got some feedback that there’s confusion around what all of these names and terms are. Let's go over them!
Testing Q&A: You ask, I answer. (youtube.com)
Oct 17, 2018
This is wide open! For ~15 minutes I'm all ears! Let's talk testing!
Debug tests in create-react-app (youtube.com)
Sep 18, 2018
If you want to run your tests in create-react-app with the Chrome Debugger.
How Level Up Tests Apollo Queries (youtube.com)
Aug 31, 2018
In this video I show how I use addMockFunctionsToSchema & MockedProvider to have a powerful auto mocking of data using Apollo's render prop components.
What Is React Testing Library? (youtube.com)
Aug 29, 2018
In this video I talk about what is React Testing Library and why you might want to use it.
Testing React with Kent C. Dodds and Jack Franklin (youtube.com)
Aug 28, 2018
Test React components in complete isolation, in integration, or a mix of the two? Jack and Kent will discuss their differing opinions about Testing React applications and why they have come to their conclusions.
Create a "from-html-testing-library" using dom-testing-library (youtube.com)
Aug 20, 2018
There's an interesting new library called "from-html". Let's see what it'd be like to create a from-html-testing-library :)
Debug Jest Tests (youtube.com)
Aug 09, 2018
Sometimes it's just really nice to step through your code line-by-line. Here we'll cover how you can run your jest tests in Chrome's DevTools using node --inspect-brk.
Test React Portals (youtube.com)
Aug 07, 2018
How to Test React components that use React.createPortals
How to test Redux (youtube.com)
Jul 18, 2018
Do you test actions, reducers, selectors, and components in isolation as unit tests? Or do you test the connected components with the actual store wired up as integration tests? Here are my thoughts.
Component Unit Testing (and mocking) with react-testing-library (youtube.com)
Jun 22, 2018
Lots of people make the assumption that react-testing-library is good for React component integration testing, but not very useful for unit testing because it (intentionally) doesn't support shallow rendering. Let's see how you can do unit testing with react-testing-library
render React Components with react-testing-library (youtube.com)
Jun 19, 2018
Now there's only one way to do it, but it can be customized to suite your needs.
Test Driven Development with react-testing-library (youtube.com)
May 22, 2018
The react-testing-library is a very light-weight solution for testing React components.
Confident React (youtube.com)
May 10, 2018
Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.
Mocking Axios in Jest + Testing Async Functions (youtube.com)
Apr 13, 2018
In this video we'll look at a function that makes an HTTP request using the axios library to the Unsplash API and figure out how we can test it using a fake/mock version of axios to avoid performing real HTTP requests. We will be using Jest and some mocking functionality that it provides.
Testing Asynchronous Components with Mocks in Jest (youtube.com)
Apr 06, 2018
In this video we'll cover how to test React components that contain asynchronous code using mocks in Jest. We'll refactor our component to make it more easily testable and mockable, allowing the test to run without making an actual AJAX request.
Getting started with testing in React (youtube.com)
Mar 29, 2018
In this video we talk about how to test components in React within create-react-app, how to configure Jest with Enzyme and Sinon, how to test with snapshots, simulate clicks, and interact with DOM elements through Enzyme.
Testing Practices and Principles Workshop - Assert.js Conf (youtube.com)
Mar 22, 2018
This is a recording from my laptop at the Assert.js conference workshop.
Debugging a Create React App with VS Code (youtube.com)
Feb 05, 2018
In this post we’ll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app.
Write tests. Not too many. Mostly integration. Talk Practice at UtahJS (youtube.com)
Jan 05, 2018
Automated tests are an important part of raising your confidence when releasing software. They can speed you up or slow you down depending on how you write them and which form of testing you focus your test writing on. In this talk, we’ll cover the value of automated testing and where your efforts should be focused to strike the best balance of confidence and effort.
Testing API Contracts with Snapshots (youtube.com)
Dec 04, 2017
Dave Ceddia talks about using Jest's snapshot testing to verify your APIs are working as expected.
React and the Three Layers of Testing (youtube.com)
Oct 21, 2017
I will discuss our Three Layers of Testing (tm) we use when developing new features for one of our high traffic web applications at the ANWB. (1) Unit testing React & Redux Components, (2) Behavioural testing our interactive React Components and (3) Integration testing our entire application.
  • Bart Waardenburg
downshift: fixing regressions and more testing (youtube.com)
Aug 08, 2017
Got some great feedback and fixed some regressions, then added more tests.
downshift: getting to 100% code coverage! (youtube.com)
Aug 08, 2017
This is the last bit of testing I needed to do to get to 100% automated code coverage!
downshift: refactor, simplify, and test! (youtube.com)
Aug 08, 2017
I'm finally solidifying things and got a bunch of tests written.
downshift: testing utils (youtube.com)
Aug 08, 2017
In this one I write tests for pure functions as well as mocking out DOM APIs. It's pretty wild.
Refactoring React with Tests (youtube.com)
Jun 30, 2017
In this screencast we'll look at a React component that needs refactoring and splitting up, and refactor it whilst using and updating the tests to ensure all functionality is working.
JavaScript & React Testing with Jest (youtube.com)
Sep 08, 2016
Jest has become one of the coolest things in testing JavaScript and React. In recent months, the Jest team has made huge strides with the testing framework and it's a pretty amazing tool.
Jack Franklin: Testing React Applications (youtube.com)
May 24, 2016
We'll discuss the best tooling and approaches for building ReactJS applications in the NodeJS environment and in the browser using React TestUtils and other third party libraries that make it easy to test your components. We'll see how to build components in a way that makes them more maintainable, testable and easier to work with.

Courses & Video Series

Epic React (epicreact.dev)
Sep 29, 2020
Confidently ship well-architected production ready React apps like a pro.
Intermediate React, v2 (frontendmasters.com)
Jun 11, 2019
Learn to build scalable React applications using the latest tools and techniques available in the React ecosystem! This is a modular course where you can pick and choose the various pieces of the react ecosystem you want to learn.
Building Apps with Third Party Integrations (udemy.com)
Dec 27, 2018
How to make safe, secure and robust web apps that use third party APIs.
  • Mike Solomon
Intermediate React (frontendmasters.com)
Sep 14, 2018
Learn to build scalable React applications using the tools and techniques available in the React ecosystem
React Recipes (lynda.com)
Jul 16, 2018
This course provides tested, easy-to-follow instructions to solve the most common challenges that React developers face every day
  • Diego Muracciole
Test-driven Development Using React (pluralsight.com)
Jun 07, 2018
Test-driven Development (TDD) and React work together to create clean, reliable code. This course will teach you the fundamentals of both while giving you essential hands-on experience so that you can quickly implement both in your projects.
  • Chris Minnick
Advanced React and Redux (udemy.com)
May 30, 2018
Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment.
  • Stephen Grider
Testing React Applications, v2 (frontendmasters.com)
May 13, 2018
Learn to catch errors before they reach the end user with automated tests!
Testing React Applications with Jest (pluralsight.com)
May 10, 2018
This course will teach you basic and intermediate Jest testing techniques, including running tests, snapshot testing, testing React components, and module mocking.
Test React Components with Enzyme and Jest (egghead.io)
May 09, 2018
In this course we are going to work through properly setting up Enzyme with Jest to test rendered components.
  • Tyler Clark
Testing React with Enzyme and Jest (javascriptplayground.com)
Feb 12, 2018
A video series to enable you to test React components thoroughly, refactor with confidence and abstract logic out of components
The Complete React Web Developer Course (with Redux) (udemy.com)
Sep 07, 2017
Learn how to build and launch React web applications using React v16, Redux, Webpack, React-Router v4, and more
  • Andrew Mead
React: Testing and Debugging (lynda.com)
Jul 05, 2017
Learn how to test, debug, and optimize your React code with tools like Jest, Chrome, ESLint, and flow.
Testing JavaScript Applications (feat. React and Redux) (frontendmasters.com)
Jun 20, 2017
Create automated testing so you can be sure you’re maintaining the highest quality JavaScript applications possible!

Podcast Episodes

Testing Libraries with Michał Pierzchała (devchat.tv)
Jul 02, 2019
Michał explains why his team built the library and the problems they were experiencing with Enzyme. Enzyme and the React Native Testing Library are compared and the pro’s and con’s of using each is considered.
  • Charles Max Wood
  • Michał Pierzchała
React Native Testing feat. Josh Justice of Big Nerd Ranch (devchat.tv)
Feb 21, 2019
In today’s episode of the React Native Radio podcast, the panel speaks with Josh Justice of Big Nerd Ranch. The discussion covers several main points on test such as, End to End Testing, Unit Testing, and Test Driven Development.
React Testing Discussion & React Cosmos feat. Ovidiu Chereches (devchat.tv)
Mar 22, 2018
In today’s show, the React Native Radio Host, Nader Dabit and Spencer Carli speak with Ovidiu Chereches, about Testing React and React Native applications. Ovidiu shares his journey into working as a full stack developer and working in the community as an experienced developer. Ovidiu shares a general view on testing and sharing information on projects (React Cosmos) that helped him on manual testing and much more.

Libraries

detox (github.com)4274
v14.0.1
Aug 08, 2019
Gray Box End-to-End Testing and Automation Framework for Mobile Apps
  • Rotem Mizrachi-Meidan
  • Leo Natan
  • Wix
cypress (cypress.io)10778
v3.4.1
Jul 30, 2019
Fast, easy and reliable testing for anything that runs in a browser
  • Brian Mann
  • Chris Breiding
  • Gleb Bahmutov
  • Jennifer Shehane
react-native-testing-library (github.com)593
v1.11.1
Jul 17, 2019
Simple React Native testing utilities helping you write better tests with less effort
enzyme (airbnb.io)16503
v3.10.0
Jun 04, 2019
JavaScript Testing utilities for React
  • Jordan Harband
  • Leland Richardson
  • Airbnb
react-testing-library (github.com)6108
v8.0.1
May 31, 2019
🐐 Simple and complete React DOM testing utilities that encourage good testing practices
dom-testing-library (npm.im)1070
v5.0.0
May 30, 2019
Simple and complete DOM testing utilities that encourage good testing practices.
jest (jestjs.io)24375
v24.8.0
May 05, 2019
Delightful JavaScript Testing
  • Christoph Nakazawa
  • Simen Bekkhus
  • Aaron Abramov
  • Facebook