👩🏽‍🤝‍👨🏾 🤹🏾 🤸🏿 设置javascript单元测试环境 🚠 📬 🈶

最初有一个函数，并在一个地方调用它。然后，我们想在另一个具有新功能的地方打电话给她，并更新她。我们非常喜欢这个ff，以至于我们将其称为第三名，但仍然进行了功能编辑，并且...首先出现了问题。如何找出？检查我们使用此功能的所有地方，一切是否正常工作？可以，但是最好使用单元测试。

大家好已从沙箱匿名连接。您可以在搜索引擎的第一行中找到测试代码的正确方法，但是您必须调整环境。因此，今天我想帮助新手开发人员设置用于单元测试其代码的环境。

PS-如果读者精通npm或类似的软件包管理器，则有必要进一步阅读本文。

让我们从小定义开始：

单元测试是一种旨在减少错误和副作用的可能性的技术（当修复一个错误时引入另一个错误时）。
业力是允许您在浏览器中运行Java脚本测试的工具。
jasmine是用于测试javasctript代码的框架。

Karma 安装说明（与许多其他安装说明一样）说，应在项目本地安装软件包。

# Install Karma: $ npm install karma --save-dev

 # Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

为了方便起见，我们也可以npm install -g karma-cli安装karma-cli npm install -g karma-cli ，否则命令将在终端上可用，如./node_modules/karma/bin/karma 。

然后我们可以创建一个配置文件：

 karma init karma.conf.js

首先，将询问我们所使用的测试框架。（茉莉花）
我们是否使用文件/模块加载器Require.js。（没有）
我们要查看哪些浏览器（Chrome）
我们正在听什么文件。（* [Ss] pec.js）
是否应排除任何文件
我应该监视测试更改（是）

回答问题后，我们将获得一个配置文件。

配置文件

 // Karma configuration // Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 ()) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*[Ss]pec.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }

创建另一个测试文件。

测试文件

 // test.spec.js describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); it("and so is a spec", function() { a = true; expect(a).toBe(false); }); });

通过运行karma start karma.conf.js ，我们已经可以看到测试的工作原理，但是我建议稍等片刻，制作其他附加组件。

安装npm i -D karma-jasmine-html-reporter软件包npm i -D karma-jasmine-html-reporter ，它将在浏览器中动态显示测试结果。让我们添加业力配置：

 ... reporters: ['progress', 'kjhtml'], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, ...

设置javascript单元测试环境

More articles: