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

Document persistence issue throughout tests

我一直在用头撞墙,我这辈子都想不通这个问题。我正在使用 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 本身是单独测试中的一个新实例,无论我是单独 运行 它们还是通过上下文同时 运行 它们,所以它看起来越来越像如果当我 运行 上下文中的两个测试时主体没有以某种方式被覆盖

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

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

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