Jest mock material-ui component in order to check their rendering

Question

I want to test following code with Jest. I am simply trying to mock the MenuItem component to see how many times it has been called, but instead I'm receiving an error.

Also I came across this question but Material-ui rendered component with weird names.

Then I ended up here but none of pre answered question work for me.

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

error

Edited

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

Error

error with other attempts

Edited: 14 Dec, 19

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

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

styled-component version 4

"styled-components": "^4.1.1"

wrapper.debug() output

with shallowWrapper

with mountWrapper

score 1 · Answer 1 · answered Dec 12 '18 at 14:50

1

Besides you cannot mock constructor this way you don't need to mock it at all.

Using shallow() instead of mount + find you can check count of MenuItem. Also check how .mockClear() works - you don't need to recreate mocked callback.

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

answered Dec 12 '18 at 14:50

skyboyer

22,209
7
57
64

thanks mate, unfortunately that didn't work. I have update the screenshot in my question – Jitender Dec 12 '18 at 23:10
@Carlos, how does your component's export and `shallowWithTheme` exactly look like? I guess you may need `wrapper.dive().find(...)` instead of `wrapper.find(...)` here – skyboyer Dec 13 '18 at 03:08
Even with `.dive` it is not working. I am still receiving the object. I have updated my question with `shallowWithTheme` – Jitender Dec 13 '18 at 22:18
for enzyme it's ok for wrapper to be an object. what does [`wrapper.debug()`](https://airbnb.io/enzyme/docs/api/ShallowWrapper/debug.html) returns? – skyboyer Dec 13 '18 at 22:32
how `Table` is related to `SimpleSelect` and `MenuItem`? – skyboyer Dec 13 '18 at 23:25
oh, apologise I put wrong screenshot here. updated with correct one – Jitender Dec 14 '18 at 00:19

Jest mock material-ui component in order to check their rendering

1 Answers1