如何测试ReactJS样式数组

Question

我的组件如下

const TitleBreak = (props) => (
  <View style={[styles.container, props.style]}>
    <Text testID="title" style={styles.title}>
      {props.title}
    </Text>
  </View>
);

并且我在下面写我的测试

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

    expect(titleBreak).toHaveProperty('backgroundColor', color);
  });

并且由于样式的排列，上述测试失败了。但是我想测试backgroundColor是否已被红色覆盖，想知道应该如何进行测试？

Answer 1

也许带有toContaineEqual({ backgroundColor: 'red' })？

https://jestjs.io/docs/en/expect#tocontainequalitem

如果要检查数组中是否包含具有特定结构和值的项目，请使用.toContainEqual。为了测试数组中的项目，此匹配器以递归方式检查所有字段的相等性，而不是检查对象标识。

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