webpack4.0 Conquer (9)--karma

webpackAs the most fire-front building tool, is the most important part of the front-end automation tool chain, the use of high threshold. This series is the author's own study record, compares the foundation, hoped through the problem + solves the pattern, takes the front-end construction to meet the concrete demand as the starting point, the Learning webpack tool corresponding processing method. (The parameter configuration and usage methods in this article are based on webpack4.0版本 )

I. Webpack and automated Testing

webpackThe corresponding keyword is modular, its main task is to package and manage the module, so the first need to clear the concept is the reason why the webpack automated test, because it can provide the module management of the test script ability , essentially, is to webpack Packaging capabilities embedded in automated testing frameworks rather than integrating automated test frameworks as plug-ins webpack , it is critical to understand this distinction.

For Karma + Mocha + Chai and other tools related to automated testing the topic will be in the "large front end of the Automation Factory" series blog post, this article mainly introduces the karma-webpack connector, it from the tool implementation level of automated testing and automation to build a link.

Two. Karma-webpack

Plugin Address: Github.com/webpack-contrib/karma-webpack

2.1 Introduction to the Automated Unit Test library

Let's start with a brief description of the basic Unit testing tool:

• KarmaA test framework that provides the ability to run unit tests in a multi-browser environment, including a headless browser.
• MochaTest framework that provides unit testing capabilities compatible with browser and node environments and can be karma-mocha integrated into Karma .
• ChaiAssertion Library, support should,expect,assert different types of assert test functions, can be used karma-chai in integration into Karma .

Most unit tests are based on the combined use of the three libraries mentioned above. Karma-webpackThe primary capability is to Karma provide modular loading capabilities for test scripts that are loaded in.

2.2 Basic use

yarn add karma-webpack -Dto install using, the karma.conf.js configuration file is as follows:

module.exports = (config) => {  config.set({    files: [      // 针对test目录下所有符合命名规范的测试文件      { pattern: 'test/*_test.js', watched: false },      { pattern: 'test/**/*_test.js', watched: false }    ],    preprocessors: {      // 为选定脚本指定前处理器，这里配置所有的测试脚本需要经过webpack处理      'test/*_test.js': [ 'webpack' ],      'test/**/*_test.js': [ 'webpack' ]    },    webpack: {      // webpack配置，针对测试脚本打包的compilation配置，与项目文件打包不相关      // 也可以引入独立的配置文件    },    webpackMiddleware: {      //如果使用了webpack-dev-server则可以传入一些参数      stats: 'errors-only'    }  })}

In this configuration, webpack each hit file is treated as one, that is, entry it only handles local dependency management, and the advantage is that you can run unit tests separately for some test scripts, but the disadvantage is obvious, This is relatively inefficient in scenarios where the number of test scripts is large and you need to run all of the test cases by default (for example, llt tests that are automatically triggered on automated pipelines).

2.3 Default run-through scenario for all test cases

For the above problem, webpak provides another option to process the test script set of methods, it is easy to imagine, is actually a new one entryPoint , will run the test script all introduced, packaged into a bundle.js file, its advantages and disadvantages and the basic scenario is exactly the opposite.

In this scenario, karma.conf.js the configuration only needs to be for the portal file:

files: [  // only specify one entry point  // and require all tests in there  'test/index_test.js'],preprocessors: {  // add webpack as preprocessor  'test/index_test.js': [ 'webpack' ]},

Then create a new portal script at the root of the test file index_test.js :

// 这个配置针对的是test/**/?_test.js格式的脚本文件const testsContext = require.context(".", true, /_test$/)；testsContext.keys().forEach(testsContext)

Three. Test report

Generally run the unit test, you need to output a report in a specified format for later self-examination or problem tracing, it is important to note that when combined with the webpack4.0 use karma of some of the default behavior will be invalidated (for example, in the console output unit test cases and results summary, and karma The standalone runtime is used to generate a code Coverage report plug-in karma-coverage that does not work correctly, and it needs to be reconfigured.

• Unit Test Report

  Unit test information cannot be output, you can explicitly reference the plug-in karma-spec-reporter or karma-mocha-reporter and make Basic configuration.

• Code Coverage Report

  The automatic generation configuration of code coverage reports is complex and requires a dependency on the front-end code coverage tools istanbul and combined with several plug-ins. The lower version webpack can be configured by referencing the example of the Karma-webpack-example open source project. webpack4.0The above versions can refer to the recommended examples below.

  Unit Test Results:

Coverage report:

Four. Configuration reference

The author provides an webpack4.0 + karma example of an automated test configuration, which is placed in the Webpack4-karma-mocha-chai-demo, the need for a small partner to self-view, if it is helpful to you, do not forget to give a star Oh ~