React 16 Jest单元测试 之 Jest工具

栏目: 编程工具 · 发布时间: 6年前

内容简介:项目初始化地址拉取Jest有很多特定的功能,可以作为单独的包来使用,下面罗列下官网提供的一些有用的包

项目初始化【这里使用之前的项目,节省时间】

项目初始化地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.23

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.23
npm install

Jest有很多特定的功能,可以作为单独的包来使用,下面罗列下官网提供的一些有用的包

环境

node --version
v8.11.3

node的安装包方法我就不介绍了,如果看了这么久我的分享还是不知道的话,可以继续看看前面文章,这里简单提示下,安装命令如下

npm install package_name --save // 生产安装
npm install package_name --save-dev // 开发安装

1、jest-changed-files

工具 提供的功能是标识在git或hg中被修改过的文件,提供的方法如下

getChangedFilesForRoots 返回一个promise,该promise将解析为具有已更改文件和repos的对象。
findRepos 返回一个promise,该promise将解析为指定路径中包含的一组存储库。

演示如下

const { getChangedFilesForRoots } = require('jest-changed-files');

getChangedFilesForRoots(['./'], {
  lastCommit: true,
}).then(result => console.log(result.changedFiles));

运行后得到类似如下结果

Set {
  '/xxx/webpack-react-demo/src/__tests__/jest_mock_names.test.js' }

2、jest-diff

用于可视化数据变化的工具。导出一个比较任意类型的两个值的函数,并返回一个"pretty-printed"的字符串,说明两个参数之间的差异。

演示如下

const diff = require('jest-diff');

const a = { a: { b: { c: 5 } } };
const b = { a: { b: { c: 6 } } };

const result = diff(a, b);

console.log(result);

运行后输出的结果类似如下

- Expected
+ Received

  Object {
    "a": Object {
      "b": Object {
-       "c": 5,
+       "c": 6,
      },
    },
  }

3、jest-docblock

用于提取和解析JavaScript文件顶部注释的工具。导出各种函数来操作注释块内的数据。

演示如下

const { parseWithComments } = require('jest-docblock');

const code = `
  /**
   * 这是一个例子
   * 
   * @author durban
   *  
   */
  console.log('Hello Jest!');
`;

const parsed = parseWithComments(code);
console.log(parsed);

运行后输出结果类似如下

{ comments: '  /**\n这是一个例子\n\n \n/\n  console.log(\'Hello Jest!\');',
  pragmas: { author: 'durban' } }

4、jest-get-type

标识任何JavaScript值的基本类型的模块。导出一个函数,该函数返回一个字符串,其值的类型作为参数传递。

演示如下

const getType = require('jest-get-type');

const array = [1, 2, 3];
const nullvalue = null;
const undefinedValue = undefined;

console.log(getType(array));
console.log(getType(nullvalue));
console.log(getType(undefinedValue));

运行后输出结果类似如下

array
null
undefined

5、jest-validate

用于验证用户提交的配置的工具。

导出一个带有两个参数的函数:用户的配置和包含示例配置和其他选项的对象。

返回值是一个具有两个属性的对象,如下:

hasDeprecationWarnings 一个布尔值,指示提交的配置是否具有弃用警告
isValid 一个布尔值,指示配置是否正确。

演示如下

const { validate } = require('jest-validate');

const configByUser = {
  tranform: '<rootDir>/node_modules/my-custom-packages',
};

const result = validate(configByUser, {
  comment: '  Documentation: http://custom-docs.com',
  exampleConfig: {
    tranform: '<rootDir>/node_modules/jest-validate',
  },
});

console.log(result);

运行后输出结果类似如下

{ hasDeprecationWarnings: false, isValid: true }

6、jest-worker

用于并行化任务的模块。

导出一个类Worker,它接受Node.js模块的路径,并允许您调用模块的导出方法,就好像它们在类方法中一样,返回一个promise,当指定的方法在forked进程中完成它的执行时解析。

演示如下

创建一个task.js

module.exports = {
  Task: args => args,
};

调用的代码如下

const { default: Worker } = require('jest-worker');

async function main() {
  const worker = new Worker(require.resolve('./task.js'));

  const results = await Promise.all([
    worker.Task({ args: '1' }),
    worker.Task({ args: '2' }),
  ]);

  console.log(results);
}

main();

运行后输出结果类似如下

[ { args: '1' }, { args: '2' } ]

这里用了一个看起来很奇怪的用法,其实不然,仔细了解下node包的机制,还是很好理解的

const { default: Worker } = require('jest-worker');

如果你的node版本支持import的话可以替换为,【我试了下10.5.0这个nodejs版本还是不支持呀】

import Worker from 'jest-worker';

7、pretty-format

导出将任何JavaScript值转换为人类可读字符串的函数。

支持开箱即用的所有内置JavaScript类型,并允许通过用户定义的特定应用程序类型的扩展。

演示如下

const prettyFormat = require('pretty-format');

const val = { object: {} };
val.circuleReference = val;
val[Symbol('key')] = 'key';
val.map = new Map([['property', 'value']]);
val.array = [-0, Infinity, NaN];

console.log(prettyFormat(val));

运行后输出结果类似如下

Object {
  "array": Array [
    -0,
    Infinity,
    NaN,
  ],
  "circuleReference": [Circular],
  "map": Map {
    "property" => "value",
  },
  "object": Object {},
  Symbol(key): "key",
}

Jest的包远不止这些,有兴趣的可以继续去https://github.com/facebook/jest/tree/master/packages这里观望自己想要的

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.24

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

思想的未来

思想的未来

(美)劳伦斯﹒莱斯格 / 李旭 / 中信出版社 / 2004-10 / 29.00元

因特网革命已到来,一些人说它已经过去,革命缘何而来?又缘何而去呢? 劳伦斯·莱斯格对因特网革命中为何会出现一种反革命的破坏性力量及后果做出了解释。创作之所以繁荣,是因为因特网保护了创新的公共资源。是因为因特网保护了创新的公共资源。因特网的独特设计营造出一个中立的平台。最广大范围的作者们可在此平台上进行试验。围绕此平台的法律架构对这一自由空间给予了保护,以使文化和信息——我们这个时代的......一起来看看 《思想的未来》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具