Javascript 嘲笑组件中的div/prop

我试图使用Jest来快照测试我的组件，它有一个

div

，这个div有时可能是空的，而另一些时候它又有其他内容，比如

组件

render() {
    return (
         <div>
            {this.props.children}
        </div>
    );
  }

我认为我做得不对。基本上，我只是想测试两种情况，一种是

div

为空，另一种是

div

有内容。

下拉列表

包含一系列内容，如

按钮文本

和

标题

和

onSelect

，但我不想测试这些内容

我也试过：

  it('renders a correct snapshot with div displaying something', () => {
    const renderer = new ShallowRenderer();
    const props = {
      prop1: 'prop1',
      prop2: jest.fn(),
    };

    const dropdown = <Dropdown />;

    const tree = renderer.render(<MyComponent {...props}<div>{dropdown}</div></MyComponent>);
    expect(tree).toMatchSnapshot();
  });

it（'呈现一个正确的快照，其中div显示一些内容'，（）=>{
常量渲染器=新的浅层渲染器（）；
常量道具={
prop1:‘prop1’，
prop2:jest.fn（），
};
常量下拉列表=；
const tree=renderer.render（您不需要模拟任何东西。只需以与在应用程序代码中完全相同的方式渲染组件即可。您的最后一个示例几乎正确。它缺少一个
：

const tree = renderer.render(<MyComponent {...props}><div><Dropdown/></div></MyComponent>);

const tree=renderer.render（）；

您可能需要这样做才能通过。
您需要模拟任何东西吗？
子项
是您通过的任何东西，因此只需例如
渲染（任何东西）
@jornsharpe-Hmm我刚才试过了，但是快照仍然是空的。两个测试用例都显示了一个空的
仍然。这就是我所做的：
const-tree=renderer.render（下载）；
好的，我让它与
const-tree=renderer.render一起工作（；
但是快照显示“`++``你知道为什么会显示
未知
吗？当你运行问题中的最后一个测试时会发生什么。我认为这一个最接近你想要的。嗯，即使在更新快照之后，它也会给出相同的结果：`exports[呈现一个正确的快照，其中div显示一些1]=下载数据`空的
div
仍然存在。@usershub123是的，如果
MyComponent
没有传递任何子项，它将呈现为
。当你传递一些子项时，它将呈现为
…无论子项呈现为什么…
@usershub123可能我理解错误明白你的意思。你应该编辑你的问题，以显示最终代码片段的结果。@usershub123为了简化测试，我建议不要使用
。而应该渲染一些更简单的内容，比如
这是孩子们的
。我想这是因为我有几个
div
。一旦我设置了prop exp合法地，
consttree=renderer.render（；
我让它工作了。
const tree = renderer.render(<MyComponent {...props}><div><Dropdown/></div></MyComponent>);