此篇文章是續(xù) webpack多入口文件、熱更新等體驗，主要說明單元測試與e2e測試的基本配置以及相關(guān)應(yīng)用。

一、單元測試

實現(xiàn)單元測試框架的搭建、es6語法的應(yīng)用、以及測試覆蓋率的引入。

1. 需要安裝的項目：

• jasmine：單元測試庫
• karma：測試框架，配置選擇phantomjs瀏覽器
• karma-jasmine：操作jasmine的插件
• karma-webpack：webpack與karma的連接
• mock：用于數(shù)據(jù)模擬，用'npm install --save-dev mockjs'安裝
• karma-coverage：測試覆蓋率報表
• karma-spec-reporter：命令行輸出測試用戶的運行結(jié)果
• babel-plugin-istanbul: 測試覆蓋率顯示未通過webpack打包的源碼

?????? 由于babel-plugin-istanbul是bable的一個插件，所以需要修改.babelrc文件，代碼如下:

{"presets":["es2015","stage-2"],"plugins": ["istanbul"] //這句話是重點 }

2. 配置參數(shù)及運行命令：

• 運行命令 .\node_modules\.bin\karma start .\test\karma.conf.js

karma命令為私有安裝，karma配置文件指定在test文件夾下。

• 配置文件如下：

module.exports = function(config) {config.set({// 基路徑：表示karma從那個位置開始找文件basePath: '',// 框架frameworks: ['jasmine'],// 測試的入口文件files: ['../test/unit/index.js'],// 排除的文件，可以是正則 exclude: [],// 對指定文件的preprocess(預(yù)處理) preprocessors: {'../test/unit/index.js': ['webpack', 'sourcemap'],'../src/**/*.js': ['webpack','sourcemap', 'coverage', 'coverage'] //表示那些代碼需要生成測試覆蓋率報表 },// 結(jié)果報表reporters: ['progress'],// 服務(wù)器端口port: 9876,// 報表中是否有顏色區(qū)分colors: true,// 輸出的日志級別// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO,// 文件變化是否自動刷新autoWatch: true,// 測試的測試器環(huán)境browsers: ['PhantomJS'],// 是否依附瀏覽器運行// if true, Karma captures browsers, runs the tests and exitssingleRun: false,// 并發(fā)個數(shù)，同時支持在多少個瀏覽器運行// how many browser should be started simultaneous concurrency: Infinity,//webpack配置 webpack: webpackConfig,//代碼覆蓋率配置節(jié)點 coverageReporter:{dir: './converage',reporters:[{ type: 'lcov', subdir: '.' },{type: 'text-summary'}],}}) }

• *.spec.js(測試代碼)如下：

import {init} from '../../src/ma' import data from '../mocks/demo'describe('demo_spec', function(){it('body',() => {init();let button = document.querySelector('.btn');button.textContent = data.btnName;expect(button.textContent).toEqual(data.btnName);}) });

src/ma:會向dom插件一個button標(biāo)簽

• mocks/demo.js的代碼：

import Mock from 'mockjs'; var template = {'title': 'Demo01','btnName|1-3': '*' } export default Mock.mock(template);

mocks/demo：用mockjs模擬的一些數(shù)據(jù)

3. 運行結(jié)果

二、e2e(模擬用戶行為的測試)

1. 需要安裝的npm包

• selenium-server：webdriver測試服務(wù)器的nodejs搭建
• nightwatch：對selenium-server的包裝，簡化其配置
• chromedriver：selenium的chrome測試環(huán)境插件，如果是firefox、ie等都需要重新下測試環(huán)境插件。

2. 原理簡要說明

???? selenium-server由于瀏覽器同源策略(域名、協(xié)議、端口相同才是同源，如不明白可以baidu)的限制，selenimue就以代理的方式進行目標(biāo)站點的測試(也就是測試環(huán)境跑的瀏覽器連接是selenium-server產(chǎn)生的代理服務(wù)器)，selenium-server代理服務(wù)器=selenium核心Js + 測試目標(biāo)站點(proxy)。

3. 相關(guān)代碼展示

• nightwatch配置參數(shù)：

module.exports = {"src_folders": ["test/e2e/specs"],"selenium":{"start_process":true,"server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-3.3.1.jar","host": "127.0.0.1","port": 9538,"cli_args":{"webdriver.chrome.driver": require('chromedriver').path}},"test_settings":{"default": {"selenium_port": 9538,"selenium-host": "127.0.0.1","silent": true,"globals":{"devServerURL": "http://localhost:8080"}},"chrome":{"desiredCapabilities": {"browserName": "chrome","javascriptEnabled": true,"acceptSslCerts": true} }} }

• selenium.server_path指向為selenium的jar包
• selenium.cli_args：配置運行時的必要參數(shù)，webdriver.chrome.driver指定適合selenium的chrome安裝位置
• test.default.globals.devServerURL：需要測試的目標(biāo)站點，此站點必須處于活動狀態(tài)。
• 測試用例代碼：

module.exports = {"default e2e": function(browser){var devServer = browser.globals.devServerURL;var driver = browser.url(devServer).waitForElementVisible(".btn", 5000).setValue('.btn', 'e2e產(chǎn)生的內(nèi)容');browser.getText('.btn', function(result){ console.log(result.value);});browser.end();} }

nightwatch相關(guān)api可以參考此鏈接

• 運行e2e的命令 .\node_modules\.bin\nightwatch --config ".\test\e2e\runner.js" --env chrome

轉(zhuǎn)載于:https://www.cnblogs.com/cqhaibin/p/6581350.html

總結(jié)

以上是生活随笔為你收集整理的Webpack单元测试，e2e测试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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