Nightwatch 中的 React 组件测试

概述

Nightwatch 中的 React 组件测试可使用我们的官方 @nightwatch/react 插件使用，该插件基于 vite-plugin-nightwatch 插件构建。React 插件在内部管理自己的 Vite 开发服务器，因此它可以在任何项目中使用，无论项目是否使用 Vite。

安装

步骤 1。

可以使用以下命令从 NPM 安装 @nightwatch/react 插件

npm install @nightwatch/react

步骤 2。

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

module.exports = {
  plugins: ['@nightwatch/react']
}

步骤 3。

a. 非 Vite 项目

@nightwatch/react 插件在内部管理自己的 Vite 开发服务器，因此如果您在项目中尚未使用 Vite，那么您已经完成（暂时）。

b. 已经使用 Vite

如果您已经拥有一个 Vite 项目，那么 @nightwatch/react 插件将尝试使用现有的 vite.config.js 或 vite.config.ts（如果找到其中一个）。您也可以通过插件选项提供不同的 Vite 配置文件（参见下文）。

更新 vite.config.js 并添加 vite-plugin-nightwatch 插件

import nightwatchPlugin from 'vite-plugin-nightwatch'


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

编写测试

使用 JSX + 组件故事格式

从版本 2.4 开始，Nightwatch 支持使用 JSX 运行 React 组件测试，这些测试是用 组件故事格式 (CSF) 子集编写的。CSF 是一个基于 ES6 模块的 开放标准，由 Storybook 引入。

文件名必须使用 .jsx 或 .tsx 作为扩展名。在最简单的形式中，组件测试如下所示

import Form from '../components/Form.jsx';


export default {
  title: 'Form',
  component: Form,
}


export const FormStory = () => <Form />

在组件测试方面，“故事”是指具有道具或参数的特定组件的表示。在我们的具体情况下，它是一个单独的 export const 声明。

• 详细了解 使用组件故事格式编写测试

不使用 JSX

此插件仅提供 mountComponent 命令，该命令可用于单独挂载组件，并可选择地使用一组给定的道具。

配置

我们设计了 @nightwatch/react 插件以使用合理的默认配置工作，但在某些更高级的场景中，您可能需要更改某些配置选项。

Vite 开发服务器

默认情况下，Nightwatch 将尝试自动启动 Vite 开发服务器。您可以通过在 nightwatch.conf.js 文件的 vite_dev_server 字典下添加以下内容来禁用它。

这对于基于 Vite 的其他组件测试插件（如 @nightwatch/vue 插件）是通用的。

module.exports = {
  plugins: ['@nightwatch/react'],
  vite_dev_server: {
    start_vite: true,
    port: 5173
  }
}

插件选项

该插件接受一些配置选项，这些选项可以在使用项目中现有的 vite.config.js 文件时设置。

- renderPage

指定要使用的自定义测试渲染器的路径。包中包含一个默认渲染器，但此选项可以覆盖该值。

export default {
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin({
      renderPage: './src/test_renderer.html'
    })
  ]
}

示例

const component = await browser.mountReactComponent('../../../src/components/Form.jsx')

describe('user info test', function() {
  let component;
  

  before(async () => {
    component = await browser.mountComponent('../../../src/components/UserInfo.jsx', function() {
      return {
        date: new Date(),
        text: 'I hope you enjoy reading Ulysses!',
        author: {
          name: 'Leopold Bloom',
          avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Poldy.png'
        }
      }
    });
  });
  

  it('should render the component without error', function() {
    browser.expect(component).to.be.visible;
  })
})

加载静态资产

在单独加载组件时，通常需要加载其他静态资产，例如 CSS 文件，这些文件包含组件使用的样式。

除了在 (JSX) 测试文件中直接加载资产外，Nightwatch 还提供了两种方法来实现这一点

1. 在当前项目中创建一个 nightwatch/index.jsx 文件
2. 创建一个全新的测试渲染器文件，并在 Vite 插件 中使用 renderPage 选项

示例项目

我们整理了一个用 React 编写并在 Vite 之上构建的基本待办事项应用程序，可以用作样板。可以在 https://github.com/nightwatchjs-community/todo-react 中找到它

推荐内容

• 博客 > 在 Nightwatch 中介绍组件测试