In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test-utils package) called "Shallow Rendering". This lets us render our React component one level deep - without a DOM - so that we can write tests fo…

When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the chil…

The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In this lesson, we will examine the rendered output of props, specifically the className prop. We will then use the ES2015 String.includes() method to c…

When writing React component tests, it can be hard to decipher the error diffs of broken tests, since they are just the final objects that React uses under the hood. There are some nice libraries that let you extend your assertion library to show JSX…

如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时,我都会用Jest的 Enzyme来渲染一个组件. 当然,我绝对滥用快照测试功能. 那么,至少我写了一个测试吧? 您可能听说过编写单元和集成测试会提高您编写的软件的质量. 另一方面,不好的测试会产生错误的信心. 最近,我通过与Kent C. Dodds的workshop.me参加了一个研讨会,他在那…

React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/zh-Hans/ https://jestjs.io/docs/zh-Hans/tutorial-react $ yarn add -D react-test-renderer $ yarn add -D jest babel-jest @babel/preset-env @babel/preset…

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rend…

Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className prop element tree output based on conditional input. // LikeCounter.js import React from 'react'; impo…

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some Reac…

Here we want to test a toggle button component, when the button was click, state should change, style should change also. Toggle component: // see this live: https://codesandbox.io/s/GvWpGjKQ import React, {Component} from 'react' import PropTypes fr…