npm 包 @test-runner/live-view 使用教程

前言

前端自动化测试的重要性越来越被大家所认识，而其中的一个难点是如何理解并且快速调试测试用例。本文要介绍的 @test-runner/live-view 这个 npm 包，可以帮助我们通过浏览器监控测试用例的执行，并实时显示测试结果，从而加速我们的开发和测试工作。

安装

首先，我们需要安装 @test-runner/live-view，可以通过以下命令完成：

npm install -g @test-runner/live-view

使用

在项目跟目录执行以下命令开启实时监测：

live-view

此时，浏览器会打开限定的端口，并且自动打开对应的网页。这个页面可以根据我们在每个测试用例中写的事件来实时变化。下面是一个例子，在客户端中有这么一个测试用例：

describe('测试用例', () => {
  it('1 + 1 应该等于 2', () => {
    expect(1 + 1).toBe(2);
  });
});

在运行 live-view 之后，我们可以看到如下的页面：

页面上会展示一个测试用例的列表，里面会包含每个用例的名称和运行的结果。有三种不同的状态：

• green：表示用例通过
• red：表示用例失败
• yellow：表示用例还在运行中

我们也可以通过在命令行中加 -v 参数，进入调试模式。调试模式下，live-view 会把每个测试用例的具体运行状态打印出来。

配置

除了命令行参数之外，我们还可以通过配置文件来调整 live-view 的行为。在项目根目录下，创建一个 test-runner.config.js 文件，然后添加以下的配置项：

module.exports = {
  module: {
    typescript: true,
  },
};

目前支持的配置项有：

module.typescript

• 类型：boolean
• 默认值：false
• 说明：是否使用 Typescript 来写测试用例。如果为 true，则需要在项目中添加 Typescript 相关依赖。

module.require

• 类型：Array
• 默认值：[]
• 说明：这个配置项用于在每个测试用例之前，全局引入一些依赖。

module.load

• 类型：Array
• 默认值：[]
• 说明：这个配置项用于在每个测试用例之前，通过 require 函数加载一些文件。

结语

@test-runner/live-view 是一个优秀的前端自动化测试工具，它能够大大方便我们的测试工作，并且提高我们的开发效率。希望本文能帮助到大家，也期待大家通过这个 npm 包来更好地实践前端自动化测试。

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