Jest集成Styled Components主题后测试失败的问题求助

我之前也踩过这个Styled Components+Jest+Enzyme的主题测试坑！给你几个亲测有效的解决方案，按优先级来试：

解决方案1：全局配置带主题的渲染函数（一劳永逸） #

这个方法能让所有测试自动带上主题，不用每个测试文件重复写ThemeProvider包裹逻辑，最推荐：

1. 新建或修改src/setupTests.js（Jest会自动执行这个文件）：

import { configure, shallow, mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; // 替换成你对应的React版本适配器
import { ThemeProvider } from 'styled-components';
import theme from './path/to/your/theme-file'; // 导入你的主题配置文件

// 初始化Enzyme适配器
configure({ adapter: new Adapter() });

// 自定义带主题的shallow函数
global.shallowWithTheme = (component) => {
  return shallow(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
};

// 自定义带主题的mount函数
global.mountWithTheme = (component) => {
  return mount(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
};

2. 在测试文件里替换原来的shallow/mount：

// 原来的写法（报错）
// const wrapper = shallow(<LooksBrowser />);

// 新写法
const wrapper = shallowWithTheme(<LooksBrowser />);
// 或者用mount
const wrapper = mountWithTheme(<LooksBrowser />);

这样你的Styled Components就能直接拿到theme，而且后续操作组件props时，只要找到你的组件实例即可：

// 正确修改组件props
wrapper.find('LooksBrowser').setProps({ color: '#333' });

解决方案2：在单测中正确使用ThemeProvider并操作组件props #

如果你不想全局配置，也可以在单个测试文件里手动包裹ThemeProvider，但要注意操作props的对象是你的组件，不是ThemeProvider：

import { ThemeProvider } from 'styled-components';
import theme from '../path/to/your/theme';
import LooksBrowser from './LooksBrowser';

test('renders slide title with correct theme styles', () => {
  // 用ThemeProvider包裹组件
  const wrapper = mount(
    <ThemeProvider theme={theme}>
      <LooksBrowser color="#fff" />
    </ThemeProvider>
  );

  // 重点：找到你的LooksBrowser组件实例再操作props
  const looksBrowserComponent = wrapper.find('LooksBrowser');
  looksBrowserComponent.setProps({ color: '#000' });

  // 断言逻辑，比如检查样式是否正确
  expect(looksBrowserComponent.find('SlideTitle').prop('style')).toMatchObject({
    fontFamily: theme.LooksBrowser.SlideTitle.FontFamily
  });
});

你之前遇到的setProps失效问题，就是因为直接给ThemeProvider的wrapper调用了setProps，而不是你的组件实例，现在改成找组件再操作就可以了。

解决方案3：Mock Styled Components的主题注入（适合shallow场景） #

如果必须用shallow且不想包裹ThemeProvider，可以通过mock Styled Components的方式默认注入主题：

// 在测试文件顶部mock styled-components
import styled from 'styled-components';
import theme from '../path/to/your/theme';

jest.mock('styled-components', () => {
  const originalStyled = jest.requireActual('styled-components');
  return {
    ...originalStyled,
    // 重写default方法，给所有styled组件默认注入theme
    default: (tag) => {
      const StyledComponent = originalStyled.default(tag);
      const ThemedComponent = (props) => (
        <StyledComponent theme={theme} {...props} />
      );
      return ThemedComponent;
    },
    // 还要导出ThemeProvider避免影响其他逻辑
    ThemeProvider: originalStyled.ThemeProvider,
  };
});

// 接下来正常写测试即可
test('renders correctly with mocked theme', () => {
  const wrapper = shallow(<LooksBrowser />);
  expect(wrapper).toMatchSnapshot();
});

这个方法比较hack，适合特殊场景，优先推荐前两个方案。

另外，你提到的shallow导致动画目标为空的问题，是因为shallow不会渲染组件的子节点，如果你的组件依赖DOM节点做动画，建议用mount或者mock掉动画相关的逻辑（比如jest.mock动画库）。

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