Test if Material-UI withStyles component with required PropTypes is rendered?

Question

I'm new to unit testing and having trouble testing whether a Material-UI withStyles component with required propTypes is rendering children Material-UI elements.

profile.js

const StaticProfile = (props) => {
  const { classes, profile } = props
}

return (
  <Paper>
    <div>
      <MuiLink></MuiLink>
      <Typography>
      <LocationOn>
      <LinkIcon>
      <Calendar>
    </div>
  </Paper>
)

profile.test.js

describe('<StaticProfile />', () => {
  let shallow;
  let wrapper;

  const myProps = {
    profile: {},
    classes: {}
  }

  beforeEach(() => {
    shallow = createShallow();
    wrapper = shallow(<StaticProfile {...myProps} />);
  })

  it('should render a Paper element', () => {
    expect(wrapper.find(Paper).length).toBe(1);
  })
})

However, it doesn't seem like the component is rendered at all with this error received.

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

Could someone please point me in the right direction?

Michael Michael · Accepted Answer · 2020-07-10T08:37:40

You should use wrapper.dive().find(Paper) because StaticProfile is wrapped by the withStyles higher order component.

Try this:

it('should render a Paper element', () => {
  expect(wrapper.dive().find(Paper)).toHaveLength(1);
})

Test if Material-UI withStyles component with required PropTypes is rendered?

1 Answers