使用 Jest/Enzyme 在 React 功能组件中测试封闭组件

Posted 2023-02-22

【中文标题】使用 Jest/Enzyme 在 React 功能组件中测试封闭组件

【英文标题】：Test enclosing component inside a React functional component using Jest/Enzyme

【发布时间】：2020-11-02 19:51:10

【问题描述】：

我有一个名为Post 的组件，其中有一个名为Div 的封闭组件。运行测试覆盖率时，Div 部分似乎没有被覆盖。然而，Post 被覆盖了。我怎样才能覆盖Div 部分。有人可以帮忙吗？

const Post = (id, title) => (
 <Div>
  <Title name=title />
 </Div>
);

这是我的测试用例

describe('Post component', () => 
  const props = 
    id: '1',
    title: 'Test',
  ;
  it('renders post', () => 
    const component = shallow(<Post ...props />);
    expect(component).toMatchSnapshot();
  );
);

【问题讨论】：

Div 和 Title 是什么？需要浅渲染吗？

这些是styled 组件，只是添加了填充和边距。

【参考方案1】：

根据您的评论，您似乎拥有名为 Div 和 Title 的样式化组件。如果你有它的函数的导出语句，你可以在这里通过发送它们的道具来调用它们，比如你如何对组件进行浅层测试。 如果你有类似的东西

export const Div = () => 

export const Title = () => 

export const Post = () => 

你的测试用例应该是

describe('Post component', () => 
  const props = 
    id: '1',
    title: 'Test',
  ;
  it('renders post', () => 
    const component = shallow(<Post ...props />);
    expect(component).toMatchSnapshot();
  );

 it('renders Div', () => 
    const component = shallow(<Div ...props />);
    expect(component).toMatchSnapshot();
  );

 it('renders Title', () => 
    const component = shallow(<Title ...props />);
    expect(component).toMatchSnapshot();
  );
);

这样，您将覆盖整个功能组件。