轉(zhuǎn)載地址

React 16 Jest單元測(cè)試 之 Jest工具

項(xiàng)目初始化【這里使用之前的項(xiàng)目，節(jié)省時(shí)間】

項(xiàng)目初始化地址

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有很多特定的功能，可以作為單獨(dú)的包來(lái)使用，下面羅列下官網(wǎng)提供的一些有用的包

環(huán)境

node --version v8.11.3

node的安裝包方法我就不介紹了，如果看了這么久我的分享還是不知道的話，可以繼續(xù)看看前面文章，這里簡(jiǎn)單提示下，安裝命令如下

npm install package_name --save // 生產(chǎn)安裝 npm install package_name --save-dev // 開發(fā)安裝

1、jest-changed-files

此工具提供的功能是標(biāo)識(shí)在git或hg中被修改過(guò)的文件，提供的方法如下

getChangedFilesForRoots 返回一個(gè)promise，該promise將解析為具有已更改文件和repos的對(duì)象。

findRepos 返回一個(gè)promise，該promise將解析為指定路徑中包含的一組存儲(chǔ)庫(kù)。

?

演示如下

const { getChangedFilesForRoots } = require('jest-changed-files');getChangedFilesForRoots(['./'], {lastCommit: true, }).then(result => console.log(result.changedFiles));

運(yùn)行后得到類似如下結(jié)果

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

?

2、jest-diff

用于可視化數(shù)據(jù)變化的工具。導(dǎo)出一個(gè)比較任意類型的兩個(gè)值的函數(shù)，并返回一個(gè)"pretty-printed"的字符串，說(shuō)明兩個(gè)參數(shù)之間的差異。

演示如下

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);

運(yùn)行后輸出的結(jié)果類似如下

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

?

3、jest-docblock

用于提取和解析JavaScript文件頂部注釋的工具。導(dǎo)出各種函數(shù)來(lái)操作注釋塊內(nèi)的數(shù)據(jù)。

演示如下

const { parseWithComments } = require('jest-docblock');const code = `/*** 這是一個(gè)例子* * @author durban* */console.log('Hello Jest!'); `;const parsed = parseWithComments(code); console.log(parsed);

運(yùn)行后輸出結(jié)果類似如下

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

?

4、jest-get-type

標(biāo)識(shí)任何JavaScript值的基本類型的模塊。導(dǎo)出一個(gè)函數(shù)，該函數(shù)返回一個(gè)字符串，其值的類型作為參數(shù)傳遞。

演示如下

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));

運(yùn)行后輸出結(jié)果類似如下

array null undefined

?

5、jest-validate

用于驗(yàn)證用戶提交的配置的工具。

導(dǎo)出一個(gè)帶有兩個(gè)參數(shù)的函數(shù)：用戶的配置和包含示例配置和其他選項(xiàng)的對(duì)象。

返回值是一個(gè)具有兩個(gè)屬性的對(duì)象，如下：

hasDeprecationWarnings 一個(gè)布爾值，指示提交的配置是否具有棄用警告

isValid 一個(gè)布爾值，指示配置是否正確。

?

演示如下

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);

運(yùn)行后輸出結(jié)果類似如下

{ hasDeprecationWarnings: false, isValid: true }

?

6、jest-worker

用于并行化任務(wù)的模塊。

導(dǎo)出一個(gè)類Worker，它接受Node.js模塊的路徑，并允許您調(diào)用模塊的導(dǎo)出方法，就好像它們?cè)陬惙椒ㄖ幸粯?#xff0c;返回一個(gè)promise，當(dāng)指定的方法在forked進(jìn)程中完成它的執(zhí)行時(shí)解析。

演示如下

創(chuàng)建一個(gè)task.js

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

調(diào)用的代碼如下

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();

運(yùn)行后輸出結(jié)果類似如下

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

這里用了一個(gè)看起來(lái)很奇怪的用法，其實(shí)不然，仔細(xì)了解下node包的機(jī)制，還是很好理解的

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

如果你的node版本支持import的話可以替換為，【我試了下10.5.0這個(gè)nodejs版本還是不支持呀】

import Worker from 'jest-worker';

?

7、pretty-format

導(dǎo)出將任何JavaScript值轉(zhuǎn)換為人類可讀字符串的函數(shù)。

支持開箱即用的所有內(nèi)置JavaScript類型，并允許通過(guò)用戶定義的特定應(yīng)用程序類型的擴(kuò)展。

演示如下

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));

運(yùn)行后輸出結(jié)果類似如下

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

?

Jest的包遠(yuǎn)不止這些，有興趣的可以繼續(xù)去https://github.com/facebook/jest/tree/master/packages這里觀望自己想要的

?

項(xiàng)目實(shí)踐地址

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

總結(jié)

以上是生活随笔為你收集整理的React 16 Jest单元测试 之 Jest工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。