Using React Jest Enzyme - How to pass a constructor object to my component with Shallow?

Question

using react with typescript, jest and enzyme. trying to unitest a functional component, which has an object as parameter:

const JobListItem: React.FC<{ job: IJob }> = ({ job }) => {

in my test - this is how i try to setup the component:

const setup = (props={ }) => {
    const wrapper = shallow(<JobListItem<{ job: IJob }> {...props} />)
    return wrapper;
}

with simpler components (which don't have the IJob - just props) the setup works with this syntax:

const setup = (props={}) => {
    const wrapper = shallow(<JobList {...props} />)
    return wrapper;
}

what am i missing? how can i pass the "IJob" to the shallow? the error i'm receiving is:

(property) job: IJob expected 0 type arguments but got 1

wentjun wentjun · Accepted Answer · 2020-01-04T13:55:05

If you wish to provide generics typings to your component wrapper, you can simply do this:

describe('Test <JobListItem /> component', () => {
  it('sample test', () => {
     const props = {
        job: .....,
     }
     const JobListItemComponent = <JobListItem {...props} />
     const wrapper = shallow<IJob>(JobListItemComponent);
  });

 });

This will provide typechecking, and ensure that the wrapper will only take in props of type IJob.

Or, if you just want to make the changes to your code, do not supply the props with a default empty object, because it is not of IJob type.

const setup = (props: IJob) => {
    const JobListItemComponent = <JobListItem {...props} />
    const wrapper = shallow<IJob>(JobListItemComponent);
    return wrapper;
}

Using React Jest Enzyme - How to pass a constructor object to my component with Shallow?

1 Answers