React Testing Checklist

By Medium - 2020-12-07

Description

Use it to make sure that your React components are tested thoroughly. All examples use the Jest and React Testing Library.

Summary

  • TLDR To make it easier to manage your tests organize them using the describe blocks.
  • You can plan the tests before writing them using the it.todo syntax.
  • It forces you to write the tests from the user perspective instead If your component’s state changes on some user action, for example, button click — click this button in your test using the fireEvent method from @testinglibrary/react and then check the expectation on component render value.
  • Create a describe block for every condition value in your layout.

 

Topics

  1. UX (0.32)
  2. Frontend (0.26)
  3. Management (0.09)

Similar Articles

A Thoughtful Way To Use React’s useRef() Hook

By Smashing Magazine - 2020-11-19

In a React component, useState and useReducer can cause your component to re-render each time there is a call to the update functions. In this article, you will find out how to use the useRef() hook t ...

React Component Tests for Humans

By CSS-Tricks - 2021-02-23

React component tests should be interesting, straightforward, and easy for a human to build and maintain. Yet, the current state of the testing library

Write Vue like you write React

By DEV Community - 2021-02-02

With the Vue 3 Composition API, you can write functional components. What happens if we write them with JSX templates? Are they similar to React functional components?. Tagged with react, vue, javascr ...

sudheerj/reactjs-interview-questions

By GitHub - 2021-01-12

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions

React Hooks Cheatsheet: The 7 Hooks You Need To Know

By freeCodeCamp.org - 2021-02-08

This new tutorial will show you everything you need to know about React Hooks from scratch. I've put this cheatsheet together to help you become knowledgeable and effective with React Hooks as quickly ...