您必要通晓的前端测试,Android测试基础

您须求精晓的前端测试“金字塔”

2017/11/24 · JavaScript
· 测试

原稿出处:
oschina   

亚洲必赢官网 1

假设你正在测试前端应用程序,则应该精通前端测试金字塔。

在本文中,咱们将看到前端测试金字塔是何等,以及怎么着行使它来创设周到的测试套件。

前者测试金字塔

前者测试金字塔是二个前端测试套件应该怎么样打造的结构化表示。

非凡的测试套件由单元测试,一些快照测试和一部分端到端(e2e)测试组成。
亚洲必赢官网 2

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

在那篇小说中,我们将看到各类测试项目的样子。
为此,大家将为示范应用程序创建三个测试套件。

应用

要详细询问前端测试金字塔,大家来看望哪些测试五个 Web 应用。

您必要通晓的前端测试,Android测试基础。该使用是二个简约的 modal 应用。 点击1个按钮打开3个 modal ,点击 modal
上的 OK 按钮关闭 modal。

亚洲必赢官网 3

小编们将从基于组件的框架营造利用。
别担心细节,大家会维持那几个(详细)的级别。

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

咱俩要写的第③个测试是单元测试。
在前端测试金字塔中,超过一半测试都以单元测试。

时下Javascript的测试工具很多,可是本着React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:。大家得以看看Jest官网宣称的是:Painless
JavaScript
Testing。是非死不可用于测试服务和React应用程序的JavaScript单元测试框架。

详解如何在品种中采取jest测试react native组件,jestreact

眼下Javascript的测试工具很多,不过针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:
JavaScript
Testing。是非死不可用于测试服务和React应用程序的JavaScript单元测试框架。

所谓单元测试约等于对每种单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和购并。单元测试是软件测试的底蕴测试。Jest首要有以下特征:

  1. 适应性:Jest是模块化、可扩展和可安顿的。
  2. 沙箱和火速:Jest虚拟化了JavaScript的条件,能模拟浏览器,并且并行执行
  3. 快照测试:Jest可以对React
    树举行快照或其他体系化数值神速编写测试,提供火速更新的用户体验。
  4. 支撑异步代码测试:接济promises和async/await
  5. 自动生成静态分析结果:不仅体现测试用例执行结果,也突显语句、分支、函数等覆盖率。

为啥要采纳单元测试工具

咱俩在开发进度中,不利用测试工具依然得以友善写代码进行单元测试,不过我们的代码存在着互相调用关系,在测试进程中大家又希望使单元相对独立而又能健康运维,就需求大家对被测函数的器重函数和环境展开mock,并且在测试数据输入、测试执行和测试结果检查方面存在不少相似性,测试工具正是为我们在这一个地点提供了便宜。

准备阶段

亟需一个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。那时就配备已毕了。

快照测试

写3个零部件

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的快照作用来与组件进行相互,并抓获突显的输出并创办2个快照文件。

// 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文件夹下会输出3个文本,即为生成的快照。

// 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来掩盖当前的快照。

咱俩来更改一下本来的代码:把第3行<Text>的字号改为14.

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

那儿,我们再运维jest。那时终端将会抛出荒谬,并指出了错误地点

亚洲必赢官网 4

因为那段代码是大家有意改的,那时运营jest
-u,快照被遮住。再实践jest则不会报错了~

以上就是本文的全部内容,希望对大家的就学抱有支持,也期望大家多多资助帮客之家。

native组件,jestreact
近期Javascript的测试工具很多,不过本着React的测试策略,脸书推出的ReactJs标配测试…

原文地址:

单元测试

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

它们平素调用函数或单元,并确保重回正确的结果。

在大家的使用中,大家的零件是单元。所以我们将为 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. 自动生成静态分析结果:不仅显得测试用例执行结果,也显得语句、分支、函数等覆盖率。

选取迭代支付工作流

当你的应用程序举行扩充时,你或然会发现必要从服务器获取数据,与设施的传感器进行互动,可以还必要拜访当地存储,或显示复杂的用户界面。应用程序的多种性需求1个到家的测试策略。

在迭代费用三个新的表征时,首先需要编制一个新的测试,只怕在存活单元测试中添加新的测试例和断言。测试一方始是败退的,因为那些新特性还从未完毕。

在设计新功用时,考虑单元测试的规划很主要。对于各个功用单元编写壹个对应的单元测试。你的单元测试应该尽可多的隐含到独具只怕与单元的竞相,包蕴专业的竞相、无效的输入、以及财富不可用的情状。

亚洲必赢官网 5

图:测试驱动开发:多少个周期与迭代过程。

总体的工作流,如上图,包括一多元嵌套的循环迭代。其中长、慢、UI驱动的合并测试,你可以用更短、更快的单元测试驱动开发周期来成功。这一名目繁多循环一向频频到您的应用程序知足各种用例截止。

单元测试是细颗粒的。

换句话说,他们是可怜实际的。

如果三个单元测试退步了,那么那么些测试会告知大家它是怎么以及为何失利的。

单元测试能很好地反省我们的应用程序工作的细节。
它们是付出时最好的工具,特别是假使你依照测试驱动的开发。

唯独它们不可以测试一切。

为了确保我们展现正确的体裁,大家还索要动用快照测试。

为啥要使用单元测试工具

测试金字塔

亚洲必赢官网 6

图:测试金字塔,突显相应在应用程序的测试套件中蕴藏的三个测试项目。

测试金字塔,如上图所示,表明您的应用程序应该怎样包罗两种档次的测试:小测试、中测试和大测试。

  • 小测试是你可以在与生育系统隔离的景况下运作的单元测试。它们经常会mock全体首要组件,并在PC上连忙运维。

  • 中测试是在乎小测试和大测试时期的合并测试。它们集成了多少个零件,并在Android模拟器或诚实设备上运转。

  • 大测试是透过形成UI工作流来运作的合龙和UI测试。它们确保重点的巅峰用户义务在Android模拟器或真实设备上健康干活。

注:那里测试金字塔的概念是谷歌(Google)针对Android应用的测试划分。不同门类的采取,通过测试金字塔模型进行划层级的分开,以及每层的概念会有所不一样。

固然小测试的速度飞快,而且主要卓绝,可以让您急忙处理战败,但它们是低保真和单独的,让您很难相信经过测试的应用是可以符合规律运维的,所以须求经过大测试进行补足。

鉴于逐个测试项目标例外特点,你的测试工作相应包涵测试金字塔的每一层测试。尽管每一个门类的测试比例大概因应用程序的行使状态而有所差别,但大家一般指出以下分类:7/10的小测试、1/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 类。

亚洲必赢官网 7

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

比方快照测试通过,我们了解代码更改不会影响组件的展示。

只要测试退步,那么大家知晓确实影响了组件的渲染,并可以手动检查体制是不是科学。

各类组件至少应当三遍快照测试。
二个超人的快照测试显示组件的状态,以检讨它科学显示。

当今大家早就有了单元测试和快照测试,是时候看看端到端(e2e)测试。

我们在付出进度中,不应用测试工具如故得以协调写代码举行单元测试,可是大家的代码存在着相互调用关系,在测试进程中大家又愿意使单元相对独立而又能健康运营,就需求大家对被测函数的重视函数和条件开展mock,并且在测试数据输入、测试执行和测试结果检查方面存在诸多相似性,测试工具正是为我们在那个地点提供了方便。

小测试

在抬高和更改应用程序的功力时,通过创建和编辑单元测试来保管这一个功用依据预期的来运维。尽管可以在Android模拟器或真实设备中运作单元测试,不过在支付环境中运维单元测试寻常会更快、更易于,依据需求添加Stub或mock方法已毕与Android系统举行相互。

端到端测试

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

它们执行与大家手动测试应用程序时一致的操作。

在大家的应用程序中,大家有3个用户(操作)旅程。当用户点击按钮时,方式将开辟,当他们点击情势中的按钮时,情势将关门。

我们得以编制多少个贯穿这一旅程的端到端测试。测试将打开浏览器,导航到网页,并通过种种操作来保障应用程序平常运作。

这么些测试将报告大家,大家的单元正确地协同工作。它使大家莫大自信,该应用程序的紧要成效是可以平常办事的。

对 JavaScript 应用程序来说有二种办法可以编写端到端测试。像 test cafe
那样的次第会记录您在浏览器中推行操作并将其看作测试源回看。

还有类似 nightwatch 的门类,可让你用 JavaScript
编写测试项目。作者会推荐使用类似 nightwatch
的库。拿起来一向用很不难,该测试运营速度比记录的测试更快。

约等于说,night1qtch
的测试如故相比慢的。一套200个单元测试必要费用几分钟的年月,一套200个端到端测试仅须要几分钟时间来运作。

端到端测试的另3个题材是麻烦调试。当测试战败时,很难找出挫败的缘由,因为测试涵盖了太多职能。

预备阶段

Robolectric

即使你的应用程序的测试环境须求单元测试与Android框架举行更宽泛的互动,那么你可以运用罗布olectric。此工具实施测试本身、基于Java
逻辑Stub来效仿Android框架,由社区来保证这个Stub。

罗布olectric测试大概完全符合Android设备上运维测试的完全保真度,但仍比设备测试运营得更快。它还协理Android平台的以下多少个方面:

  • Android 4.1(API等级16)及更高版本
  • Android Gradle插件2.4及更高版本
  • 组件生命周期
  • 事件循环
  • 全数财富

罗布olectric有协调的一套测试API,并引入了有的新定义。有关将罗布olectric的API与应用程序的测试相结合的更加多音信,请参见该工具的
用户指南

结语

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

您应有对每种组件举行多少个单元测试,对各类组件进行三次或五遍快照测试,以及测试链接在联名的七个零部件的一次或一次端到端测试。

完整单元测试将包涵大多数测试,你将有一部分快照测试和一部分 e2e 测试。

一经你依照前端测试金字塔,你就足以选择刀客级测试套件创立可爱抚的 Web
应用程序。

您可以在 GitHub 上寓目应用程序的快照测试、单元测试和端到端测试的言传身教源码库。

1 赞 收藏
评论

亚洲必赢官网 8

急需三个rn项目,那里演示的是自作者个人的花色ReactNative-ReduxSaga-TODO

Mock对象

你能够因而修改Android.jar版本来运营单元测试,从而来监督应用与之互相的Android框架元素。那一个JA兰德酷路泽文件不带有其他代码,所以你的应用程序调用Android框架默许会抛出十二分。
要测试与Android系统相互的代码成分,请使用像Mockito这样的框架来布局模拟目的。

安装jest

检测单元测试

您也足以在Andorid模拟器或真实设备上运转检测单元测试,而不关乎其他stub或mock框架。因为那种测试格局的执行时间分明比当地单元测试慢,所以最好仅在急需评估应用程序对现阶段设施硬件的行为时才注重此办法。

借使您是用react-native
init命令行创立的rn项目,并且你的rn版本在0.38之上,则无需安装了。不太领会的话就看一下

中测试

在付出条件中测试了应用程序的各样单元之后,应辨证在模拟器或设施上运营时组件的一颦一笑是或不是正确。
中等测试允许你做到那有些的支付进程。
假若某个应用程序的零部件看重于物理硬件,则这一个测试对于开创和运营尤其关键。

中间测试你的应用程序怎样协调多个单元,但它们不测试完整的应用程序。中等测试的用例包罗劳动测试、集成测试以及mock外部看重性行为的UI测试。

常常情况下,最幸好Android模拟器或Firebase测试实验室等依据云服务上测试应用程序,而不是在真实设备上测试应用程序,因为您可以更轻松,火速地测试各样显示器大小和硬件配备结合。

package.json文件中是或不是带有以下代码:

大测试

即便测试应用程序中的每一层的作用是不行紧要的,可是测试涉嫌整个堆栈的广泛工作流和用例(从UI到事情逻辑到数据层)同样首要。

如果您的应用程序丰硕小,则大概只须求一套大型测试来评估你的应用程序。
否则,你应当按照公司全体权,垂直功能或用户目的来划分你的大型测试套件。

对于你所编写的每二个特大型的基于工作流程的测试,你还应当编写中测试来检查工作流中隐含的各种UI组件的功用。通过那种办法,就算在最初的多少个步骤中,相应的大型测试也会失利了,你的测试套件依然可以在主要用户操作的每一步中继续识别潜在的题材。

AndroidJUnitRunner类定义了3个基于JUnit框架的测试运维器,它同意你在Android设备上运转JUnit
3或JUnit
4样式的测试类。便于将测试包和应用程序加载到真实设备或Android模拟器上,运转测试并告知结果。

AndroidJUnitRunner类辅助来自Android测试帮忙库的以下工具和框架:

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

JUnit4 Rules

测试表明语言包蕴用于管理的根本应用程序组件的生命周期涉及你的测试代码,如Activitie
和瑟维斯。学习怎么着定义那一个规则,看到
JUnit4平整指南

若是没有就设置一下npm i jest
–save-dev,并把上述代码添加到package.json文件的应和地方。

Espresso

Espresso同步异步职责,同时自动执行以下应用内相互:

在View对象上实施操作。

  • 完了跨越应用程序进度边界的行事流程。仅在Android
    8.0(API级别26)及更高版本上可用。
  • 评估具有扶持功用需要的用户怎么样利用你的利用。
  • 搜寻并激活RecyclerView和AdapterView对象中的项目。
  • 证实传出意图的情况。
  • 在WebView对象中证实DOM的社团。
  • 盯住你的应用程序中长期运作的后台操作。

要详细询问这个互动以及如何在应用程序的测试中使用它们,请参阅
Espresso指南。

如上步骤完毕后,不难运营npm run
test测试一下jest是不是安插成功。但大家从不写测试用例,终端会打印no tests
found。那时就安排落成了。

UI Automator

我们提议仅当您的应用程序必须与系统进行相互的操作时,才使用UI
Automator来测试你的应用程序。 由于UI
Automator与系统拔取程序UI交互,由此你需求在每便系统更新后再也运维并修复UI
Automator测试。 此类更新包罗Android平台版本升级和GooglePlay服务的新本子。
作为利用UI
Automator的替代方案,大家指出添加封闭测试或将大型测试分为一多重小型和中等测试。越发是,两次强调于测试二个应用程序间通讯,例如将音讯发送到其他应用程序,并对企图结果进行响应。Espresso-Intents工具得以扶持您编写这个较小的测试。

UI
Automator框架在您的应用程序的种类应用程序内举办交互,例如检查当前显示UI的层次结构、截取屏幕截图以及分析设备的脚下状态。有关UI
Automator怎么样检查正在测试的应用程序的越来越多详细新闻,请参阅 UI
Automator指南

快照测试

Android Test Orchestrator

Android Test
Orchestrator在其协调的Instrumentation沙箱中运转各种UI测试,通过减弱测试时期的共享状态并在各样测试的基本功上隔离应用程序崩溃来拉长测试套件的可信性。

写一个零件

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的快照功能来与组件举办交互,并抓获突显的输出并制造2个快照文件。

// 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文件夹下会输出3个文本,即为生成的快照。

// 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。那时终端将会抛出荒唐,并提议了不当地点

亚洲必赢官网 9

因为这段代码是大家有意识改的,那时运营jest
-u,快照被覆盖。再实施jest则不会报错了~

上述就是本文的全体内容,希望对大家的就学抱有支持,也冀望我们多多支持脚本之家。

您只怕感兴趣的稿子:

  • 浅谈React组件之性质优化
  • React Native
    图片查看组件的措施
  • React组件中的this的现实应用
  • React 组件转 Vue
    组件的吩咐写法
  • 浅谈React中的成分、组件、实例和节点
  • 采用angular、react和vue达成均等的面试题组件
  • React组件refs的应用详解
  • 品尝自个儿出手用react来写三个分页组件(小结)
  • 浅谈react受控组件与非受控组件(小结)
  • 详解使用React进行零部件库开发
  • 浅谈React中组件间抽象
  • React 高阶组件入门介绍
  • 编制React组件项目实施分析
网站地图xml地图