JavaScript Testing

闻人志

2023-12-01

Testing framework

both use describe, it functions

Jasmine（Behavior-Driven JavaScript）

spyOn(User, 'save') jasmine.createSpy()

the Jasmine framework has almost everything built into it including assertions/expectations and test double utilities (which come in the form of spies). However, it does not have a test runner so you will need to use a tool like Karma for that

describe('', function() {
var foo;
beforEach(function() {
foo = 0;
});
afterEach(function() {
foo = 0;
});

xit('', function() {
expect(true).toBe(true);
});
})

xit, xdescribe(skip test)
其实Jasmine就是JUnit的JavaScript重写版

Jasmine运行环境配置:

运行时环境：这里基于chrome浏览器，通过HTML作为JavaScript载体
源文件：用于实现某种业务逻辑的文件，就是.js文件
测试文件：符合jasmine API的测试js脚本
输出结果： jasmine提供了基于网页的输出结果

直接open SpecRunner.html,就是跑测试了

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>POS v1 With 3rd Libraries Spec Runner</title>

    <link rel="shortcut icon" type="image/png" href="../lib/jasmine-2.0.1/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="../lib/jasmine-2.0.1/jasmine.css">

    <script type="text/javascript" src="../lib/lodash-2.4.1/lodash.compat.js"></script>
    <script type="text/javascript" src="../lib/jasmine-2.0.1/jasmine.js"></script>
    <script type="text/javascript" src="../lib/jasmine-2.0.1/jasmine-html.js"></script>
    <script type="text/javascript" src="../lib/jasmine-2.0.1/boot.js"></script>

    <!-- include source files here... -->
    <script type="text/javascript" src="spec/fixtures.js"></script>
    <script type="text/javascript" src="src/main.js"></script>

    <!-- include spec files here... -->
    <script type="text/javascript" src="spec/main-spec.js"></script>

</head>

<body>
</body>
</html>

Mocha

Mocha includes

test runner
API for setting up your test suite

not include

assertion
test double utilities.

Chai is for assertions when using Mocha.
Sinon is for test doubles in Mocha

Test Runner for JavaScript

Karma

Karma just launches an HTTP server, and generates the test runner HTML file.A simple tool that allows you to execute JavaScript code in multiple real browsers.
karma just launches a HTTP server,and generates the test runner HTML file,
karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流web浏览器，也可集成到CI工具，也可和其他代码编辑器一起使用，这个测试工具的一个强大特性就是可以监控文件的变化，然后自动执行，通过console.log显示测试结果。

./node_modules/karma/bin/karma init(用来生成karma.conf.js配置文件)
./node_modules/karma/bin/karma start karma.conf.js（run test）


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: ['*/test/*Spec.js'],


    // list of files to exclude
    exclude: ['karma.conf.js'],


    // 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
  })
}

Enzyme

JavaScript Testing utilities for React

Jest

它提供了一种“零配置”的开发体验，并具备诸多开箱即用的功能，比如 mock 和代码覆盖率。你不仅可以将此测试框架应用于 React.js 应用程序，也可以应用于其他 JavaScript 框架。

npm i jest-cli -g
jest src/helpers/__test__/a.js

Testing Assertions

Chai/Expect/Should

UI test

selenium
webdriverio
webdrivercss
https://www.codementor.io/jav...
http://stateofjs.com/2016/tes...