Компонент Jest mock material-ui для проверки их рендеринга

Question

Я хочу проверить следующий код с Jest.Я просто пытаюсь смоделировать компонент MenuItem, чтобы увидеть, сколько раз он был вызван, но вместо этого я получаю сообщение об ошибке.

Также я сталкивался с этим вопросом, но компонент Material-ui рендерился со странными именами.

Тогда я закончил здесь , но ни один из ранее отвеченных вопросов не работал для меня.

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

test.js

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import { SimpleSelect } from './SimpleSelect';
import { shallowWithTheme, mountWithTheme } from '../helper';

describe('SimpleSelect component', () => {
  jest.mock('@material-ui/core/MenuItem', () => jest.fn(() => {}));
  let callback;
  beforeEach(() => {
    callback = jest.fn();
  });

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

ошибка

Отредактировано

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

Ошибка

ошибка с другими попытками

Отредактировано: 14 декабря, 19

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

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

версия компонента в стиле 4

"styled-components": "^4.1.1"

вывод wrapper.debug ()

с мелкой оболочкой

с креплением-оберткой

Answer 1

Кроме того, вы не можете издеваться над конструктором таким образом, вам вообще не нужно его издеваться.

Используя shallow() вместо mount + find вы можете проверить количествоMenuItem.Также проверьте, как работает .mockClear() - вам не нужно создавать пересмотренный обратный вызов.

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);
  });
});