Test in React

2022/03/23 (新增連結)

基本概念

• Writing UI tests in React applications without breaking a sweat

• React單元測試 (一) 初探基礎知識 (2017)

  • TDD、BDD、前端單元測試框架

  • jest

    • 每個describe下可以有多個test (或it)

    • 利用expect(Matcher)測試結果是否正確

import isItFriday from './friday';

describe('Today is or is not Friday',() => {

test('Sunday is "Nope"', () => {

expect(isItFriday('Sunday')==='Nope');

});

test('Fridat is "TGIF"', () => {

expect(isItFriday('Friday')==='TGIF');

});

});

• • enzyme

    • DOM testing

src/App.js

import React, { Component } from 'react';

//import logo from './logo.svg';

import './App.css';

import Calculator from './Calculator/Calculator';

class App extends Component {

render() {

return (

<div>

<h2>React Calculator</h2>

<Calculator />

</div>

);

}

}

export default App;

src/App.css

.App {

text-align: center;

}

.App-logo {

animation: App-logo-spin infinite 20s linear;

height: 40vmin;

pointer-events: none;

}

.App-header {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

}

.App-link {

color: #61dafb;

}

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

src/App.test.js，shallow是只有產生App，而mount則是產生及App所包含的元件。

import React from 'react';

import App from './App';

import {mount, shallow} from 'enzyme'

describe('Calculator component', () => {

it('renders Calculator', () => {

const component = shallow(

<App />

)

expect(component.exists('Calculator')).toBe(true)

})

})

describe('App: ', () => {

const wrapper = mount(<App/>);

it('It shows，"React Calculator"', () => {

expect(wrapper.text()==='React Calculator');

})

});

• Testing In React, Part 1: Types & Tools

  • Types of Testing in React

    • rendering component trees, and end-to-end testing

  • Tools for Testing in React

    • React Testing Library

      • React Testing Library is a replacement for the previously popular Enzyme library

    • Jest

    • Cypress

      • Unit testing React components in Cypress without CRA and react-scripts

• Testing In React, Part 2: React Testing Library

• Testing in React, Part 3: Jest & Jest-Dom

• Patterns For Testable React Components

  • Testing Component Actions

  • Components with complex state versions.

• Testing Overview

  • Rendering component trees

  • Running a complete app

  • Recommended Tools

    • Jest

    • React Testing Library

• Testing Recipes: Common testing patterns for React components.

• Testing Environments

  • Test runners

    • Jest is widely compatible with React projects, supporting features like mocked modules and timers, and jsdom support. If you use Create React App, Jest is already included out of the box with useful defaults.

  • Mocking a rendering surface

  • Mocking functions

  • Mocking modules

  • Mocking timers

  • End-to-end tests

• Testing React — an overview

  • Unit Testing Framework

  • Assertion Library

  • Different levels of testing

    • Unit, Integration, and End to End(E2E)

  • Static code analysis

  • Unit tests

  • Integration tests

  • End to end tests

• JavaScript and React unit tests basics

• Revisiting React Testing in 2019

  • Enzyme

  • ReactTestUtil

  • react-testing-library

  • Test Render

• I tested a React app with Jest, Enzyme, Testing Library and Cypress. Here are the differences.

• Write Your First React Integration Test : Writing user-centric tests with React-Testing-Library and Jest

• Testing Your Components in React: A walkthrough of test utilities, test renderer, and the React Testing Library

• Writing Effective Tests for Modern Web Apps

  • Mocking HTTP Requests the Right Way

  • Use a Single, Global Mock Object

  • Writing a Unit Test for the API module

  • Writing an Integration Test

• Using Inversion of Control to Write More Easily Testable React Components

• Tested React series

  • Tested React: Let’s build a Data Table

  • Tested React: Build and Test Modal using React features and DOM events

  • Tested React: Build and Test a Form using React Context

BDD

• React Behavior Driven Development (BDD)

  • Jest (Jest Cusumber)

  • Test Render

• Behavior-driven React development with Cucumber

TDD

• Test-Driven Development (TDD) in React Part 1 : This post explains how you can quickly setup your React TDD Application with Jest and Enzyme.

Unit Test

• Better unit tests for your front-end application

  • The core of the Testing Library is a “DOM testing library”. It means, when you write unit tests using this library, it will not care if the piece of code that you are unit testing is React or Angular component.

Jest

• Jest

• A Beginner’s Guide to Jest Testing

• Getting Starting with React Testing

• Testing your React apps like a boss with Jest

  • write tests, it’s a breeze to write tests and assert on specific conditions

  • manage our test suite, by running specific tests as well as specific test files by utilizing the pattern matching functionality

  • debug our tests, by augmenting VS Code we can gain the ability to set breakpoints in our tests and create a really nice debugging experience

  • snapshot mastery, learn how using snapshots can give you increased confidence that your components are still working after a change you made

  • leverage mocking, mocking dependencies can ensure you only test what you want to test and Jest has great defaults when it comes to mocking

  • coverage reports, we have come to expect a good coverage tool to be included in all good testing libraries. Jest is no different and it’s really easy to run coverage reports and quickly find what parts of your code that could benefit from some more testing

• Testing React Apps with Jest

• Testing components with Jest and React Testing Library

• The hidden power of Jest matchers

  • Match calls with function in arguments

  • Ignoring values, relative to current time

  • Partial match for complex objects

• How to correctly mock Moment.js/dates in Jest

• Mocking in Jest

• A quick introduction to test driven development with Jest

• Mocking API Requests with Jest

• How to write Epic Unit Tests with TypeScript, Jest, Redux and RxJS 6

• How to Get Started Writing Unit Tests for React With Jest and Enzyme

• Reducing App Testing Time Using Jest and CircleCI

• Testing your React App with Puppeteer and Jest

DOM Testing

react-testing-library

• Use React Testing Library to test component surface

  • React Testing Library is a different testing library in that it tests the surface of your component rather than the internals.

• Testing a Full-Stack React Application: Testing user behaviour with Jest and react-testing-library

• Declarative and Scalable Testing With React Testing Library

• Everything You Need to Get Started With Testing in React (with react-testing-library)

• React Enzyme vs. React Testing Library

  • An image is sometimes worth a thousand words. The React Testing Library made it to the top in no time. It has many advantages. It only requires one thing from new adopters: a change of mindset.

• Write Better Tests with React Testing Library

  • Embrace getByLabelText for more resilient and easier to debug tests

  • Understand the “wrapped in act” warning

  • Get better at debugging

Jest + Enzyme

• Jest | 經過測試，讓你的組件安全有把關 shallow render 篇 - feat.React, Enzyme

• How to set up Jest & Enzyme like a boss

• TDD your React components with Jest & Enzyme

• Using enzyme with Jest

• Testing React with Jest and Enzyme I

  • Mount, Shallow, Render

  • Testing

• Testing React with Jest and Enzyme II

  • Simulating events

  • Writing tests

• What and How to Test with Jest and Enzyme.

  • Define the correct order of components’ testing based on project structure

  • Find what to omit in test coverage (what not to test)

  • Identify the necessity of Snapshot Testing

  • Define what to test in the component and in which order

  • Provide detailed custom code examples

• Testing in React with Jest and Enzyme: An Introduction

• Test Driven Development in React with Jest and Enzyme

  • Snapshots: allowing you to compare render() output of components to an expected result.

  • Simulations: carry out tests that involve the events you would expect in the browser — click events, form inputs and function calls.

  • Mock functions: Test arguments and return values with empty mock functions, or carry out a range of implementations to test the expected result. Also, overwrite fragile module methods that rely on external data sources, or involve heavy processing that would slow down your tests.

  • Abstract-ability: keep logic isolated and tied into specific components, promoting re-usability, DRY and wide-ranging integration testing.

• Testing React Components with Jest and Enzyme- In Depth

• Components testing in React: what and how to test with Jest and Enzyme.

• Unit test api calls in React , Enzyme and Jest

• How to test your React · Redux application

  • Jest + Enzyme

• How To Test Your React Container Components

  • #1 — Unconnected Approach

  • #2 — Connected Approach

Others

• Setting Up Mocks for React Development, Storybook, and Testing : An introduction to the fetch-mock JavaScript library

• ReactTestUtils

  • ReactTestUtils makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing. Learn how to get started with Jest through the Jest website’s React Tutorial.

  • We recommend using React Testing Library which is designed to enable and encourage writing tests that use your components as the end users do.

  • Alternatively, Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output.

• nock

  • Nock it out of the park, HTTP mocking for React

• Reactron

  • Introducing Reactron

• Components

  • Unit Testing React Components

    • riteway/render-component

• Tested React

  • Tested React: Let’s build a Data Table

  • Tested React: Build and Test Modal using React features and DOM events

• Hooks

  • Writing Isolated Plain JS Unit Tests for React Custom Hooks

  • How to Test React Hooks (The Async Ones)

  • React 16: Testing Function Components With Hooks

• Best Practices for Client-Side Logging and Error Handling in React

• Getting Started with React Cosmos

  • React Cosmos is a library that provides a sandbox environment for developing and testing React components in Isolation.

• Accessibility

  • Make Your Web App Accessible With the Axe Accessibility Library