Jest 会在每次套件或测试后重置 JSDOM 文档吗？

Question

我正在测试一些组件，这些组件在安装和卸载时会超出其 DOM 结构，以提供其他方式无法实现的特定交互功能。

我正在使用 Jest 和默认的 JSDOM 初始化在节点中创建类似浏览器的环境。我在文档中找不到任何建议 Jest 在每次测试执行后重置 JSDOM 的内容，如果不是这种情况，也没有关于如何手动执行此操作的明确文档。

我的问题是，Jest 是在每次测试、套件后重置 JSDOM 实例，还是在所有测试运行中保留一个 JSDOM 实例？如果是这样，我该如何控制它？

Answer 1

要更正（误导性的）已接受的答案并明确强调来自先前评论之一的非常重要的信息：

No. Jest does not clean the JSDOM document after each test run! It only clears the DOM after all tests inside an entire file are completed.

这意味着 您必须在每次测试运行之后手动清理在测试期间创建的资源 。否则它会导致共享状态，从而导致非常难以跟踪的非常细微的错误。

以下是在 jest 测试套件中的每个单独测试后清理 JSDOM 的非常简单但有效的方法：

describe('my test suite', () => {
  afterEach(() => {
    document.getElementsByTagName('html')[0].innerHTML = ''; 
  });

  // your tests here ...
});

Answer 2

Rico Pfaus 是对的，尽管我发现按照他建议的方式重置 innerHTML 破坏性太大并导致测试失败。相反，我发现选择一个我想从文档中删除的特定元素（通过 class 或 id）更有效。

describe('my test suite', () => {
    afterEach(() => {
        document.querySelector(SOME CLASS OR ID).innerHTML = ''
    })
})

Jest 会在每次套件或测试后重置 JSDOM 文档吗？

Does Jest reset the JSDOM document after every suite or test?

testing

jestjs

jsdom