如何测试反应组件道具（期望组件被调用）

Question

我需要测试在触发按钮点击后使用 opened={true} 属性调用 React 组件。我正在使用 testing-library（testing-library/react + testing-library/jest-dom）。

我使用类似

的方式模拟了组件

import Component from "./path-to-file/component-name"
...
jest.mock("./path-to-file/component-name", () => {
  return jest.fn().mockImplementation(() => {
    return null
  })
})

我首先尝试了：

expect(Component).toBeCalledWith(expect.objectContaining({"opened": true}))
expect(Component).toHaveBeenCalledWith(expect.objectContaining({"opened": true}))
expect(Component).toHaveBeenLastCalledWith(expect.objectContaining({"opened": true}))

但我得到了 Error: expect(jest.fn()).toBeCalledWith(...expected)。

expect.objectContaining({"opened": expect.anything()})

也是如此

甚至 expect(Component).toBeCalledWith(expect.anything())

区别在于空数组：

我也试过 expect(ChartMenu.mock).toBeCalledWith(expect.anything())。我得到了一个不同的错误，但仍然无法正常工作（这次错误是 Error: expect(received).toBeCalledWith(...expected) + Matcher error: received value must be a mock or spy function）

谢谢指教！

编辑：这是我要测试的组件的简化版本：

const Component = () => {
  const [chartMenuOpened, setChartMenuOpened] = useState(false)
  return (
      <Flex>
        <EllipseIcon onClick={() => setChartMenuOpened(true)}>
          +
        </EllipseIcon>
        <ChartMenu
          opened={chartMenuOpened}
          close={() => setChartMenuOpened(false)}
        />
      </Flex>
  )
}

基本上，我想确保当单击 + 图标时，菜单将被打开（或使用 open 值调用）。问题是我无法呈现 ChartMenu，因为它需要多个道具和 redux 状态。

我最终能够模拟 useState 以检查是否从图标组件正确调用了 setState（以确保组件的未来更改不会破坏此 using this post).

但我仍然非常感谢这个问题的答案：是否有任何方法可以在反应组件上创建间谍或类似的东西并检查它被调用的道具？主要是因为这是一个相当简单的例子，我只有一个状态。但情况可能并非总是如此。或者如果交互真的很受欢迎，关于如何正确测试这种类型的任何好主意。

Answer 1

我认为您在测试是否已使用该 prop 调用组件方面走在正确的轨道上，这可能是您代码中的语法问题

我从同事那里学到了这个技巧，你可以试试看这是否有助于解决你的问题。

expect(Component).toHaveBeenCalledWith(
  expect.objectContaining({
    opened: true,
  }),
  expect.anything()
);

如何测试反应组件道具（期望组件被调用）

How to test react components props (expect component to be called with)

reactjs

jestjs

react-testing-library

testing-library