【前端单元测试入门05】react的单元测试之jest
jest
jest是facebook推出的一款测试框架,集成了前面所讲的Mocha和chai,jsdom,sinon等功能。
安装与配置
npm install --save-dev jest
npm install -g jest
运行命令jest后会自动运行项目下所有.test.js和.spec.js这种格式的文件。
涉及到运用ES或react的,要与babel相结合,加上.babelrc文件即可,老玩法了。
jest的配置默认只需要在package.json中配置即可,当然也可以用独立的配置文件。
我们这里直接将jest的运行范围限定在test文件夹下,而不是全部,所以在package.json中加入如下配置:
"jest": {
"testRegex": "/test/.*.test.jsx?$"
}
注意到这里的匹配规则是正则表达式
基本用法
和之前介绍的mocha和chai的功能很像,甚至可以兼容部分mocha和chai的语法。
可以这么写
import React from 'react'
import { shallow } from 'enzyme'
import CommentItem from './commentItem'
describe('测试评论列表项组件', () => {
// 这是mocha的玩法,jest可以直接兼容
it('测试评论内容小于等于200时不出现展开收起按钮', () => {
const propsData = {
date: '2018-03-04 10:10:11',
name: '匿名人',
content: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题'
}
const item = shallow(<CommentItem {...propsData} />)
//看到这里的断言了吗,实际上和chai的expect是很像的
expect(item.find('.btn-expand').length).toBe(0);
})
// 这是jest的玩法,推荐用这种
test('两数相加结果为两个数字的和', () => {
expect(3).toBe(3);
});
}
jest与eslint检测
如果看了上面的代码会发现我没有引用任何类似于
import * from 'jest'
的代码,而那个expect是没有定义的。
这段代码直接运行jest命令没有任何问题,但是eslint会检测出错,对于这种情况,我们可以再eslint配置文件.eslintrc中加入以下代码:
"env": {
"jest": true
},
jest的断言
前面的章节介绍的断言库chai,jest有自己的断言玩法。
除了前面的代码中已经写到的
expect(x).toBe(y)//判断相等,使用Object.is实现
还有常用的
expect({a:1}).toBe({a:1})//判断两个对象是否相等
expect(1).not.toBe(2)//判断不等
expect(n).toBeNull();//判断是否为null
expect(n).toBeUndefined();//判断是否为undefined
expect(n).toBeDefined();//判断结果与toBeUndefined相反
expect(n).toBeTruthy();//判断结果为true
expect(n).toBeFalsy();//判断结果为false
expect(value).toBeGreaterThan(3);//大于3
expect(value).toBeGreaterThanOrEqual(3.5);//大于等于3.5
expect(value).toBeLessThan(5);//小于5
expect(value).toBeLessThanOrEqual(4.5);//小于等于4.5
expect(value).toBeCloseTo(0.3); // 浮点数判断相等
expect('Christoph').toMatch(/stop/);//正则表达式判断
expect(['one','two']).toContain('one');//不解释
function compileAndroidCode() {
throw new ConfigError('you are using the wrong JDK');
}
test('compiling android goes as expected', () => {
expect(compileAndroidCode).toThrow();
expect(compileAndroidCode).toThrow(ConfigError);//判断抛出异常
})
jest的mock
介绍了jest替代mocha和chai的部分,那么接下来就看看如何替代sinon。
下面是官网的示例:
function forEach(items, callback) {
for (let index = 0; index < items.length; index++) {
callback(items[index]);
}
}
const mockCallback = jest.fn();
forEach([0, 1], mockCallback);
// 判断是否被执行两次
expect(mockCallback.mock.calls.length).toBe(2);
// 判断函数被首次执行的第一个形参为0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// 判断函数第二次被执行的第一个形参为1
expect(mockCallback.mock.calls[1][0]).toBe(1);
从上面可以看到这种玩法很类似于sinon的 sinon.spy()。
当然也有类似于stub返回值的那种玩法,更多的请参考 jest mock的更多玩法
mock文件和css module的问题
如果js文件中引用了css或者本地其他文件,那么就可能测试失败。
为了解决这个问题,同时也为了提高测试效率,:
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}
而fileMock.js文件内容为:
module.exports = 'test-file-stub';
然后安装identity-obj-proxy即可:
npm install --save-dev identity-obj-proxy
jest与别名
在webpack中经常会用到别名,而jest测试时,如果文件中引用了别名会出现找不到文件的问题。
毕竟jest测试时没有经过webpack处理
对于以下玩法
resolve: {
alias: {
common: path.resolve(__dirname, 'plugins/common/')
}
}
可以通过
"jest": {
"testRegex": "./src/test/.*.test.js$",
"moduleNameMapper": {
"^common(.*)$": "<rootDir>/plugins/common$1",
}
}
这个和之前 mock文件和css module的问题 一样,都是使用了moduleNameMapper这个属性
生成测试覆盖率报告
只需要在jest命令后加入 --coverage即可
jest --coverage
【前端单元测试入门05】react的单元测试之jest的更多相关文章
- 【前端单元测试入门02】react的单元测试之Enzyme
React项目的单元测试 React的组件结构和JSX语法,对上一章的内容来讲进行测试显得很勉强. React官方已经提供了一个测试工具库:react-dom/test-utils 只是用起来不够方便 ...
- 【前端单元测试入门03】Sinon
前端测试存在的问题 在讲Sinon之前,我们得先讲一下在学习了Mocha.chai以及enzyme之后,我们的前端测试还存在的一些问题. 比如前台测试需要与后台交互,获取后台数据后再根据相应数据进行测 ...
- 【前端单元测试入门04】Karma
Karma 官方介绍 A simple tool that allows you to execute JavaScript code in multiple real browsers. 即一个允许 ...
- 【前端单元测试入门01】Mocha与chai
Mocha 的简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量 Mocha 的安装与配置 全局安装Mocha npm install -g mocha ...
- Visual Studio 单元测试之二---顺序单元测试
原文:Visual Studio 单元测试之二---顺序单元测试 此文是上一篇博文:Visual Studio 单元测试之一---普通单元测试的后续篇章.如果读者对Visual Studio的单元测试 ...
- iOS 单元测试之XCTest详解(一)
iOS 单元测试之XCTest详解(一) http://blog.csdn.net/hello_hwc/article/details/46671053 原创blog,转载请注明出处 blog.csd ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- VS2010单元测试入门实践教程
单元测试的重要性这里我就不多说了,以前大家一直使用NUnit来进行单元测试,其实早在Visual Studio 2005里面,微软就已经集成了一个叫Test的专门测试插件,经过几年的发展,这个工具现在 ...
- 单元测试之NUnit一
NUnit 分三篇文章介绍,入门者可阅读文章,有基础者直接参考官方文档.初次写博客,望大家指点. 导航: 单元测试之NUnit一 单元测试之NUnit二 单元测试之NUnit三 NUnit是什么? N ...
随机推荐
- ES磁盘分配不均问题
最近es集群磁盘空间告警,日志又没地方可以迁移,然后申请了新的服务器,一次性加入8台新的服务器 新增了32个新的数据节点,至此,我们的主集群已经到达85个数据节点的规模,整个集群数据已达到PB级别,终 ...
- Luogu P1690 贪婪的Copy
题目描述 Copy从卢牛那里听说在一片叫yz的神的领域埋藏着不少宝藏,于是Copy来到了这个被划分为个区域的神地.卢牛告诉了Copy这里共有个宝藏,分别放在第Pi个(1<=Pi<=N)区域 ...
- 最短路径问题(Floyd-Warshall模板)
#include<bits/stdc++.h> using namespace std; int n; int x,y; ][]; ][]; int m,s,t; int main() { ...
- Storm业务功能
监控平台当前使用storm对日志进行流式分析计算,用于支撑监控数据清洗,后来逐渐在storm上搭建起数据在线关联,数据离线关联,明细数据清洗,日志搜索等功能,本章节对各功能进行简要概述. 对storm ...
- input placeholder样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:red; } input:-moz-plac ...
- Centos 6.5升级openssh漏洞
CentOS 6.5下openssh升级 在有的企业中每年都会安全扫描,因为实现远程连接比较重要,如果openssh版本过低,就要对其升级,本文主要讲述openssh升级的步骤. openssh升级主 ...
- VxWorks 任务
任务:在执行时每个程序都被称之为任务.VxWorks操作系统中,任务可以直接地或者以共享方式访问大多数系统资源,为了维护各自的线程,每个任务必须保持有足够的上下文环境.(1) 任务状态:就绪(R ...
- FFMPEG在windows平台编译的详细过程,包括环境安装
下面开始: 由于FFMpeg是基于Linux开发的开源项目,源代码和Windows下最常见的Visual Studio提供的C/C++编译器不兼容,因此它不能使用MSVC++编译.要想使用FFMpeg ...
- Alibaba阿里巴巴开源软件列表
整理和分享我大阿里的开源项目的相关网址: Git Hub上的开源软件网址: 1.https://github.com/alibaba 阿里巴巴开源技术汇总:115个软件 2.https://yq.al ...
- 基于嵌入式操作系统VxWorks的多任务并发程序设计(1)――基本概念
1引言 嵌入式系统定义义为:嵌入到对象体系中的专用计算机系统."嵌入性"."专用性"与"计算机系统"是嵌入式统的三个基本要素,对象系统则是指 ...