jest單元測試實踐總結及react單元測試

2021-10-01 21:12:07 字數 2718 閱讀 4256

jest 是facebook推出的一款測試框架，整合了 mocha，chai，jsdom，sinon等功能。

和 mocha 和 chai 的功能很像，甚至可以相容部分 mocha 和 chai 的語法。可以這麼寫

import react from 'react'


import  from 'enzyme'


import commentitem from './commentitem'


// 這是mocha的玩法，jest可以直接相容


const propsdata = 


const item = shallow();


// 這裡的斷言實際上和chai的expect是很像的


expect(item.find('.btn-expand').length).tobe(0);


})// 這是jest的玩法，推薦用這種


test('兩數相加結果為兩個數字的和', () => );


}
npm install jest -g
全域性安裝過後，可以使用jest命令

生成配置檔案：

jest --init
執行過程中會詢問一些問題，根據專案實際需要選擇，之後生成jest.config.js檔案

引入babel-jest

npm install  babel-jest @babel/core @babel/preset-env --dev
jest命令執行時會自動查詢babel-jest模組

jest --coverage生成覆蓋率報告

jest測試例項

export function ispromise(obj)
import  from '../../src/utils/ispromise'


describe("ispromise",() => );


expect(ispromise(test_promise)).tobe(true)


})it('test object ispromise',() => 


}expect(ispromise(not_promise)).tobe(true)


})})
describe塊之中，提供測試用例的四個函式：before()、after()、beforeeach()和aftereach()。它們會在指定時間執行(如果不需要可以不寫)

describe('加法函式測試', () => );


after(() => );


beforeeach(() => );


aftereach(() => );


it('1加1應該等於2', () => );


it('2加2應該等於4', () => );


});
react提供了兩個測試的庫，react-test-renderer和react-dom/test-utils

react-test-renderer

例項：

import react,  from 'react'


export default class button extends component 


render() 


)}}
import react from 'react'


import button from '../../src/components/button'


import shallowrenderer from 'react-test-renderer/shallow'


import testutils from 'react-dom/test-utils'


test('button render with text', () => )
react-dom/test-utils

詳細文件移步官網：

使用之前請先將jest.config.js中的testenvironment:設定為"jsdom"

// the test environment that will be used for testing


testenvironment: "jsdom",
import react from 'react'


import button from '../../src/components/button'


import shallowrenderer from 'react-test-renderer/shallow'


import testutils from 'react-dom/test-utils'


test('button render with text', () => )


it('button onclick test', () => )
第三方測試庫：enzyme 例項

/* eslint-env jest */


import  from 'enzyme';


import react from 'react';


import page404 from '../components/page404';


describe('page404', () => );


});
參考：

前端單元測試框架jest總結

1 jest 環境搭建 檢視是否安裝成功 cmd進入 front end testing demo example目錄下輸入命令 npm install安裝所需要的依賴包 只有第一次需要安裝依賴包 安裝完成後，輸入npm test執行用例 選擇a執行所有的用例 輸入p是選擇執行哪個檔案的用例 2 j...

前端單元測試jest入門

安裝jest及命令執行npm install g jest 安裝 jest 在專案根目錄下執行jest命令,或者jest 執行單個檔案的單元測試 jest coverage 執行單元測試並計算測試覆蓋率基礎入門 高階入門 相容es6 es2015 a.根目錄下建立檔案 babel.config.js...

在VS Code中除錯Jest單元測試

隨著react的流行，jest也成很多專案廣泛使用的測試框架。由於jest預設是併發執行測試，在日常的工作中發現很多同學對於如何除錯jest單元測試犯難。這些小細節有時真是 會者不難，難者不會 這裡給大家介紹如何在code中除錯jest測試的小技巧。注意 這裡需要node v8.4.之前的版本v8有...