30天入坑React ---------------day22 Introduction to Testing

最新推荐文章于 2025-04-01 18:45:29 发布

小李科技

最新推荐文章于 2025-04-01 18:45:29 发布

阅读量221

点赞数

分类专栏： React React入门30天

React 同时被 2 个专栏收录

68 篇文章

订阅专栏

React入门30天

30 篇文章

订阅专栏

本文为React初学者提供了一套全面的测试指南，涵盖了单元测试、功能测试和集成测试的概念及实践。通过自动化测试流程，确保React应用程序的稳定性和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

This post is part of the series 30 Days of React.

In this series, we're starting from the very basics and walk through everything you need to know to get started with React. If you've ever wanted to learn React, this is the place to start!

DOWNLOAD THE FREE PDF

30 Days of React Mini-Ebook

Introduction to Testing

Edit this page on Github

Test suites are an upfront investment that pay dividends over the lifetime of a system. Today we'll introduce the topic of testing and discuss the different types of tests we can write.

Okay, close your eyes for a second... wait, don't... it's hard to read with your eyes closed, but imagine for a moment your application is getting close to your first deployment.

It's getting close and it gets tiring to constantly run through the features in your browser... and so inefficient.

There must be a better way...

Testing

When we talk about testing, we're talking about the process of automating the process of setting up and measuring our assumptions against assertions of functionality about our application.

When we talk about front-end testing in React, we're referring to the process of making assertions about what our React app renders and how it responds to user interaction.

We'll discuss three different software testing paradigms: unit testing, functional testing, and integration testing.

Unit tests

Unit testing refers to testing individual pieces (or units, hence the name) of our our code so we can be confident these specific pieces of code work as we expect.

For example, we have a few reducers already in our application. These reducers comprise a single function that we can make assertions on under different scenarios.

In React, Unit tests typically do not require a browser, can run incredibly quickly (no writing to the DOM required), and the assertions themselves are usually simple and terse.

We'll mostly concentrate on answering the question: with a given set of inputs (state and props), does the output match our expectations of what should be in the virtual dom. In this case, we're testing the rendering output.

Functional testing

With functional testing, we're focused on testing the behavior of our component. For instance, if we have a navigation bar with a user login/logout button, we can test our expectations that:

Given a logged in user, the navbar renders a button with the text Logout
Given no logged in user, the navbar renders a button with the text Login

Functional tests usually run in isolation (i.e. testing the component functionality without the rest of the application).

Integration testing

Finally, the last type of testing we'll look at is integration testing. This type of testing tests the entire service of our application and attempts to replicate the experience an end-user would experience when using our application.

On the order of speed and efficiency, integration testing is incredibly slow as it needs to run expectations against a live, running browser, where as unit and functional tests can run quite a bit faster (especially in React where the functional test is testing against the in-memory virtual dom rather than an actual browser render).

When testing React components, we will test both our expectations of what is contained in the virtual dom as well as what is reflected in the actual dom.

The tools

We're going to use a testing library called called jasmine to provide a readable testing language and assertions.

As far as test running, there is a general debate around which test runner is the easiest/most efficient to work with, largely between mocha and jest.

We're going to use Jest in our adventure in testing with React as it's the official(take this with a grain of salt) test runner. Most of the code we'll be writing will be in Jasmine, so feel free to use mocha, if it's your test library of choice.

Finally, we'll use a library we cannot live without called Enzyme which puts the fun back in FUNctional testing. Enzyme provides some pretty nice React testing utility functions that make writing our assertions a cinch.

Tomorrow, we'll get our application set up with the testing tooling in place so that we can start testing our application and be confident it works as we expect. See you tomorrow!