Question

嗨，我正在尝试模拟以下React组件：

<Component content={data || {}}>
   {() => <ChildComponent/>}
 </Component>

我在模拟

中编写了以下模拟

import React from 'react';

const ComponentToMock = () => <div>A mock</div>;
export default ComponentToMock;

现在在我编写的测试文件中

    jest.mock('presentational/Component');
    it(`should render`, () => {
      let wrapper = shallow(<Component {...props} />);
      console.log(wrapper.debug());
  });

在控制台中，我得到了

<ComponentToMock content={1}>
  <undefined />
</ComponentToMock>

我只期待

<div>A mock</div>

有人可以帮助我发现我在做什么错吗？谢谢

Answer 1

期望children中有一个<Component />。

因此只需传递children：

 jest.mock('presentational/Component');
    it(`should render`, () => {
      let wrapper = shallow(<Component {...props}>A mock</Component>);
      console.log(wrapper.debug());
  });

应该工作。

通过这种方式，您无需自己创建模拟（如果我们正在谈论快照测试）。您可以生成它们，然后比较是否有所更改。检出Enzyme

Answer 2

我实际上发现，使用mount而不是浅调用了render方法，因此在我的模仿中，我写道：

const ComponentMock = props => {
  return props.content ? props.children() : null;
};
export default ComponentMock;`

用Jest模拟渲染道具React Component

2 个答案: