使用react-test-renderer为Styled React组件生成快照时遇错求助

完全可以为整个StaticContent组件生成Jest快照，你遇到的报错大概率是Jest未正确配置以处理MUI styled的样式转换，以下是针对性解决步骤：

1. 安装必要依赖 #

针对MUI v5的styled（基于Emotion），需要安装这些测试依赖：

npm install --save-dev @emotion/jest @testing-library/react @testing-library/jest-dom

2. 配置Jest #

在项目的jest.config.js（或package.json的jest字段）中添加如下配置：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
    '^.+\\.css$': '<rootDir>/node_modules/jest-transform-css',
  },
  // 如果你用styled-components作为MUI的样式引擎，需要添加下面的映射，否则可忽略
  moduleNameMapper: {
    '^@mui/styled-engine$': '@mui/styled-engine-sc',
  },
};

然后在src/setupTests.js中添加样式匹配器的扩展：

import '@testing-library/jest-dom';
import { matchers } from '@emotion/jest';
expect.extend(matchers);

3. 调整测试代码 #

确保测试用例正确渲染组件并生成快照：

import React from 'react';
import { render } from '@testing-library/react';
import StaticContent from './StaticContent';

describe('StaticContent', () => {
  it('matches snapshot', () => {
    const { asFragment } = render(<StaticContent />);
    expect(asFragment()).toMatchSnapshot();
  });
});

4. 处理Page和Footer子组件 #

针对需要单独处理的Page和Footer组件，有两种方案：

• 直接渲染真实组件：如果它们是纯展示型组件，无需额外处理，快照会自动包含它们的结构
• Mock子组件：若要隔离子组件的内部逻辑，可使用Jest的mock功能：

// 在测试文件顶部添加mock
jest.mock('./Page', () => () => <div data-testid="mock-page" />);
jest.mock('./Footer', () => () => <div data-testid="mock-footer" />);

按以上步骤配置后，就能成功生成包含完整结构的StaticContent组件快照。

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