Rollup打包React组件库配置Cypress组件测试时如何返回自定义DevServer实例

由于Cypress仅内置支持Webpack/Vite的自动配置，使用Rollup时需要手动实现符合要求的DevServer实例，以下是具体实现步骤：

1. 安装依赖 #

安装Rollup开发服务及React编译相关的插件：

npm install --save-dev rollup-plugin-serve rollup-plugin-livereload @rollup/plugin-react @rollup/plugin-node-resolve @rollup/plugin-commonjs

2. 编写自定义Rollup DevServer逻辑 #

在项目根目录创建cypress-rollup-dev-server.js，实现Cypress要求的DevServer接口：

const rollup = require('rollup');
const serve = require('rollup-plugin-serve');
const livereload = require('rollup-plugin-livereload');
const react = require('@rollup/plugin-react');
const resolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const path = require('path');

module.exports = async function createRollupDevServer(cypressConfig) {
  // 定义适配Cypress的Rollup配置
  const rollupConfig = {
    input: path.resolve(__dirname, 'cypress/support/component-index.js'),
    plugins: [
      resolve(),
      commonjs(),
      react({ jsxRuntime: 'automatic' }),
      serve({
        port: cypressConfig.devServerPort || 2000,
        contentBase: [path.resolve(__dirname, 'cypress/component'), path.resolve(__dirname, 'dist')],
        open: false,
      }),
      livereload({
        watch: path.resolve(__dirname, 'cypress/component'),
      }),
    ],
    output: {
      file: path.resolve(__dirname, 'dist/cypress-component-bundle.js'),
      format: 'iife',
      sourcemap: 'inline',
    },
  };

  // 初始化Rollup构建与监听
  const bundle = await rollup.rollup(rollupConfig);
  await bundle.write(rollupConfig.output);
  const watcher = rollup.watch(rollupConfig);

  // 返回符合Cypress规范的DevServer实例
  return {
    listen: (port = cypressConfig.devServerPort || 2000) => Promise.resolve({ port }),
    close: () => {
      watcher.close();
      return bundle.close();
    },
  };
};

3. 创建Cypress组件测试入口 #

在cypress/support目录下新建component-index.js，用于加载全局资源：

import './commands';
// 引入组件库全局样式（如果有）
// import '../../src/index.css';

4. 配置Cypress主文件 #

修改cypress.config.js，接入自定义DevServer：

const { defineConfig } = require('cypress');
const createRollupDevServer = require('./cypress-rollup-dev-server');

module.exports = defineConfig({
  component: {
    devServer: async (cypressConfig) => createRollupDevServer(cypressConfig),
    specPattern: 'cypress/component/**/*.cy.jsx',
  },
});

5. 编写组件测试示例 #

在cypress/component目录下创建测试文件，比如Button.cy.jsx：

import React from 'react';
import { mount } from '@cypress/react';
import Button from '../../src/components/Button';

describe('Button Component', () => {
  it('renders button with correct label', () => {
    mount(<Button label="Test Button" />);
    cy.get('button').should('have.text', 'Test Button');
  });
});

注意事项 #

• 若组件库使用特殊Rollup插件（如样式处理插件），需将其添加到rollupConfig.plugins中
• 可根据项目目录结构调整配置中的路径参数
• cypressConfig.devServerPort用于避免端口冲突，优先使用Cypress指定的端口

内容的提问来源于stack exchange，提问作者Akshay Vijay Jain