Next.js项目Cypress组件测试遇displayName读取错误求助

问题背景 #

现有正常运行的Next.js应用，Cypress E2E测试可正常执行，但在尝试挂载React组件进行组件测试时，抛出错误：

Cannot read properties of undefined (reading 'displayName')

已按照Cypress官方文档完成配置，并接受了yarn cypress生成的默认配置。曾尝试给组件添加displayName属性，现已移除，怀疑组件未被Cypress正确识别。

相关代码 #

测试代码（原错误版本） #

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

describe('NavBar.cy.ts', () => {
  it('playground', () => {
    cy.mount(`<NavBar />`);
  });
});

package.json #

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "gen": "graphql-codegen --config codegen.yml",
    "cypress": "cypress open"
  },
  "dependencies": {
    "@graphql-codegen/typescript-urql": "^3.6.1",
    "@urql/exchange-graphcache": "^4.4.3",
    "daisyui": "^2.22.0",
    "formik": "^2.2.9",
    "graphql": "^16.5.0",
    "next": "latest",
    "next-urql": "^3.3.3",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-is": "^18.2.0",
    "urql": "^2.2.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@cypress/react": "^6.1.1",
    "@cypress/webpack-dev-server": "^2.2.0",
    "@graphql-codegen/cli": "^2.8.0",
    "@graphql-codegen/typescript": "^2.7.1",
    "@graphql-codegen/typescript-operations": "^2.5.1",
    "@testing-library/cypress": "^8.0.3",
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "cypress": "^10.6.0",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "webpack": "^5.74.0",
    "webpack-dev-server": "^4.10.0"
  }
}

解决方案 #

1. 修复组件挂载方式（核心问题） #

原测试代码中使用模板字符串包裹JSX，导致Cypress接收的是字符串而非React组件实例，这是抛出displayName错误的直接原因。需移除模板字符串，直接传递JSX：

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

describe('NavBar.cy.ts', () => {
  it('playground', () => {
    // 移除模板字符串，直接传递JSX组件
    cy.mount(<NavBar />);
  });
});

2. 补充组件依赖的上下文 #

由于NavBar依赖urql的GraphQL客户端上下文，直接挂载会导致上下文缺失，需在测试中提供对应的Provider包裹组件：

import React from 'react';
import { mount } from '@cypress/react';
import { NavBar } from '../../components/NavBar';
import { Provider } from 'urql';
import { createClient } from 'urql';

// 创建测试用的urql客户端
const testClient = createClient({
  url: 'http://localhost:3000/api/graphql', // 匹配你的Next.js API端点
});

describe('NavBar.cy.ts', () => {
  it('playground', () => {
    cy.mount(
      <Provider value={testClient}>
        <NavBar />
      </Provider>
    );
  });
});

3. 验证组件导出方式 #

确保NavBar组件为命名导出，与测试中的导入方式匹配：

// NavBar.tsx
export const NavBar = () => {
  // 组件逻辑
  return (
    // JSX内容
  );
};

4. 确认Cypress配置正确性 #

检查cypress.config.ts中的组件测试配置，确保Next.js框架与webpack bundler配置正确：

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
});

总结 #

• 核心错误原因：使用模板字符串传递JSX，导致Cypress无法识别React组件
• 次要问题：组件依赖的urql上下文缺失，需在测试中补充Provider

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