React-如何進行元件的單元測試
什麼是單元測試
一般測試分成幾個型別:單元測試、整合測試、功能測試。整合測試和功能測試不贅述。單元測試是用來對一個模組、一個函式或者一個類來進行正確性檢驗的測試工作,這裡的單元是程式工作的最小工作單位。單元測試應該僅僅依賴輸入,不依賴多餘的環境,如果你的單元測試依賴很多環境,那麼你可能需要的是整合測試。
單元測試又可以根據開發模式分成以下兩類:
1. TDD, TDD指的是Test Drive Development,很明顯的意思是測試驅動開發,也就是說我們可以從測試的角度來檢驗整個專案。大概的流程是先針對每個功能點抽象出介面程式碼,然後編寫單元測試程式碼,接下來實現介面,執行單元測試程式碼,迴圈此過程,直到整個單元測試都通過。
2. BDD指的是Behavior Drive Development,也就是行為驅動開發。行為驅動開發是一種敏捷軟體開發的技術,它鼓勵軟體專案中的開發者、QA和非技術人員或商業參與者之間的協作。主要是從使用者的需求出發,強調系統行為。BDD最初是由Dan North在2003年命名,它包括驗收測試和客戶測試驅動等的極限程式設計的實踐,作為對測試驅動開發的迴應。
目前我接觸到的專案都是BDD,國內的前端專案對單元測試重視程度沒有那麼高,TDD這種先編寫單元測試的模式應用並不多。
但是但是,我真的想說,高覆蓋率的單元測試,可以保證每次上線bug率大大降低,也是程式碼重構的基礎。很多老專案,開發人員離職、新接手的人員不敢重構,慢慢稱為團隊負擔、又不能下線,就是因為沒有單元測試,改一點都怕出現不可測的bug。
React單元測試框架
這裡分成兩種情況:
- 你只使用了react,沒有其他需要編譯的程式碼,比如sass,那麼選用Jest + Enzyme 。
Jest 是 Facebook 釋出的一個開源的、基於 Jasmine 框架的 JavaScript 單元測試工具。提供了包括內建的測試環境 DOM API 支援、斷言庫、Mock 庫等,還包含了 Spapshot Testing、 Instant Feedback 等特性。
Enzyme是Airbnb開源的 React 測試類庫,提供了一套簡潔強大的 API,並通過 jQuery 風格的方式進行DOM 處理,開發體驗十分友好。不僅在開源社群有超高人氣,同時也獲得了React 官方的推薦。
- 你有需要編譯的程式碼,需要使用webpack等打包工具,那麼建議選用Karma + Jasmine + Enzyme。
Karma 是一個用來搜尋測試檔案、編譯它們然後執行斷言的測試器,Angular團隊作品。
Jasmine 是一個斷言庫,它僅僅問“我們得到我們期待的東西了麼?”。它提供類似describe,expect 和 it的函式,也提供監聽一個函式或方法有沒有被觸發的監聽器。
Jest + Enzyme
Jest
Jest其實包括了斷言庫和執行器。斷言庫是寫單元測試時候使用的介面,Jest內建的斷言庫是Jasmine,使用語法如下:
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
Jest的runner使用很簡單,配置好config檔案就可以:
module.exports = {
transform: {
"^.+\\.tsx?$": "ts-jest"
},
testURL: "http://localhost",
testRegex: "\\.(test|spec)\\.(jsx?|tsx?)$",
testPathIgnorePatterns: [
"/node_modules/"
],
moduleFileExtensions: [
"ts",
"tsx",
"js",
"jsx"
],
testResultsProcessor: "jest-junit",
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file-mock.js",
"\\.(css|scss)$": "<rootDir>/__mocks__/style-mock.js"
},
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,tsx}",
"!**/*.d.ts",
"!**/node_modules/**"
],
coverageDirectory: "<rootDir>/tests-coverage",
coverageReporters: ["json", "html"]
}
Enzyme
Enzyme的基本用法:
import {mount, configure} from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import Widget from './Widget ';
configure({ adapter: new Adapter() });
describe('try to use Enzyme', () => {
let wrapper;
let config = {};
beforeAll(() => {
wrapper = mount(<Widget />);
});
it('should have rendered widget', () => {
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Karma + Jasmine + Enzyme
Jasmine和Enzyme上面都已經介紹,下面說說Karma。
Karma是一個執行單元測試的執行器(runner)。它可以執行webpack,這就提供了很大空間給我們。執行Karma也是通過一個配置檔案,這裡舉一個例子:
'use strict';
const path = require('path');
const fs = require('fs');
const argv = require('yargs').argv;
const KARMA_HOST_API_PATH = '/base/api';
const LOCAL_API_PATH = './api';
const api = argv.apiurl || process.env.JSAPI_URL || KARMA_HOST_API_PATH;
const isAPIBuilt = getAPIBuildStatus(api);
const files = getTestFiles(api);
const proxies = getProxies(api);
module.exports = (config) => {
config.set({
frameworks: [
'jasmine',
],
client: {
// used in ./tests/test-main.js to load API from api
args: [api, isAPIBuilt]
},
plugins: [
'karma-jasmine',
'karma-webpack',
'karma-coverage',
'karma-spec-reporter',
'karma-chrome-launcher',
'karma-phantomjs-launcher'
],
files: files,
preprocessors: {
'**/*.+(ts|tsx)': ['webpack',
// 'coverage'
],
},
// optionally, configure the reporter
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
webpack: {
// karma watches the test entry points
// (you don't need to specify the entry option)
// webpack watches dependencies
devtool: 'source-map',
mode: 'development',
output: {
libraryTarget: "amd"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
alias: {
'builder': path.resolve(__dirname, 'builder/')
},
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
configFile: require.resolve('./tsconfig.json')
}
}
]
}, {
test: /\.(scss|css)$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV === 'production'? false: true
}
}, {
loader: 'postcss-loader',
options: {
plugins: []
}
}, {
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV === 'production'? false: true
}
}]
}, {
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
fallback: path.join(__dirname, './webpack/webpack-file-loader/main.js'),
outputPath: (rPath, fullPath) => {
return path.relative(__dirname, fullPath).replace(/\\/g, '/');
},
useRelativePath: true,
name: fullPath => {
return '../' + path.relative(__dirname, fullPath).replace(/\\/g, '/');
}
}
}
}]
},
stats: {
colors: true,
reasons: true
},
externals: [
function(context, request, callback) {
if (...) {
return callback(null, "commonjs " + request);
}
callback();
}
]
},
proxies: proxies,
proxyValidateSSL: false,
reporters: ['spec',
// 'coverage'
],
mime: {
'text/x-typescript': ['ts','tsx']
},
colors: true,
autoWatch: false,
browsers: ['Chrome'], // Alternatively: 'PhantomJS', 'Chrome', 'ChromeHeadless'
browserNoActivityTimeout: 100000,
customLaunchers: {
chrome_without_security: {
base: 'Chrome',
flags: ['--disable-web-security'],
displayName: 'Chrome w/o security'
}
},
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: !!argv.singleRun
});
};
function getAPIBuildStatus(api){
if(isUsingKarmaHostApi(api)){
return fs.existsSync(path.join(LOCAL_API_PATH, 'init.js'));
}else{
return !/\/src(\/)?$/.test(api);
}
}
function getTestFiles(api){
let tests = [
'./tests/test-main.js',
{pattern: path.join(argv.root, '/**/*.apitest.+(js|ts|jsx|tsx)'), included: false}
]
if(isUsingKarmaHostApi(api)){
tests = tests.concat([
{pattern: './api/**/*.+(js|html|xml|glsl|gif)', included: false, watched: false}
]);
}
return tests;
}
function getProxies(api){
if(isUsingKarmaHostApi(api)){
return {};
}else{
return {
'/base/api/': {
'target': api,
'changeOrigin': false
}
}
}
}
function isUsingKarmaHostApi(api){
return api.indexOf(KARMA_HOST_API_PATH) > -1;
}
這個配置,允許使用者通命令列引數 --apiurl
配置一個當前單元測試依賴的api url,比如 lodash的cdn url。如果沒有提供這個引數,則會在根目錄下尋找./api/
並host這個目錄下的所有檔案(通過{pattern: './api/**/*.+(js|html|xml|glsl|gif)', included: false, watched: false}
)。注意,因為提供url和不提供url,雖然請求相對路徑相同,但是url域不同,所以使用url時候需要啟用代理(proxies: proxies
)。
在執行單元測試前,你可能需要載入一些配置,這裡通過./tests/test-main.js
執行,它提前通過script標籤載入。在test-main.js中,可以通過window.__karma__.config.args
獲得在node端注入的變數,注入變數通過args: [api, isAPIBuilt]
。
其他測試框架及總結
我還使用過intern(https://theintern.io/docs.html#Intern/4/docs/README.md),它也提供了一套單元測試框架。目前intern v4的doc還不全,配置coverage和report都有點費勁,比如配置junit report需要到它原始碼裡找都有哪些配置項,如何使用,不贅述。
總結起來也很簡單,就是寫React單元測試,語法和mock資料你需要熟悉Jasmine語法和Enzyme語法,Jasmine提供斷言庫,Enzyme可以虛擬的render元件並觸發生命週期,想要把單元測試跑起來,就需要執行器,簡單專案選用Jest,對webpack依賴比較重的專案可以使用Karma。