时间戳

首页 > 解决方案 > 用两个纯组件测试一个组件

javascript - 用两个纯组件测试一个组件

问题描述

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

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

这是它的外观示例

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

MobileBanner并且DesktopBanner是仅返回 html 的纯功能组件。我想为上面的组件写一个笑话测试，我该如何为这个组件写一个测试ImageBanner？

标签： javascriptreactjsjestjsenzyme

解决方案

有非常简单的方法： 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);
});
  1. 如果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);
});
  1. 即使两者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();
});

推荐阅读