如何测试在 Jest 中调用了 ReactDOM.render 和另一个导入函数？

Question

这个问题类似于 I opened. But now I'm using a different framework, Jest。

我的代码是这样的：

import * as React from "react";
import * as ReactDOM from "react-dom";

import * as injectTapEventPlugin from "react-tap-event-plugin";

import Application from "./components/Application";

import "./assets/styles/theme.css";

injectTapEventPlugin();

ReactDOM.render(<Application />, document.getElementById("root"));

我想在这里测试 3 个东西：

injectTapEventPlugin() 被调用。
ReactDOM.render 分别使用预期参数 <Application /> 和 document.getElementById("root") 调用。
./assets/styles/theme.css 已导入。我知道这个很奇怪，但是这个导入是为了让 webpack 将它捡起来并将它包含在最终的包中。也许这个导入不应该存在，我应该确保 theme.css 文件以其他方式加载。

我认为至少需要测试 1 和 2...Jest 使用 Jasmine2，我也在使用 Enzyme（但这可能对这里没有帮助）。

感谢任何帮助:)

Answer 1

测试这个的问题是模块只导入东西但不导出任何东西，这使得很难测试。所以你应该问自己的第一个问题是"Why do I need to test this"。因为这里发生的唯一想法是 2 个函数调用。

测试 #1 很简单，用 spy 模拟模块，将其导入测试并检查是否调用了 spy

import * as injectTapEventPlugin from "react-tap-event-plugin"; 
jest.mock('react-tap-event-plugin', ()=>jest.fn())

expect(injectTapEventPlugin).toHaveBeenCalled()

不确定 import * as 语法在这种情况下是否有问题。

对于测试#2，我不确定它是否可以测试，因为你无法模拟 document.getElementBy 因为它在你可以在测试中覆盖它之前被调用。

如何测试在 Jest 中调用了 ReactDOM.render 和另一个导入函数？

How to test that ReactDOM.render and another imported function were called in Jest?

unit-testing

reactjs

jasmine

jestjs

enzyme