Jest:- TypeError: Cannot read properties of undefined (reading 'params'). Error coming in jest

Question

我在反应中有以下组件。我只简写

export interface EditCertificateProps {
    id:string;
}

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

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

当我进行开玩笑测试时出现错误。

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

抛出错误

从另一个组件调用此页面，如下所示。

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

我像下面这样更改了我的测试用例仍然错误。

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

我做错了什么？

Answer 1

EditCertificate 组件需要 match prop 和 params 属性。

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

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

  ...
}

这个match道具需要在单元测试中提供。您正在创建一个道具对象，因此您可以将其散布到 EditCertificate 中。传播整个 props 对象，而不是 props.match.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();
  });
});

下一个问题是缺少 useHistory 挂钩的路由上下文。您可以为 render 实用程序提供一个 wrapper，或者直接包装 EditCertificate。

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

...

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

或

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

* MemoryRouter 用于单元测试，因为没有 DOM

Jest:- TypeError: Cannot read properties of undefined (reading 'params'). Error coming in jest

Jest:- TypeError: Cannot read properties of undefined (reading 'params'). Error coming in jest

javascript

unit-testing

reactjs

jestjs