Reactjs Jest模拟材质ui组件以检查其渲染

我想用Jest测试以下代码。我只是想模拟MenuItem组件，看看它被调用了多少次，但是我收到了一个错误

我还遇到了一个问题，但材质ui用奇怪的名称呈现了组件

然后我结束了，但所有预先回答的问题对我都不起作用

{
   menuItems.map(menuItem => (
    <MenuItem key={menuItem.value} value={menuItem.value}>
       {menuItem.description}
    </MenuItem>
   ))
}

错误

其他尝试出错

编辑日期：19年12月14日

wrapper.debug输出

与浅层说唱歌手

带封套

---

此外，您不能以这种方式模拟构造函数，您根本不需要模拟它

使用shallow而不是mount+可以检查MenuItem的计数。还要检查工作原理-您不需要重新创建模拟回调

describe('SimpleSelect component', () => {
  let callback = jest.fn();
  beforeEach(() => {
    callback.mockClear();
  });

  it('should render menu item', () => {
    const menuItems = [
      {
        value: '12',
        description: 'Description 123',
      },
      {
        value: '456',
        description: 'Description 456',
      },
    ];
    const wrapper = shallowWithTheme(<SimpleSelect className="test" label="test" selected="default" onChange={callback} menuItems={menuItems} />);
    expect(wrapper.find(MenuItem)).toHaveLength(12);
  });
});

---

谢谢，伙计，不幸的是那没用。我已经在我的网站上更新了截图question@Carlos，组件的导出主题和shallowWithTheme到底是什么样子的？我想你可能需要包装。潜水。找到。。。而不是包装器。查找。。。在这里，即使潜水，也不起作用。我仍在接收该对象。我已经用浅显更新了我的问题，因为包装器作为一个对象是可以的。返回什么？表与SimpleSelect和MenuItem的关系如何？

expect(wrapper.find(MenuItem)).toHaveLength(2); 
expect(wrapper.find(MenuItem).length).toHaveLength(2);
expect(wrapper.find(MenuItem).length).toBe(2);

export const shallowWithTheme = children => (
  shallow(children, { theme })
);

export const mountWithTheme = (children, options) => (
  mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options)
);

"styled-components": "^4.1.1"

describe('SimpleSelect component', () => {
  let callback = jest.fn();
  beforeEach(() => {
    callback.mockClear();
  });

  it('should render menu item', () => {
    const menuItems = [
      {
        value: '12',
        description: 'Description 123',
      },
      {
        value: '456',
        description: 'Description 456',
      },
    ];
    const wrapper = shallowWithTheme(<SimpleSelect className="test" label="test" selected="default" onChange={callback} menuItems={menuItems} />);
    expect(wrapper.find(MenuItem)).toHaveLength(12);
  });
});