jest.fn() 用于测试 React 组件的具体示例是什么？

Question

我找到了几个答案（ , What is the difference between jest.mock(module) and jest.fn(), ...) as well as the docs + testing example in react-boilerplate但我仍然不知道如何在实践中使用它。

你能提供一个具体的例子，解释 发生了什么 "under the hood" 和什么新的 (jest.fn()) returns，当用于测试 React 组件时[的DOM]?

Answer 1

我通常使用 jest.fn() 来定义需要检查 调用次数 的模拟函数。对于使用 redux-thunk 的异步操作创建者，我通常会模拟调度并查找调用了多少类型以及向其传递了哪些参数。为了测试作为 props 传递给组件的函数，我使用 jest.fn() 来模拟它们并将它们作为 props 注入；然后我检查它们是否从组件内正确调用。如果您的问题更具体地说明您要测试的是什么类型的东西，那将会很有帮助？否则，不要使用不需要的东西

如果你的组件需要一些props，你一定要在挂载时传递它们。制作一个像

这样的对象

const props = { ... };

具有所有必要的属性，无论是字符串、数字、数组还是对象。

对于函数，您可以使用模拟函数创建变量：

const someFunction = jest.fn();

然后将其包含在您的 props 对象中：

const props = { ..., someFunction };

然后，像<Component {...props} />一样挂载组件。我建议使用 shallow，因为嵌套组件应该在单独的一组测试中自行测试。

如果您使用 Redux 之类的东西，您可以直接导出组件而无需连接。除了导出到装饰组件外，还要写以下内容：

export default connect(...)(YourComponent);
// For testing purposes:
export { YourComponent };

然后您可以在我上面提到的 props 对象中根据 mapDispatchToProps 定义任何必要的内容。还要确保正在调用的任何函数实际上都传递给了 props。我曾经在测试一些功能并意识到它们是组件方法功能并且不是通过道具传递的。在那种情况下，使用 wrapper.instance.someMethod() 到 call/reference 它们。

jest.fn() 用于测试 React 组件的具体示例是什么？

What is a concrete example of jest.fn() used to test a React component?

reactjs

jestjs