Skip to main content
Cypress应用

React组件测试

info
学习内容​
  • 如何在React中设置组件测试
  • 如何将Cypress与不同的React框架和打包工具结合使用

框架支持​

Cypress组件测试目前支持React 18和19，并与以下框架兼容：

教程​

访问入门指南，获取逐步教程，了解如何为项目添加组件测试并编写第一个测试用例。

安装​

要在React中开始使用Cypress组件测试，请先将Cypress安装到项目中：

npm install cypress --save-dev

打开Cypress：

npx cypress open
选择组件测试

选择组件测试

Cypress启动向导将引导您完成项目配置。

info

如需创建组件测试的逐步指南，请参考入门指南。

查看使用方法和示例，请访问React示例指南。

框架配置​

Cypress组件测试开箱即支持Vite、Next.js和自定义Webpack配置。Cypress在设置过程中会自动检测这些框架并进行正确配置。以下示例供参考。

Vite构建的React应用​

Cypress组件测试支持使用Vite 4+作为打包工具的React应用。

Vite配置​

const { defineConfig } = require('cypress')
const customViteConfig = require('./customConfig')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      // 可选：传入vite配置
      viteConfig: customViteConfig,
      // 或使用函数 - 结果会与检测到的任何`vite.config`文件合并
      viteConfig: async () => {
        // ...自定义操作...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
})

Vite React示例项目​

Webpack构建的React应用​

Cypress组件测试支持使用Webpack 4+作为打包工具的React应用。

Webpack配置​

const { defineConfig } = require('cypress')
const webpackConfig = require('./webpack.config')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      // 可选：传入webpack配置
      webpackConfig,
      // 或使用函数 - 结果会与找到的任何webpack.config合并
      webpackConfig: async () => {
        // ...自定义操作...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
})

如果不提供webpack配置，Cypress会尝试自动推断。如果无法推断或需要修改配置，可以通过webpackConfig选项指定。

Webpack React示例项目​

Next.js应用​

Cypress组件测试支持Next.js 14和Next.js 15。

Next.js配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})

Next.js注意事项​

在组件测试中测试Next.js页面时需注意特定限制。

页面组件可能包含getServerSideProps或getStaticProps方法中的逻辑。这些方法仅在服务端运行，因此在组件测试中不可用。尝试在组件测试中测试页面会导致传入页面的props为undefined。

虽然可以在组件测试中直接向页面组件传递props，但这会使服务端方法未经测试。而端到端测试可以完整执行和测试页面。

因此，我们建议对Next.js页面使用端到端测试，对Next.js应用中的独立组件使用组件测试。

Next.js示例项目​

社区资源​

目录