如何使用 React-testing-library 或 jest 在反应路由器中测试通过 Link 传递的道具

Question

how do I test props which is pass to other page as given below I have created a object of name merchant which need to be passed to other page which I am passing as a props in Link. and accessing value using useLocation and setting to dropdown

const {merchantData} = useLocation();

I want to write a test case for this, but how to test it which has passed as props

const merchant = {
value:"abc123",
label:"abc",
data:{
   id:1,
   name:abc
  }
}
<Link to={{ pathname: `/administration/person/add`,merchantData: merchant }}> Create Person</Link>

Answer 1

You could mock history.push in your test, then click on your Link , and expect that history.push has been called, with the correct parameters:

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('my component', () => {
  beforeEach(() => {
    history.push = jest.fn();
  });

  it('passes correct parameters when following the link', () => {
    rtl = render(
      <Router history={history}>
        <MyComponent />
      </Router>
    );

    // we assume that MyComponent contains the Link you provided
    userEvent.click(rtl.getByText('Create Person'));
    expect(history.push).toHaveBeenCalledWith({
      pathname: '/administration/person/add',
      merchantData: { /* your object */ }
    });
  });
});

But you should pass additional informations in the state property of the to props: https://v5.reactrouter.com/web/api/Link/to-object

<Link to={{ pathname: `/administration/person/add`, state: { merchant } }}>Create Person</Link>

If you do so, you will need to modify the above test accordingly.