详解如何在项目中使用jest测试react native组件


Posted in Javascript onFebruary 09, 2018

目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是:Painless JavaScript Testing。是Facebook用于测试服务和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。这时就配置完成了。

快照测试

写一个组件

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。这时终端将会抛出错误,并指出了错误位置

详解如何在项目中使用jest测试react native组件

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

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

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js中eval详解
Mar 30 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 #Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 #Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 #Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 #Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 #Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
You might like
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
几道PHP面试题
2013/04/14 面试题
优秀教师工作感言
2014/02/16 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
创先争优承诺书
2015/01/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
Python django中如何使用restful框架
2021/06/23 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL