详解如何在项目中使用jest测试react native组件
目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是:Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。
所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成。单元测试是软件测试的基础测试。Jest主要有以下特点:
- 适应性:Jest是模块化、可扩展和可配置的。
- 沙箱和快速:Jest虚拟化了JavaScript的环境,能模拟浏览器,并且并行执行
- 快照测试:Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新的用户体验。
- 支持异步代码测试:支持promises和async/await
- 自动生成静态分析结果:不仅显示测试用例执行结果,也显示语句、分支、函数等覆盖率。
为什么要使用单元测试工具
我们在开发过程中,不使用测试工具依然可以自己写代码进行单元测试,但是我们的代码存在着相互调用关系,在测试过程中我们又希望使单元相对独立而又能正常运行,就需要我们对被测函数的依赖函数和环境进行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 -u,快照被覆盖。再执行jest则不会报错了~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
React报错map() is not a function详析
这篇文章主要介绍了React报错map() is not a function详析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下2022-08-08React useMemo和useCallback的使用场景
这篇文章主要介绍了React useMemo和useCallback的使用场景,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下2021-04-04react路由基础解读(Router、Link和Route)
这篇文章主要介绍了react路由基础解读(Router、Link和Route),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07React中useCallback useMemo到底该怎么用
在React函数组件中,当组件中的props发生变化时,默认情况下整个组件都会重新渲染。换句话说,如果组件中的任何值更新,整个组件将重新渲染,包括没有更改values/props的函数/组件。在react中,我们可以通过memo,useMemo以及useCallback来防止子组件的rerender2023-02-02react-native-tab-navigator组件的基本使用示例代码
本篇文章主要介绍了react-native-tab-navigator组件的基本使用示例代码,具有一定的参考价值,有兴趣的可以了解一下2017-09-09
最新评论