I have below ponent in react. I put in short only

export interface EditCertificateProps {
    id:string;
}

export function EditCertificate(props: any) {
 injectStyle();

 const {id} = props.match.params;
 const history = useHistory();
}

When I am doing jest testing it is throwing error.

const id = '123';
describe('EditCertificate', () => {
    const params = {
        id: '123',
    };
    it('should render successfully', () => {
        const { baseElement } = render(<EditCertificate id={id} />);
        expect(baseElement).toBeTruthy();
    });
});

it is throwing error

from another ponent this page gets called like below.

  <SecureRoute path="/:id/edit" ponent={EditCertificate} />

I changed my testcase like below still error.

describe('EditCertificate', () => {
    const props = {
        match: {
            params: 123,
        },
    };
    it('should render successfully', () => {
        const { baseElement } = render(<EditCertificate {...props.match.params} />);
        expect(baseElement).toBeTruthy();
    });
});

what wrong I am doing?

I have below ponent in react. I put in short only

export interface EditCertificateProps {
    id:string;
}

export function EditCertificate(props: any) {
 injectStyle();

 const {id} = props.match.params;
 const history = useHistory();
}

When I am doing jest testing it is throwing error.

const id = '123';
describe('EditCertificate', () => {
    const params = {
        id: '123',
    };
    it('should render successfully', () => {
        const { baseElement } = render(<EditCertificate id={id} />);
        expect(baseElement).toBeTruthy();
    });
});

it is throwing error

from another ponent this page gets called like below.

  <SecureRoute path="/:id/edit" ponent={EditCertificate} />

I changed my testcase like below still error.

describe('EditCertificate', () => {
    const props = {
        match: {
            params: 123,
        },
    };
    it('should render successfully', () => {
        const { baseElement } = render(<EditCertificate {...props.match.params} />);
        expect(baseElement).toBeTruthy();
    });
});

what wrong I am doing?

• javascript
• reactjs
• unit-testing
• jestjs

Share Improve this question Follow edited Feb 11, 2022 at 7:56 Shruti sharma asked Feb 11, 2022 at 7:33 Shruti sharmaShruti sharma 21199 gold badges3333 silver badges9292 bronze badges 8

• 2 Why would that change fix anything? You still don't have a props.match at all, much less one with a params property. – jonrsharpe Commented Feb 11, 2022 at 7:37
• I renamed id to match and sent this .still getting error. ` const { baseElement } = render(<EditCertificate {...params.match} />);` – Shruti sharma Commented Feb 11, 2022 at 7:43
• 1 That makes even less sense, you're now trying to spread a string as props (which still doesn't itself have a match attribute). You need to know the basics of JSX syntax to render a ponent in this way. More broadly you need to think about the context that ponent needs to be rendered in for the hook to work. – jonrsharpe Commented Feb 11, 2022 at 7:47
• 1 The ponent under test is accessing a props.match.params, so it's expecting at least a match prop. Once you address and fix the props issue you'll next hit an issue with the useHistory hook and a missing routing context. – Drew Reese Commented Feb 11, 2022 at 7:55
• Hi @DrewReese I checked that as well. I have edited question at the end. could you please have a look? – Shruti sharma Commented Feb 11, 2022 at 7:56

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 2

The EditCertificate ponent is expecting a match prop with a params property.

export function EditCertificate(props: any) {
  injectStyle();

  const {id} = props.match.params;
  const history = useHistory();

  ...
}

This match prop needs to be provided in the unit test. You are creating a props object so you can just spread that into EditCertificate. Spread the entire props object, not props.match.params, the latter only spreads the individual params.

describe('EditCertificate', () => {
  const props = {
    match: {
      params: {
        id: 123, // <-- props.match.params.id
      },
    },
  };

  it('should render successfully', () => {
    const { baseElement } = render(<EditCertificate {...props} />);
    expect(baseElement).toBeTruthy();
  });
});

The next issue will be a missing routing context for the useHistory hook. You can provide a wrapper for the render util, or simply wrap EditCertificate directly.

const RouterWrapper = ({ children }) => (
  <MemoryRouter>{children}</MemoryRouter> // *
);

...

const { baseElement } = render(
  <EditCertificate {...props} />,
  {
    wrapper: RouterWrapper
  },
);

or

const { baseElement } = render(
  <MemoryRouter>
    <EditCertificate {...props} />
  </MemoryRouter>
);

* MemoryRouter used for unit testing since there is no DOM