在整个测试过程中记录持久性问题

Question

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

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

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

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

如果我现在单独运行以下规范 (imageParentTest2)，它也将正常工作，但是，如果我运行共享测试上下文的两个规范 (所以如果我运行 testContext)，imageParentTest2 规范不起作用，因为 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
         })
})

我已经尝试了一个据称重置文档的解决方案，如中所述，通过添加

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

在 testContext 的开头，但是，据我所知，在我的情况下应该没有必要，因为我在每个测试中都设置了 document.body.innerHTML。

我还尝试在 beforeEach 中添加一个 jest.resetModules(); 以确保实例化的 class 不被缓存，我已经尝试了运行ning 测试使用 --no-cache 标志。

所以，怎么可能在我的第二个测试中，document.querySelectorAll('.' + this._configuration.className); in HtmlElementsCheck class returns 元素的节点列表被插入到正文中在第一次测试中？

编辑：我刚刚验证过，class 本身是单独测试中的一个新实例，无论我是单独运行它们还是通过上下文同时运行它们，所以它看起来越来越像如果当我运行上下文中的两个测试时主体没有以某种方式被覆盖

Answer 1

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

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

更改要在 beforeEach 中声明的 mock 解决了这个问题。

在整个测试过程中记录持久性问题

Document persistence issue throughout tests

javascript

node.js

typescript

jestjs

jsdom