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

Question

这个问题类似于我打开的this previous one。但现在我使用的是不同的框架，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 件事：

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 很简单，使用 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，因为在您可以在测试中覆盖它之前调用它。