用两个纯组件测试一个组件答案

【问题标题】：Testing a component with two pure components用两个纯组件测试一个组件
【发布时间】：2019-09-29 08:49:24
【问题描述】：

我有一个渲染图像横幅的组件。该组件利用数据专门在移动或桌面上呈现图像横幅。

我有两个纯函数组件来处理移动和桌面的情况。

这是它的外观示例

<ImageBanner>
   {mobile?.image && <MobileBanner mobile={mobile} />}
   {desktop?.image && <DesktopBanner desktop={desktop} />}
</ImageBanner>

MobileBanner 和 DesktopBanner 是纯函数式组件，它们只返回 html。我想为上面的组件写jest test，如何为组件ImageBanner写一个测试？

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

有一个非常简单的方法： 1. 如果mobile.image 存在 - <MobileBanner> 被渲染，mobile={mobile} 传递

it("renders MobileBanner is mobile passed`, () => {
  const mobile = {image: 'test'};
  const root = shallow(<YourComponent mobile={mobile} />);
  expect(root.find(MobileBanner).prop().mobile).toEqual(mobile);
  expect(root.find(DesktopBanner)).toHaveLength(0);
});

如果 desktop.image 存在 - <DesktopBanner 被渲染，desktop={desktop} 传递

it("renders DesktopBanner is mobile passed`, () => {
  const desktop = {image: 'test'};
  const root = shallow(<YourComponent desktop={desktop} />);
  expect(root.find(DesktopBanner).prop().desktop).toEqual(desktop);
  expect(root.find(MobileBanner)).toHaveLength(0);
});

即使mobile 和desktop 都是undefined - 没有错误（至少<ImageBanner> 被渲染）

it("does not fail if neither mobile nor desktop prop passed", () => {
  const root = shallow(<YourComponent />);
  expect(root.find(MobileBanner)).toHaveLength(0);
  expect(root.find(DesktopBanner)).toHaveLength(0);
  expect(root.find(ImageBanner).exists()).toBeTruthy();
});

【讨论】：