>

你需要了解的前端测试,详解如何在项目中使用

- 编辑:至尊游戏网站 -

你需要了解的前端测试,详解如何在项目中使用

你需要了解的前端测试“金字塔”

2017/11/24 · JavaScript · 测试

原文出处: oschina   

图片 1

如果您正在测试前端应用程序,则应该了解前端测试金字塔。

在本文中,我们将看到前端测试金字塔是什么,以及如何使用它来创建全面的测试套件。

前端测试金字塔

前端测试金字塔是一个前端测试套件应该如何构建的结构化表示。

理想的测试套件由单元测试,一些快照测试和一些端到端(e2e)测试组成。
图片 2

这是测试金字塔的改进版本,特定于测试前端应用程序。

在这篇文章中,我们将看到每个测试类型的样子。 为此,我们将为示例应用程序创建一个测试套件。

应用

要详细了解前端测试金字塔,我们来看看如何测试一个 Web 应用。

该应用是一个简单的 modal 应用。 点击一个按钮打开一个 modal ,点击 modal 上的 OK 按钮关闭 modal。

图片 3

我们将从基于组件的框架构建应用。 别担心细节,我们会保持这个(详细)的级别。

该应用由三个组件组成 – 一个 Button 组件,一个 Modal 组件和一个 App 组件。

我们要写的第一个测试是单元测试。 在前端测试金字塔中,大部分测试都是单元测试。

目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:。我们可以看到Jest官网宣称的是:Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。

单元测试

单元测试测试的是代码库的单元。

它们直接调用函数或单元,并确保返回正确的结果。

在我们的应用中,我们的组件是单元。所以我们将为 Button 和 Modal 编写单元测试。没有必要为我们的应用组件编写测试,因为它没有任何逻辑。

单元测试会浅渲染组件,并断言当我们与它们交互时,它们的行为是正确的。

浅渲染意味着我们渲染组件一层深度。这样我们可以确保只测试组件,单元,而不是几个级别的子组件。

在我们的测试中,我们将触发组件上的操作,并检查组件的行为是否与预期一致。

我们不用盯着代码。但是我们的组件规格会如下所示:

  • 当 displayModal 为 true 时,Modal 有类是活跃的
  • 当 displayModal 为 false 时,Modal 没有类是活跃的
  • 当成功按钮被点击时,Modal 调用 toggleModal
  • 单击删除按钮时,Modal 会调用 toggleModal
  • 当 button 被点击时,button 调用 toggleModal

我们的测试将浅渲染组件,然后检查每一项规格的工作。

单元测试应该占据我们的测试套件的绝大部分有以下几个原因:

所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成。单元测试是软件测试的基础测试。Jest主要有以下特点:

单元测试很快

几百个单元测试套件能在几秒钟内运行。

这使得单元测试对开发很有用。 当重构代码时,我们可以更改代码,并在没有中断组件的情况下运行单元测试来检查更改。 我们会在几秒钟之内知道我们是否破坏了代码,因为其中一个测试会失败。

  1. 适应性:Jest是模块化、可扩展和可配置的。
  2. 沙箱和快速:Jest虚拟化了JavaScript的环境,能模拟浏览器,并且并行执行
  3. 快照测试:Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新的用户体验。
  4. 支持异步代码测试:支持promises和async/await
  5. 自动生成静态分析结果:不仅显示测试用例执行结果,也显示语句、分支、函数等覆盖率。

单元测试是细颗粒的。

换句话说,他们是非常具体的。

如果一个单元测试失败了,那么这个测试会告诉我们它是如何以及为什么失败的。

单元测试能很好地检查我们的应用程序工作的细节。 它们是开发时最好的工具,特别是如果你遵循测试驱动的开发。

但是它们无法测试一切。

为了确保我们呈现正确的样式,我们还需要使用快照测试。

为什么要使用单元测试工具

快照测试

快照测试是测试你的渲染组件的图片,并将其与组件的以前的图片进行比较。

用 JavaScript 编写快照测试的最好方法是使用 Jest 。

Jest 不是拍摄渲染组件的图片,而是渲染组件标记的快照。 这使得 Jest 快照测试比传统快照测试快得多。

要在 Jest 中注册快照测试,需要添加如下代码:

const renderedMarkup = renderToString(ModalComponent) expect(renderedMarkup).toMatchSnapshot()

1
2
const renderedMarkup = renderToString(ModalComponent)
expect(renderedMarkup).toMatchSnapshot()

一旦你注册一个快照,Jest 将顾及其它的一切。 每次运行单元测试时,都会重新生成一个快照,并将其与之前的快照进行比较。

如果代码改变,Jest 会抛出一个错误,并警告标记已经改变。 然后开发者可以手动检查没有类被误删的情况。

在下面的测试中,有人从<footer>中删除了 modal-card-foot 类。

图片 4

快照测试是一种检查组件样式或标记的方法。

如果快照测试通过,我们知道代码更改不会影响组件的显示。

如果测试失败,那么我们知道确实影响了组件的渲染,并可以手动检查样式是否正确。

每个组件至少应有一次快照测试。 一个典型的快照测试呈现组件的状态,以检查它正确呈现。

现在我们已经有了单元测试和快照测试,是时候看看端到端(e2e)测试。

我们在开发过程中,不使用测试工具依然可以自己写代码进行单元测试,但是我们的代码存在着相互调用关系,在测试过程中我们又希望使单元相对独立而又能正常运行,就需要我们对被测函数的依赖函数和环境进行mock,并且在测试数据输入、测试执行和测试结果检查方面存在很多相似性,测试工具正是为我们在这些方面提供了方便。

端到端测试

端到端(e2e)测试是高层测试。

它们执行与我们手动测试应用程序时相同的操作。

在我们的应用程序中,我们有一个用户(操作)旅程。当用户点击按钮时,模式将打开,当他们点击模式中的按钮时,模式将关闭。

我们可以编写一个贯穿这一旅程的端到端测试。测试将打开浏览器,导航到网页,并通过每个操作来确保应用程序正常运行。

这些测试将告诉我们,我们的单元正确地协同工作。它使我们高度自信,该应用程序的主要功能是可以正常工作的。

对 JavaScript 应用程序来说有几种方法可以编写端到端测试。像 test cafe 这样的程序会记录您在浏览器中执行操作并将其作为测试源重播。

还有类似 nightwatch 的项目,可让你用 JavaScript 编写测试项目。我会推荐使用类似 nightwatch 的库。拿起来直接用很容易,该测试运行速度比记录的测试更快。

也就是说,night1qtch 的测试还是比较慢的。一套200个单元测试需要花费几分钟的时间,一套200个端到端测试仅需要几分钟时间来运行。

端到端测试的另一个问题是难以调试。当测试失败时,很难找出失败的原因,因为测试涵盖了太多功能。

准备阶段

结语

要有效地测试基于前端组件的 Web 应用程序,你需要三种类型的测试:单元测试,快照测试和 e2e 测试。

你应该对每个组件进行多个单元测试,对每个组件进行一次或两次快照测试,以及测试链接在一起的多个组件的一次或两次端到端测试。

整体单元测试将涵盖大部分测试,你将有一些快照测试和一些 e2e 测试。

如果你遵循前端测试金字塔,你就可以使用杀手级测试套件创建可维护的 Web 应用程序。

你可以在 GitHub 上看到应用程序的快照测试、单元测试和端到端测试的示例源码库。

1 赞 收藏 评论

图片 5

需要一个rn项目,这里演示的是我个人的项目ReactNative-ReduxSaga-TODO

安装jest

如果你是用react-native init命令行创建的rn项目,并且你的rn版本在0.38以上,则无需安装了。不太清楚的话就看一下

package.json文件中是否包含以下代码:

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

如果没有就安装一下npm i jest --save-dev,并把上述代码添加到package.json文件的对应位置。

以上步骤完成后,简单运行npm run test测试一下jest是否配置成功。但我们没有写测试用例,终端会打印no tests found。这时就配置完成了。

快照测试

写一个组件

import React from 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: '#ddd', height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

在项目根目录下找到__test__文件夹,现在,让我们使用React的测试渲染器和Jest的快照功能来与组件进行交互,并捕获呈现的输出并创建一个快照文件。

// PostArea_test.js
import 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

然后在终端运行npm run test或jest。将会输出:

PASS  __tests__PostArea_test.js (6.657s)
  √ renders correctly (5553ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written in 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 added, 1 total
Time:        8.198s
Ran all test suites.

同时,在test文件夹下会输出一个文件,即为生成的快照。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

修改源文件

在下一次运行测试的时候,呈现的输出将与之前创建的快照进行比较。快照应该和代码一起提交。当快照测试失败的时候,就需要检查是否有意或无意的更改。如果是和预期中的变化一样,调用jest -u来覆盖当前的快照。

我们来更改一下原来的代码:把第二行<Text>的字号改为14.

<Text style={{ fontSize: 14, color }}>{text}</Text>

这时,我们再运行jest。这时终端将会抛出错误,并指出了错误位置

图片 6

因为这段代码是我们有意改的,这时运行jest -u,快照被覆盖。再执行jest则不会报错了~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 浅谈React组件之性能优化
  • React Native 图片查看组件的方法
  • React组件中的this的具体使用
  • React 组件转 Vue 组件的命令写法
  • 浅谈React中的元素、组件、实例和节点
  • 利用angular、react和vue实现相同的面试题组件
  • React组件refs的使用详解
  • 尝试自己动手用react来写一个分页组件(小结)
  • 浅谈react受控组件与非受控组件(小结)
  • 详解使用React进行组件库开发
  • 浅谈React中组件间抽象
  • React 高阶组件入门介绍
  • 编写React组件项目实践分析

本文由硬件数码发布,转载请注明来源:你需要了解的前端测试,详解如何在项目中使用