使用 puppeteer 在具有 window 访问权限的真实浏览器环境中运行 jest 单元测试

Question

我想要的是

我的代码广泛依赖于 global window object （及其方法），它没有完全由 jsdom 实现，但在真实的浏览器环境中可用。 所以我想在 puppeteer 页面上下文环境中运行单元测试，以便覆盖代码（及其依赖项）可以访问真实的 window object。

问题

主要问题是 puppeteer 设计为在页面上下文之外运行端到端测试。 我发现没有办法像 jsdom 那样在页面上下文中执行具体的测试套件，而无需运行整个构建，尽管它是公共界面/GUI（这扼杀了整个单元测试的想法）。

我试过的

我尝试编写自定义测试环境以在 puppeteer page.evaluate 可以访问 window object 的上下文中运行每个测试套件：

const PuppeteerEnvironment = require('jest-environment-puppeteer');

module.exports = class TestEnvironment extends PuppeteerEnvironment {
  constructor(config) {
    super(config);
  }

  async runScript(script){
   if(this.global.page){
     return await this.global.page.evaluate((runner, script)=>{
       return runner(script);
     }, super.runScript, script)
   } else{
     return null;
   }
  }
};

但似乎 puppeteer 序列化评估 arguments 所以我找不到在其上下文中进行 runScript 调用的方法。

我还尝试将 evaluate window object 克隆到全局变量中，但出于同样的原因（序列化问题）没有任何运气

 async setup(config){
   const setupResult = await super.setup(config);
   const window = await this.global.page.evaluate( () => window)
   this.globals.window = window;
   return setupResult;
  }
};

Answer 1

我认为值得重新考虑你的假设......

我的代码广泛依赖于 global window object （及其方法），它没有完全由 jsdom 实现，但在真实的浏览器环境中可用。

您使用的 window scope 中的哪些方法不在 jsdom 中？ 您能否提供一个包含这些方法的模拟版本的简单模拟 window object？

所以我想在 puppeteer 页面上下文环境中运行单元测试，以便覆盖代码（及其依赖项）可以访问真实的 window object。...（这会扼杀整个单元测试的想法）

一旦开始在浏览器中运行代码，您可能会跨越单元测试和集成或端到端测试之间的界限。 我会看看你的代码，看看你是否可以抽象出依赖于 window scope 的逻辑，并专注于测试非窗口依赖代码。