Question

我有以下使用样式组件的组件：

import styled from 'styled-components';

const ColumnTitle = styled.h3`
  color: green;
`;

const column = (props) => {
  return (
    <ColumnTitle>{props.title}</ColumnTitle>
  )
};

我正在尝试测试（使用酶/ jest）column组件呈现包含指定文本的h3（我不是要尝试测试任何样式，我只是想知道正在呈现）：

test('column contains h3 with correct text', () => {
  const column = shallow(
    <Column title={'heading'} />
  );
  const ColumnTitle = styled.h3`color: green;`;
  expect(column.contains(<ColumnTitle>heading</ColumnTitle>)).toEqual(true);
});

我尝试了几种变体，但测试总是失败。如果我只是测试该列包含单词heading，那么它就会通过，即：

expect(column.contains('heading')).toEqual(true);

但我想测试该列是否包含h3元素，而该元素又包含正确的文本。如果我console.log(column.debug())：

，这就是我得到的

<styled.h3>
  heading
</styled.h3>

我尝试了以下也失败了：

expect(column.contains(<styled.h3>heading</styled.h3>)).toEqual(true);

有什么建议吗？

检查React组件是否包含样式化组件

0 个答案: