如何测试ReactJS样式数组？样式覆盖测试失败求助

我明白你的问题了——你的TitleBreak组件把默认styles.container和传入的props.style合并成了样式数组，而不是单个样式对象，所以直接用.prop('style')获取后调用toHaveProperty肯定会失败，因为数组本身没有backgroundColor这个属性。

这里有两种针对性的解决方法，分别适用于不同的测试场景：

方法1：检查数组中是否包含目标样式对象 #

如果你只需要验证传入的红色背景样式是否被正确传递到组件的style数组中，可以使用Jest的expect.arrayContaining和expect.objectContaining组合来匹配：

it('should render TitleBreak with backgroundColor: red', () => {
  const color = 'red';
  const titleBreakStyles = shallow(
    <TitleBreak style={{ backgroundColor: color }} />
  ).prop('style');

  // 验证样式数组中存在包含指定backgroundColor的对象
  expect(titleBreakStyles).toEqual(
    expect.arrayContaining([
      expect.objectContaining({ backgroundColor: color })
    ])
  );
});

方法2：合并样式数组后检查最终生效样式 #

如果你的核心需求是确认传入的红色背景覆盖了默认样式（比如默认样式里也有backgroundColor），那么可以用React Native的StyleSheet.flatten方法把样式数组合并成最终生效的单个样式对象，再验证属性：

import { StyleSheet } from 'react-native';

it('should render TitleBreak with backgroundColor: red', () => {
  const color = 'red';
  const titleBreakStyles = shallow(
    <TitleBreak style={{ backgroundColor: color }} />
  ).prop('style');
  
  // 合并样式数组为最终生效的样式对象
  const mergedStyles = StyleSheet.flatten(titleBreakStyles);
  // 验证最终背景色是传入的红色
  expect(mergedStyles.backgroundColor).toBe(color);
});

为什么方法2更适合你的需求？ #

因为StyleSheet.flatten会模拟React Native实际处理样式的逻辑：当样式数组中有重复属性时，后面的样式会覆盖前面的。这样测试出来的结果和组件实际渲染的样式完全一致，能准确验证“红色背景是否覆盖了默认样式”这个核心需求。

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