Next.js+Tailwind+daisyUI项目配置Cypress测试样式不生效问题

问题现象 #

已集成Tailwind CSS、daisyUI的Next.js应用，接入Cypress开展组件测试时，测试运行后仅渲染无样式的原生HTML结构，组件样式完全未加载，未达到预期渲染效果。

现有配置 #

• package.json脚本配置：

"scripts": {
  "tailwind-generate": " npx tailwindcss --input styles/globals.css --output styles/tailwind-generated.css"
}

• 测试文件cypress/__tests__/Button.cy.js代码：

import { mount } from 'cypress/react'
import Button from '../../components/Inputs/Button'

describe('<Button >', () => {
  it('mount', () => {
    mount(<Button label={'Hola'} />, { stylesheet: '@/styles/tailwind-generated.css' })
  })
})

• 异常运行效果：
  

故障原因 #

• Cypress组件测试环境默认不识别Next.js配置的@/路径别名，mount配置中传入的@/styles/tailwind-generated.css路径无法被正确解析，样式文件未实际加载
• Tailwind默认content扫描范围未包含Cypress测试目录，测试中用到的样式类会被tree-shake机制剔除
• 单测内单独引入样式的方式稳定性差，全局样式统一在Cypress支持文件中引入更可靠

修复步骤 #

1. 修改tailwind.config.js，将Cypress相关目录加入content扫描列表，同时确认daisyUI已正确注册为插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './cypress/**/*.{js,ts,jsx,tsx}' // 新增扫描Cypress目录下的文件
  ],
  plugins: [require("daisyui")], // 确认daisyui已在此处引入
}

2. 打开Cypress组件测试的支持文件（默认路径为cypress/support/component.js），通过相对路径全局引入全局样式文件，不要使用路径别名：

// 引入全局样式源文件，Cypress会自动处理Tailwind编译
import '../../styles/globals.css'
// 如果要使用预生成的CSS文件，替换为下面的引入即可
// import '../../styles/tailwind-generated.css'

3. 修改测试文件，移除mount方法中多余的stylesheet配置，全局样式会自动注入到测试环境：

import { mount } from 'cypress/react'
import Button from '../../components/Inputs/Button'

describe('<Button >', () => {
  it('mount', () => {
    mount(<Button label={'Hola'} />)
  })
})

4. 如果使用Cypress 10及以上版本，确认cypress.config.js中已正确配置Next.js框架的组件测试devServer，推荐使用官方适配的配置：

const { defineConfig } = require("cypress");

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

5. 重新运行测试前，先执行npm run tailwind-generate更新预生成的CSS文件（如果使用预生成方案的话），再启动Cypress组件测试即可看到正常样式。

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