如何在Cypress组件测试中添加Chakra-UI样式

Chakra UI是基于CSS-in-JS实现的组件库，本身没有提供可直接导入的独立静态CSS文件，不需要额外找样式资源导入，直接通过组件包裹Provider的方式就能让所有样式正常生效，有两种常用实现方案：

方案1：全局配置（推荐，一劳永逸） #

直接修改Cypress组件测试的全局支持文件，让所有测试用例默认加载Chakra运行环境：

• 找到项目下的Cypress组件支持文件，JS项目路径一般为cypress/support/component.js，TS项目对应为cypress/support/component.ts
• 导入Chakra提供的Provider，如果你项目有自定义主题，也一并导入：

import { ChakraProvider } from '@chakra-ui/react'
// 有自定义主题就加下面这行，路径替换成你项目里主题文件的实际位置
// import theme from 'src/theme'
import { mount } from 'cypress/react'

• 重写全局的mount命令，给所有待渲染的测试组件自动套上ChakraProvider：

Cypress.Commands.add('mount', (component, options = {}) => {
  const { chakraProps = {}, ...mountOptions } = options
  const wrappedComponent = (
    <ChakraProvider theme={theme} {...chakraProps}>
      {component}
    </ChakraProvider>
  )
  return mount(wrappedComponent, mountOptions)
})

配置完成后，所有测试用例里直接调用cy.mount(你的组件)即可，Chakra的组件样式、主题变量、暗色模式等能力都会和项目实际运行效果完全一致，样式会自动注入到测试DOM中。

方案2：单测试文件单独配置 #

如果不想修改全局配置，只需要在单个测试用例里加载Chakra样式，直接在渲染组件的时候手动包裹ChakraProvider即可：

import { ChakraProvider } from '@chakra-ui/react'
import YourComponent from 'src/components/YourComponent'

it('组件渲染时Chakra样式正常生效', () => {
  cy.mount(
    <ChakraProvider>
      <YourComponent />
    </ChakraProvider>
  )
  // 后续写测试断言即可
})

注意：如果你使用的是v1版本的Chakra UI，Provider的导入路径为@chakra-ui/core，其余配置逻辑完全相同。不要尝试手动提取或找第三方导出的Chakra静态CSS文件，这类文件要么版本滞后，要么会丢失主题自定义、响应式断点、暗色模式等动态能力，直接套Provider是和生产环境表现最一致的方案。

内容的提问来源于stack exchange，提问作者Longviddd