native组件_javascript技巧_脚本之家

日前Javascript的测量试验工具很多,可是针对React的测验攻略,Instagram推出的ReactJs标配测量检验工具是Jest.Jest的官方网站地址:
JavaScript
Testing。是Facebook(照片墙(TWTEnclave.US卡塔尔State of Qatar用于测验服务和React应用程序的JavaScript单元测量试验框架。

所谓单元测量检验也正是对各样单元进行测验,通俗的将日常针没错是函数,类或单个组件,不关乎系统和购并。单元测验是软件测量试验的底子测量检验。Jest首要有以下特点:

适应性:Jest是模块化、可扩展和可配备的。
沙箱和赶快:Jest设想化了JavaScript的条件,能模拟浏览器,何况并行实施快速照相测验:Jest能够对React
树进行快速照相或别的连串化数值快速编写测验,提供快捷更新的顾客体验。
帮忙异步代码测验:协助promises和async/await
自动生成静态分析结果:不独有显得测验用例实践结果,也显得语句、分支、函数等覆盖率。

何以要运用单元测试工具

咱俩在支付进度中,不行使测量检验工具依旧能够和煦写代码举办单元测验,可是我们的代码存在着相互作用调用关系,在测验进度中我们又希望使单元相对独立而又能健康运转,就需求大家对被测函数的依赖函数和蒙受张开mock,並且在测量试验数据输入、测验执行和测量试验结果检查方面存在不少雷同性,测量检验工具即是为大家在这里些地方提供了方便。

希图阶段

亟需叁个rn项目,这里演示的是本人个人的种类ReactNative-ReduxSaga-TODO

一旦你是用react-native
init命令行创设的rn项目,而且你的rn版本在0.38以上,则无需安装了。不太精晓的话就看一下

native组件_javascript技巧_脚本之家。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.jsimport '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.toMatchSnapshot;

然后在终极运维npm run test或jest。将会输出:

PASS __tests__PostArea_test.js √ renders correctly

› 1 snapshot written.Snapshot Summary› 1 snapshot written in 1 test
suite.

Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 1
added, 1 totalTime: 8.198sRan all test suites.

况兼,在test文件夹下会输出一个文件,即为生成的快速照相。

// Jest Snapshot v1, https://goo.gl/fbAQLPexports[`renders correctly 1`] = `  title   text `;

修正源文件

在下一次运营测量检验的时候,显示的出口将与从前创设的快速照相进行相比较。快速照相应该和代码一同付出。当快速照相测量试验失败的时候,就要求检查是不是有心或下意识的改变。假诺是和预期中的变化同样,调用jest
-u来覆盖当前的快速照相。

大家来修改一下原来的代码:把第二行的字号改为14.

{text}

那会儿,大家再运维jest。那时终端将会抛出错误,并建议了不当地点

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

以上便是本文的全体内容,希望对大家的上学抱有利于,也目的在于大家不吝赐教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注