这篇文章主要介绍了怎样在项目中使用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 }) => (
{title}
{text}
);
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().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`] = `
title
text
`;
修改源文件
在下一次运行测试的时候，呈现的输出将与之前创建的快照进行比较。快照应该和代码一起提交。当快照测试失败的时候，就需要检查是否有意或无意的更改。如果是和预期中的变化一样，调用jest -u来覆盖当前的快照。
我们来更改一下原来的代码：把第二行的字号改为14.
{text}
这时，我们再运行jest。这时终端将会抛出错误，并指出了错误位置
感谢你能够认真阅读完这篇文章，希望小编分享的“怎样在项目中使用jest测试react native组件”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
标题名称：怎样在项目中使用jest测试reactnative组件-创新互联
当前链接：
http://www.cdkjz.cn/article/epeoe.html
