Jest测试中toHaveBeenCalledWith因意外空对象参数失败排查

你看到的“两个调用参数”是React函数组件的调用特性——函数组件在被渲染时，会被传入两个参数：

• 第一个是组件接收的props对象
• 第二个是组件的children内容（即使children为空，也会传入undefined或空数组）

你的测试里toHaveBeenCalledWith默认会校验所有传入的参数，但你只写了第一个参数的匹配规则，jest会认为第二个参数不匹配，导致测试失败。而toHaveBeenCalledTimes(1)是对的，因为Grid确实只渲染了一次，只是这次调用传了两个参数。

有两种简单的修复方式：

方式一：忽略第二个参数（推荐） #

用expect.anything()匹配第二个参数，这样我们只关注props是否正确，不管children是什么：

expect(mockedGrid).toHaveBeenCalledWith(
  expect.objectContaining({
    templateColumns: 'repeat(2, 1fr)',
  }),
  expect.anything()
);

方式二：精确匹配第二个参数 #

如果你的测试场景需要明确校验children（比如这次tiles是空数组，children为空），可以直接传入空数组匹配：

expect(mockedGrid).toHaveBeenCalledWith(
  expect.objectContaining({
    templateColumns: 'repeat(2, 1fr)',
  }),
  []
);

另外，如果你需要更灵活地校验调用参数，也可以用expect.arrayContaining或者其他jest匹配器来适配不同的children场景。

内容的提问来源于stack exchange，提问作者Leonardo Teixeira