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

Question

这个问题与我打开的这个问题类似。但现在我正在使用一个不同的框架，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"));

我想在这里测试三件事：

1. injectTapEventPlugin()被召唤了。
2. ReactDOM.render分别使用预期的参数 <Application /> 和 document.getElementById("root") 调用。
3. 那./assets/styles/theme.css是进口的。我知道这个很奇怪，但是这个导入在这里，以便 webpack 拾取它并将其包含在最终捆绑包中。也许这个导入不应该存在，我应该确保theme.css文件以其他方式提交。

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

任何帮助都值得赞赏:)

Answer 1

测试这个问题的问题是模块只导入东西而不导出任何东西，这使得测试变得困难。所以你应该问自己的第一个问题是"为什么我需要测试这个"。因为这里发生的唯一想法是 2 个函数调用。

测试

#1很容易，用间谍模拟模块，将其导入测试并检查间谍被调用

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

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

对于测试 #2，我不确定是否可以进行测试，因为在测试中覆盖它之前，您无法模拟document.getElementBy