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

Question

opened={true}我需要测试在单击按钮后是否使用 prop 调用反应组件。我正在使用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>
  )
}

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

我最终能够模拟 useState 来检查 setState 是否从图标组件中正确调用（以确保组件上不会有未来的更改，从而使用这篇文章破坏它）。

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

Answer 1

我认为您测试组件是否已使用该道具调用是正确的，这可能是代码中的语法问题

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

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