如何在Cypress组件测试中引入global.css并解决加载错误

问题根源 #

TailwindCSS 4的编译逻辑和旧版差异极大，直接在Cypress support文件引入globals.css会和Next.js App Router的样式隔离机制冲突，再加上Cypress组件渲染的时序问题，就会触发「Cannot read properties of null (reading 'parentNode')」这类DOM未初始化的错误。

方案1：集成Tailwind到Cypress Webpack配置（推荐） #

直接让Cypress的Webpack处理Tailwind编译，跳过手动引入CSS的步骤：

1. 修改cypress.config.ts，添加Tailwind相关的loader规则：

import { defineConfig } from 'cypress';
import tailwindConfig from './tailwind.config.ts';

export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: { importLoaders: 1 },
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
                      plugins: {
                        tailwindcss: tailwindConfig,
                        autoprefixer: {},
                      },
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    },
  },
});

2. 删掉cypress/support/component.ts里直接引入globals.css的代码，避免重复加载导致冲突。

方案2：延迟样式加载适配渲染时序 #

如果不想改Webpack配置，就通过Cypress钩子确保DOM初始化后再注入样式：

在cypress/support/component.ts里替换原引入代码为：

beforeEach(() => {
  cy.readFile('src/app/globals.css', 'utf8').then(css => {
    const styleTag = document.createElement('style');
    styleTag.textContent = css;
    document.head.appendChild(styleTag);
  });
});

或者用component:mount:before钩子：

Cypress.on('component:mount:before', () => {
  const linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = '/src/app/globals.css';
  document.head.appendChild(linkTag);
});

方案3：用测试专用包裹器引入样式 #

针对Next.js App Router的特性，创建一个带全局样式的测试包裹组件：

1. 在cypress/support下新建TestWrapper.tsx：

import '../src/app/globals.css';
import type { ReactNode } from 'react';

export default function TestWrapper({ children }: { children: ReactNode }) {
  return <>{children}</>;
}

2. 在组件测试中用这个包裹器包裹目标组件：

import TestWrapper from '../../support/TestWrapper';
import YourComponent from '../../../src/app/components/YourComponent';

describe('YourComponent', () => {
  it('renders with correct styles', () => {
    cy.mount(<TestWrapper><YourComponent /></TestWrapper>);
    // 示例：断言Tailwind样式生效
    cy.get('[data-testid="your-element"]').should('have.css', 'padding', '16px');
  });
});

额外排查要点 #

• 确保tailwind.config.ts的content数组包含Cypress测试文件路径：

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './cypress/**/*.{js,ts,jsx,tsx}', // 必须加这个，否则Tailwind不会生成测试组件的样式
  ],
  // 其他Tailwind配置
};

• 运行npx cypress cache clear清除缓存，再重新启动测试；
• 确认@cypress/react插件是最新版，保证和React 19、Next.js 16兼容。

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