在整个测试中记录持久性问题答案

【问题标题】：Document persistence issue throughout tests在整个测试中记录持久性问题
【发布时间】：2018-08-31 22:18:57
【问题描述】：

我一直在用头撞墙，我这辈子都想不通这个问题。我正在使用 Jest (ts-jest) 和默认的 JSDOM 进行测试。

在我的测试中，我分别声明每个测试的文档内容。例如：

test('imageParentTest', () => {
    document.body.innerHTML = '<div><img class="foo"></div>';
    new HtmlElementsCheck()
    // assertions for checking parent, returns <div>
})

在第一个规范中一切正常。构造函数调用的方法返回元素的document.querySelectorAll('.' + this._configuration.className); 节点列表，我可以检查该列表，比较图像的父级，并进行必要的操作。到目前为止一切顺利。

如果我现在单独运行以下规范 (imageParentTest2)，它也会正常工作，但是，如果我运行共享测试上下文的两个规范（所以如果我运行 testContext），@987654326 @spec 不起作用，因为document.querySelectorAll('.' + this._configuration.className); 不断返回由imageParentTest 插入主体的元素列表。例如。

describe('testContext', () => {
        test('imageParentTest', () => {
            document.body.innerHTML = '<div><img class="foo"></div>';
            new HtmlElementsCheck();
            // assertions for checking parent, returns <div>
         });

         test('imageParentTest2', () => {
            document.body.innerHTML = '<picture><img class="foo"></picture>';
            new HtmlElementsCheck();
            // assertions for checking parent, returns <div> when running test via 'testContext',
            // returns <picture> when running test 'imageParentTest2' in isolation
         })
})

我已经尝试了一个解决方案，该解决方案据称可以重置文档，如 this stack overflow answer 中所述，通过添加

afterEach(() => {
    document.getElementsByTagName('html')[0].innerHTML = ''; 
});

然而，在testContext 的开头，据我所知，这在我的情况下是不必要的，因为无论如何我在每个测试中都设置了document.body.innerHTML。

我还尝试在beforeEach 中添加jest.resetModules(); 以确保不会缓存被实例化的类，并且我尝试使用--no-cache 标志运行测试。

那么，在我的第二个测试中，HtmlElementsCheck 类中的 document.querySelectorAll('.' + this._configuration.className); 怎么可能返回在第一个测试中插入正文中的元素的节点列表？

编辑：我刚刚验证过，该类本身是单独测试中的一个新实例，无论我是单独运行它们还是通过上下文运行它们，所以它看起来越来越好像主体不会以某种方式被覆盖我在上下文中运行这两个测试

【问题讨论】：

我已尝试隔离您的测试。看不到那些重复项
感谢@qballer，您是否尝试运行整个测试上下文？因为单独运行测试是有效的。只是当我尝试通过npm run test 或类似的方式运行它们时，当运行多个测试时，它们不起作用。不过，我的项目基本上是空白的，所以我不知道什么会影响它。

标签： javascript node.js typescript jestjs jsdom

【解决方案1】：

好的，看来问题不在于文档本身被持久化，而在于beforeAll 模拟了一个在我的类中执行的函数。由于这是模拟的，我的第二个测试检测到模拟被第一个测试的参数调用。

所以实际上是 mock 导致了问题（即使第二个测试断言该函数没有被调用）。

更改要在 beforeEach 中声明的模拟解决了该问题。

【讨论】：