Nightwatch 中的组件测试介绍测试框架

去年 11 月，我们开始着手将组件测试添加到 Nightwatch 中，现在我很高兴地向大家介绍第一个可供公众使用的版本。目前，它支持 Vue 和 React 组件，但我们计划在不久的将来支持所有类型的 Web 组件。

Nightwatch 中的组件测试是合乎逻辑的下一步，因为我们涵盖了浏览器集成，并且内置了断言库和报告器。我们只需要一种快速可靠的方法来隔离渲染组件，为此，我们选择了 Vite - 由 Vue.js 项目团队创建的新一代前端构建工具。

下面我将尝试解释组件测试究竟是什么，以及 Nightwatch (v2.0) 如何解决与测试 Web 组件相关的各种问题。

组件测试概述

对单页面前端应用程序进行单元测试通常会带来一系列问题，这些问题需要超越传统的单元测试方法。为了可靠地隔离测试 Web 组件，我们需要能够先渲染它。

在测试 Web 组件时，组件的渲染方式至关重要。在很多情况下，使用真实浏览器进行渲染似乎有点过分，而且笨拙，会显著降低速度。例如，大型项目可能会有专门的质量保证团队负责端到端测试，在这种情况下，使用真实浏览器编写组件测试似乎没有必要，特别是如果它过于复杂或速度缓慢。

使用 JSDom 渲染

JSDom 是一个工具，它提供了使用 Node.js 虚拟渲染器渲染 Web 组件的可能性，而无需使用真实浏览器。一切都在 CLI 中进行，通常非常快。

以下是它的通常使用方式

使用 Karma TestRunner/Puppeteer 渲染

另一种流行的方法是使用类似于 Karma Runner 的工具，它是在大约 10 年前在 Google 创建的前端测试工具。这种方法还有其他变体，其中使用了 Puppetter 和基于浏览器的 Mocha。

在这种方法中，所有需要的文件都加载到测试渲染器页面，所有操作都在其中进行：组件与其依赖项和任何所需的测试工具一起加载，然后渲染组件，并在同一个浏览器上下文中执行测试。它看起来有点像这样

在 Nightwatch 中渲染

以上两种方法在运行测试和调试方面都很好，但是它们都存在一些明显的局限性。

使用 JSDom 渲染 的局限性很明显：没有真实的浏览器。但是，需要考虑的优势是速度和对操作系统级 API 的访问，这将使加载文件或生成高级报告等任务变得更加直接。

另一方面，使用 Karma Runner 或类似方法时，优势很明显：所有操作都在浏览器中进行，因此测试更加可靠。但是，缺点是处理外部文件并不直接，而且报告也有限。我还发现配置非常困难，因为通常必须将多个工具组合在一起才能使其正常工作。

Nightwatch 的目标是通过扩展其跨浏览器 CLI 测试运行器和内置断言库，并提供一个集成且易于使用的解决方案来结合这两种方法。Nightwatch 已经支持在所有主要浏览器中进行端到端测试，并且自带内置报告和对并行的支持。

以下是 Nightwatch 运行组件测试的方式

CLI 测试运行器启动一个真实的浏览器并导航到一个基本 HTML 页面（测试渲染器）
在测试渲染器中，它注入 Vue 或 React 测试实用程序，然后挂载需要测试的组件，可以选择指定插件列表（在 Vue 的情况下，例如存储或路由器）或 React 的情况下指定道具。
组件成功渲染后，将向 Nightwatch CLI 运行器发送一个指向 DOM 元素的引用。
CLI 运行器继续以与进行端到端测试相同的方式运行测试；断言在 Node.js 上下文中执行。

什么是 Vite？

Vite 是一个非常快的现代 Web 应用程序构建工具，最初是为 Vue.js 应用程序创建的，但现在也支持 React 和其他 UI 框架。Vite 是法语中的“快”的意思，这是非常恰当的，因为在现有的前端构建工具中，Vite 是最快的，而且也是最容易使用的构建工具之一。

如果您使用过 Babel 或 Webpack 等工具，您可能熟悉构建设置的复杂性和缓慢的启动时间所带来的问题。Vite 设法通过提供一个开箱即用的工具来解决所有这些问题，该工具利用了现代浏览器的全新功能，可以直接处理 ES 模块，因此无需使用 Babel 等工具。

此外，Vite 在内部使用 ESBuild 来捆绑 Javascript 代码和相关资产，这似乎是速度最快的工具之一。

它是如何工作的？

目前，Nightwatch 中的组件测试是通过我们新的 vite-plugin-nightwatch 插件在使用 Vite 的项目中提供的。我们的最初目标是支持 React 和 Vue 组件，以便我们能够从社区收集一些最初的反馈。

在 Vue 和 React 支持稳定之后，我们将扩展到添加其他框架，例如 Svelte 和 Lit。

安装

目前，新的 Vite 插件可以从 NPM 使用以下命令安装

npm install vite-plugin-nightwatch

配置

更新您的 Vite 配置

import { defineConfig } from 'vite'
import nightwatchPlugin from 'vite-plugin-nightwatch'

export default defineConfig({
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin()
  ]
})

vite.config.jsc

更新您的 Nightwatch 配置，并将插件添加到列表中

module.exports = {
  plugins: ['vite-plugin-nightwatch'],
  // ... other nightwatch settings
}

nightwatch.conf.js

有关更多使用详情、示例和 API 文档，请访问 GitHub 页面

完整示例

我们还为 React 和 Vue 都创建了示例项目，展示了如何使用该插件。

这两个项目都在不断开发中，因此请密切关注它们以获取更新。

Vue 组件示例测试

以下是一个基本的 Vue 组件测试示例。它测试了一个用 Vue 编写的基本表单组件，该组件可在此处获得，作为插件的一部分。

describe('Render Vue Component test', function() {
  let formComponent;

  before(async function() {
    formComponent = await browser.mountVueComponent('/test/components/vue/Form.vue', {});
  });

  it('checks the vue component', function(browser) {
    browser.expect.element(formComponent).to.be.present;
    browser.setValue('#movie-input', 'Fargo');

    const inputEl = formComponent.find('input[type="radio"][value="3"]');

    browser.expect(inputEl).to.be.present;

    browser.click(inputEl);

    browser.expect(formComponent.property('rating')).to.equal('3');
    browser.expect(formComponent.property('title')).to.be.a('string')
        .and.equal('Fargo');
  });

});

此处提供了示例 Vue 组件测试：https://github.com/nightwatchjs/vite-plugin-nightwatch/blob/main/test/specs/vue/testVueComponent.js

您可以像运行其他 Nightwatch 测试一样运行它，也可以克隆/派生项目并运行包含的测试。

git clone git@github.com:nightwatchjs/vite-plugin-nightwatch.git
npm install
npx nightwatch test/specs/vue/testVueComponent.js --env vue

确保 Vite 开发服务器已启动并运行，使用以下命令：

npm run dev

以编程方式从 Nightwatch 运行 Vite 开发服务器

也可以从 Nightwatch 全局 before 钩子启动 Vite 开发服务器，并在 after 钩子中关闭它。

我们的插件正是这样做的，以便运行自己的测试，相关详细信息在 Readme 中提供。未来的 Nightwatch 插件版本将开箱即用地提供此功能，您将能够运行组件测试，无论您的项目是否基于 Vite。

调试组件测试

调试 Nightwatch 中的组件测试不像调试普通的 Node.js 应用程序或服务那样直接，因为 Nightwatch 需要将渲染组件的代码注入到浏览器中。

但是，在 Chrome 中运行测试时，您可以使用 DevTools 在浏览器中直接进行调试。为此，Nightwatch 提供了 2 个 CLI 标志

--devtools - 启用此标志后，Chrome DevTools 将自动打开
--debug - 这将导致测试执行在组件渲染后立即暂停

使用 Nightwatch 进行组件测试的优势

使用 Nightwatch 进行组件测试的主要优势和动机是易用性和与端到端测试方式的一致性。使用 Nightwatch，您已经安装了所有内容，因此在测试方面无需进一步配置。

由于测试是由 CLI 测试运行器完成的，因此我们还可以访问 操作系统级 API，并且还可以访问 Vite 运行器 API，因此我们可以直接在 Vite 和 Nightwatch 之间进行更高级的集成，但我们将把这留到以后的更新中。

唯一的缺点是它会比 JSDom 渲染器和可能还有 Karma Runner 慢一些。但是，我相信它可以通过提供更可靠、更易于使用的解决方案、更好的报告以及总体上更好的体验来弥补。启用并行处理后，我认为速度将不再是一个问题。

Nightwatch 中的组件测试介绍