一、理解單元測(cè)試的重要性
bug發(fā)現(xiàn)在開發(fā)階段，成本很低，
如果發(fā)現(xiàn)在生產(chǎn)環(huán)境，成本很高，
如果是關(guān)鍵時(shí)刻，決定人生命運(yùn)，決定企業(yè)發(fā)展。
從技術(shù)的角度講，有效的提高代碼的健壯性，有效的增加代碼的可維護(hù)性，對(duì)于后期的代碼重構(gòu)是必要條件。
從團(tuán)隊(duì)的角度講，開發(fā)人員的代碼經(jīng)過(guò)完整的單元測(cè)試，可以有效的減少測(cè)試成本，維護(hù)成本，運(yùn)維成本，運(yùn)營(yíng)成本。
不要存在bug不會(huì)被發(fā)現(xiàn)的僥幸心理，我的經(jīng)驗(yàn)，bug不是在開發(fā)階段發(fā)現(xiàn)就是在測(cè)試階段發(fā)現(xiàn)，不是在測(cè)試階段發(fā)現(xiàn)就是在生產(chǎn)環(huán)境被用戶發(fā)現(xiàn)。終究會(huì)暴露，越早越好。
寫了單元測(cè)試，我們可以有信心（有依據(jù)）的告訴用戶我的程序是多么的健壯。
寫了單元測(cè)試，我們可以有效的培養(yǎng)自己做人、做事的高度。
寫了單元測(cè)試，是我們工匠精神的體現(xiàn)。
二、jest與項(xiàng)目環(huán)境介紹
2.1、Jest：Facebook 的一套開源的 JavaScript 測(cè)試框架， 它自動(dòng)集成了斷言、JSDom、覆蓋率報(bào)告等開發(fā)者所需要的所有測(cè)試工具，是一款幾乎零配置的測(cè)試框架。
2.2、環(huán)境：vue3?+ ts + vite2 + pinia + jest + pnpm
三、jest單元測(cè)試實(shí)踐
3.1、安裝
pnpm add babel-jest@latest?jest@latest?ts-jest@latest?-D?
pnpm add @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs @vue/test-utils @vue/vue3-jest jest-transform-stub @types/jest -D
jest：提供單元測(cè)試能力
ts-jest：Typescript 開發(fā)語(yǔ)言的預(yù)處理器
@vue/test-utils：對(duì) Vue 組件進(jìn)行測(cè)試（Vue 官方提供）
@vue/vue3-jest：將 Vue SFC（單文件組件）轉(zhuǎn)換為 Jest 可執(zhí)行的 JavaScript 代碼
babel-jest：將非標(biāo)準(zhǔn) JavaScript 代碼（JSX/TSX）轉(zhuǎn)換為 Jest 可執(zhí)行的 JavaScript 代碼
@babel/preset-env：提供測(cè)試時(shí)最新的 JavaScript 語(yǔ)法的 Babel Preset
@babel/preset-typescript：提供測(cè)試時(shí)TypeScript 語(yǔ)法的 Babel Preset
@vue/babel-plugin-jsx：提供測(cè)試時(shí)在 Vue 中使用 JSX/TSX 語(yǔ)法的 Babel Plugin
@vitejs/plugin-vue-jsx：提供開發(fā)時(shí)在 Vue 中使用 JSX/TSX 語(yǔ)法的 Vite Plugin
jest-transform-stub：將非 JavaScript 文件轉(zhuǎn)換為 Jest 可執(zhí)行的 JavaScript 代碼
?
3.2、根目錄新建jest.config.js
export default {
preset: 'ts-jest',
roots: ['<rootDir>/tests/'],
clearMocks: true,
moduleDirectories: ['node_modules', 'src'],
moduleFileExtensions: ['js', 'ts', 'vue', 'tsx', 'jsx', 'json', 'node'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
testMatch: [
'**/tests/**/*.[jt]s?(x)',
'**/?(*.)+(spec|test).[tj]s?(x)',
'(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
],
testPathIgnorePatterns: [
'<rootDir>/tests/server/',
'<rootDir>/tests/__mocks__/',
'/node_modules/',
],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.vue$': '@vue/vue3-jest',// 使用 vue-jest 幫助測(cè)試 .vue 文件
'^.+\\.(js|jsx)?$': 'babel-jest',// 遇到 js jsx 等轉(zhuǎn)成 es5
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',// 遇到 css 等轉(zhuǎn)為字符串 不作測(cè)試
},
transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'],
// A map from regular expressions to module names that allow to stub out resources with a single module
moduleNameMapper: {
'\\.(vs|fs|vert|frag|glsl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/tests/__mocks__/fileMock.ts',
'\\.(sass|s?css|less)$': '<rootDir>/tests/__mocks__/styleMock.ts',
'\\?worker$': '<rootDir>/tests/__mocks__/workerMock.ts',
'^/@/(.*)$': '<rootDir>/src/$1',
},
testEnvironment: 'jsdom',
verbose: true,
collectCoverage: false,
coverageDirectory: 'coverage',
collectCoverageFrom: ['src/**/*.{js,ts,vue}'],
coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'],
}3.3、根目錄新建babel.config.js
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current"
}
}
]
],
plugins: ["transform-es2015-modules-commonjs"]
}3.4、package.json
?"unit:test": "jest"
3.5、根目錄創(chuàng)建tests文件，用來(lái)放單元測(cè)試文件
3.6、創(chuàng)建一個(gè)utils
src/utils/index.ts
// 數(shù)字千位分隔顯示123456 =》123,456
export const formatNumber=(value: string) =>{
value += '';
const list = value.split('.');
const prefix = list[0].charAt(0) === '-' ? '-' : '';
let num = prefix ? list[0].slice(1) : list[0];
let result = '';
if (num.length > 3) {
result = `,${num.slice(-3)}${result}`;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}3.7、創(chuàng)建utils的單元測(cè)試
tests/units.spec.ts
import {formatNumber} from '../src/utils/index'
test('格式化數(shù)字123456顯示為123,456', () => {
expect(formatNumber('123456')).toBe('123,456');
})3.8、運(yùn)行pnpm unit:test
pnpm unit:test
測(cè)試通過(guò)
四、過(guò)程記錄
4.1、
?解：我理解，我項(xiàng)目是vite項(xiàng)目，不是vue-cli項(xiàng)目，不能使用這個(gè)命令安裝jest
4.2、
?解：
pnpm add @types/jest
4.3、
解：jest升級(jí)版本超過(guò)27出現(xiàn)的問(wèn)題
pnpm add jest-environment-jsdom
?javascript - 將 Jest 升級(jí)到 v28 - 找不到錯(cuò)誤測(cè)試環(huán)境 jest-environment-jsdom - 堆棧內(nèi)存溢出
4.4、另外一個(gè)項(xiàng)目嘗試使用jest遇到問(wèn)題如下，未解決
處理require is not defined in ES module scope， you can use import instead報(bào)錯(cuò)
pnpm add?@babel/plugin-transform-modules-commonjs
package.json增加配置
"babel": {
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}嘗試了一些方法，沒(méi)有成功，，后來(lái)更改了jest.config.js配置，避免了這個(gè)問(wèn)題?
4.5、
vue-cli項(xiàng)目可以使用如下命令增加jest單元測(cè)試能力：
vue add @vue/cli-plugin-unit-jest
未測(cè)試?
4.6、
記得之前創(chuàng)建項(xiàng)目的時(shí)候可以選擇測(cè)試工具，這里我們也嘗試一些，沒(méi)有發(fā)現(xiàn)，所以我們自己安裝jest
pnpm create vite
親測(cè)，新建項(xiàng)目，沒(méi)有選擇測(cè)試工具的選項(xiàng)，，如果后續(xù)有發(fā)現(xiàn)再補(bǔ)充
五、歡迎交流指正，關(guān)注我，一起學(xué)習(xí)。
參考鏈接：
標(biāo)簽[ts-jest] 最普遍問(wèn)題 - 堆棧內(nèi)存溢出
好文-vue3+vite+jest配置 單元測(cè)試總結(jié)_火辣辣-的博客-CSDN博客_vite 單元測(cè)試
@babel/plugin-transform-modules-commonjs · Babel 中文網(wǎng)
vue3 + vite + typescript + eslint + jest 項(xiàng)目配置實(shí)踐-技術(shù)圈
關(guān)于Vue中用jest測(cè)試_城北的徐公的博客-CSDN博客_vue-jest
Vue3項(xiàng)目實(shí)踐jest，學(xué)會(huì)了升職加薪（上篇）_梅花十三兒的博客-CSDN博客
vite + vue3 + ts + jest 測(cè)試 - boyyang - 博客園
Jest入門文檔 - 掘金文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-780205.html
【前端測(cè)試】第0章 - 為什么要做單元測(cè)試？_嗶哩嗶哩_bilibili文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-780205.html
到了這里，關(guān)于單元測(cè)試（jest）：理解、安裝、使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
