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

一、單元測試

實現單元測試框架的搭建、es6語法的應用、以及測試覆蓋率的引入。

1. 需要安裝的項目：

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

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

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

2. 配置參數及運行命令：

• 運行命令 .\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(預處理) preprocessors: {'../test/unit/index.js': ['webpack', 'sourcemap'],'../src/**/*.js': ['webpack','sourcemap', 'coverage', 'coverage'] //表示那些代碼需要生成測試覆蓋率報表 },// 結果報表reporters: ['progress'],// 服務器端口port: 9876,// 報表中是否有顏色區分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,// 測試的測試器環境browsers: ['PhantomJS'],// 是否依附瀏覽器運行// if true, Karma captures browsers, runs the tests and exitssingleRun: false,// 并發個數，同時支持在多少個瀏覽器運行// how many browser should be started simultaneous concurrency: Infinity,//webpack配置 webpack: webpackConfig,//代碼覆蓋率配置節點 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標簽

• mocks/demo.js的代碼：

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

mocks/demo：用mockjs模擬的一些數據

3. 運行結果

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

1. 需要安裝的npm包

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

2. 原理簡要說明

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

3. 相關代碼展示

• nightwatch配置參數：

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：配置運行時的必要參數，webdriver.chrome.driver指定適合selenium的chrome安裝位置
• test.default.globals.devServerURL：需要測試的目標站點，此站點必須處于活動狀態。
• 測試用例代碼：

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

nightwatch相關api可以參考此鏈接

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

轉載于:https://www.cnblogs.com/cqhaibin/p/6581350.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。