Question

Jest：- TypeError：无法读取未定义的属性（读取“params”）。jest 中出现错误

2022-02-11

9957

javascript reactjs unit-testing jestjs

我在 React 中有以下组件。我只简短地介绍一下

export interface EditCertificateProps {
    id:string;
}

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

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

当我进行 Jest 测试时，它会抛出错误。

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 属性和 params 属性。

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

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

  ...
}

此 match 属性需要在单元测试中提供。您正在创建一个 props 对象，因此您可以将其扩展到 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>
);

* 由于没有 DOM，因此使用 MemoryRouter 进行单元测试