I have a props with JSX.Element. How do I mock the same in the jest test

Question

Im my react component, I have props like below

interface Props {
  errorMessage: JSX.Element;
  addCommentCancel: () => void;
  triggerAddComment: () => void;
  showAddCommentForm: boolean;
}

and in the test I'm invoking the component like below

const props =  {
  errorMessage: {},
  addCommentCancel: () => jest.fn(),
  triggerAddComment: () => jest.fn(),
  showAddCommentForm: true
};
let wrapper = mount(<IncidentCommentList {...props} />);

I get an error

Type '{}' is not assignable to type 'Element'.

How do I mock props element?

As its name says JSX.Element either stands for JSX element(e.g. <span />) or is a string. Maybe null also works but I'm not sure. Did not find JSX.Element declaration in React or DefinitelyTypes so not filling "official answer" — skyboyer

magi magi · Accepted Answer · 2020-06-02T17:41:02

const props =  {
  errorMessage: <div>errorMessage</div>,
  addCommentCancel: () => jest.fn(),
  triggerAddComment: () => jest.fn(),
  showAddCommentForm: true
};
let wrapper = mount(<IncidentCommentList {...props} />);

The above code fixed the issue.

I have a props with JSX.Element. How do I mock the same in the jest test

1 Answers