使用 Jasmine 和 Karma 进行 Angular 单元测试的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是非常重要的。通过单元测试可以确保代码的质量，减少 bug 的产生，提高代码的可维护性和可扩展性。本文将介绍如何使用 Jasmine 和 Karma 进行 Angular 单元测试的最佳实践。

Jasmine

Jasmine 是一个流行的 JavaScript 测试框架，它提供了一些 DSL（领域特定语言）来编写测试用例。Jasmine 支持 BDD（行为驱动开发）和 TDD（测试驱动开发），并且可以在浏览器和 Node.js 环境中运行。

安装和配置

安装 Jasmine 可以通过 npm 来完成：

npm install jasmine --save-dev

安装完成后，在项目中创建一个 spec 目录，用来存放测试用例。在 spec 目录下创建一个 spec-runner.html 文件，用来运行测试用例。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Jasmine Spec Runner</title>
  <link rel="stylesheet" href="lib/jasmine-3.5.0/jasmine.css">
  <script src="lib/jasmine-3.5.0/jasmine.js"></script>
  <script src="lib/jasmine-3.5.0/jasmine-html.js"></script>
  <script src="lib/jasmine-3.5.0/boot.js"></script>
  <script src="../src/my-module.js"></script>
  <script src="my-spec.js"></script>
</head>
<body>
</body>
</html>

上面的代码中，我们引入了 Jasmine 的 CSS 和 JavaScript 文件，以及我们要测试的模块和测试用例文件。在浏览器中打开 spec-runner.html 文件，就可以看到测试结果了。

编写测试用例

下面是一个简单的测试用例示例：

// javascriptcn.com 代码示例
describe('MyModule', function() {
  var myModule;

  beforeEach(function() {
    myModule = new MyModule();
  });

  it('should be able to add two numbers', function() {
    expect(myModule.add(1, 2)).toEqual(3);
  });

  it('should be able to subtract two numbers', function() {
    expect(myModule.subtract(3, 2)).toEqual(1);
  });
});

上面的代码中，我们使用 describe 函数定义一个测试套件，里面包含了两个测试用例。在每个测试用例之前，我们使用 beforeEach 函数创建一个新的 MyModule 实例。在测试用例中，我们使用 expect 函数来断言测试结果是否符合预期。

Karma

Karma 是一个测试运行器，可以在真实浏览器中运行测试用例。Karma 支持多种测试框架，包括 Jasmine、Mocha、QUnit 等。使用 Karma 可以方便地进行单元测试和集成测试，并且可以自动化运行测试用例。

安装和配置

安装 Karma 可以通过 npm 来完成：

npm install karma karma-jasmine jasmine-core karma-chrome-launcher --save-dev

安装完成后，在项目中创建一个 karma.conf.js 文件，用来配置 Karma。

// javascriptcn.com 代码示例
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'spec/**/*.js'
    ],
    preprocessors: {
      'src/**/*.js': ['coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        { type: 'html', subdir: 'html' },
        { type: 'lcov', subdir: 'lcov' }
      ]
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  });
};

上面的代码中，我们配置了要测试的文件和测试框架，以及生成测试覆盖率报告。我们还配置了浏览器和自动运行测试用例。在命令行中运行 karma start karma.conf.js 命令，就可以启动 Karma 了。

编写测试用例

下面是一个在 Karma 中运行的测试用例示例：

// javascriptcn.com 代码示例
describe('MyModule', function() {
  var myModule;

  beforeEach(function() {
    myModule = new MyModule();
  });

  it('should be able to add two numbers', function() {
    expect(myModule.add(1, 2)).toEqual(3);
  });

  it('should be able to subtract two numbers', function() {
    expect(myModule.subtract(3, 2)).toEqual(1);
  });
});

上面的代码和之前的 Jasmine 测试用例是一样的。在 Karma 中运行测试用例时，它会自动启动浏览器，并在浏览器中运行测试用例。我们可以在浏览器的控制台中查看测试结果和测试覆盖率报告。

最佳实践

使用 beforeEach 函数

在测试用例中，我们经常需要创建新的实例或者初始化一些变量。这时候可以使用 beforeEach 函数，在每个测试用例之前执行一些操作。

// javascriptcn.com 代码示例
describe('MyModule', function() {
  var myModule;

  beforeEach(function() {
    myModule = new MyModule();
  });

  it('should be able to add two numbers', function() {
    expect(myModule.add(1, 2)).toEqual(3);
  });

  it('should be able to subtract two numbers', function() {
    expect(myModule.subtract(3, 2)).toEqual(1);
  });
});

使用 spyOn 函数

在测试用例中，我们经常需要模拟一些函数的行为。这时候可以使用 spyOn 函数，来模拟函数的调用和返回值。

// javascriptcn.com 代码示例
describe('MyModule', function() {
  var myModule;

  beforeEach(function() {
    myModule = new MyModule();
  });

  it('should be able to add two numbers', function() {
    spyOn(myModule, 'add').and.returnValue(3);
    expect(myModule.add(1, 2)).toEqual(3);
  });

  it('should be able to subtract two numbers', function() {
    spyOn(myModule, 'subtract').and.callThrough();
    expect(myModule.subtract(3, 2)).toEqual(1);
    expect(myModule.subtract.calls.count()).toEqual(1);
  });
});

使用 describe 和 it 函数

在编写测试用例时，我们可以使用 describe 和 it 函数来组织测试用例，使测试代码更加清晰明了。

// javascriptcn.com 代码示例
describe('MyModule', function() {
  var myModule;

  beforeEach(function() {
    myModule = new MyModule();
  });

  describe('add function', function() {
    it('should be able to add two numbers', function() {
      expect(myModule.add(1, 2)).toEqual(3);
    });

    it('should return NaN if any argument is not a number', function() {
      expect(myModule.add(1, '2')).toEqual(NaN);
    });
  });

  describe('subtract function', function() {
    it('should be able to subtract two numbers', function() {
      expect(myModule.subtract(3, 2)).toEqual(1);
    });

    it('should return NaN if any argument is not a number', function() {
      expect(myModule.subtract(3, '2')).toEqual(NaN);
    });
  });
});

使用覆盖率报告

在编写测试用例时，我们可以使用覆盖率报告来检查测试用例的覆盖率，以此来检查测试用例是否覆盖了所有的代码路径。

// javascriptcn.com 代码示例
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'spec/**/*.js'
    ],
    preprocessors: {
      'src/**/*.js': ['coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        { type: 'html', subdir: 'html' },
        { type: 'lcov', subdir: 'lcov' }
      ]
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  });
};

上面的代码中，我们使用 coverage 插件来生成测试覆盖率报告。在浏览器中打开 coverage/html/index.html 文件，就可以查看测试覆盖率报告了。

总结

本文介绍了如何使用 Jasmine 和 Karma 进行 Angular 单元测试的最佳实践。通过使用这些技术，我们可以编写高质量的测试用例，提高代码的可维护性和可扩展性。希望本文对你有所帮助，也欢迎大家在评论区留言讨论。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506ec2995b1f8cacd286662