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

Question

我想要的是

我的代码广泛依赖于全局窗口对象（及其方法），而jsdom并未完全实现该对象，但在实际的浏览器环境中可用。因此，我想在操纵up页面上下文环境中运行单元测试，以便覆盖的代码（及其依赖项）可以访问真实的窗口对象。

问题

主要的问题是操纵up的人设计为在页面上下文之外运行e2e测试。我发现没有办法像jsdom那样在页面上下文中执行具体的测试套件，尽管它是公共接口/ GUI（这杀死了整个单元测试的想法），但没有运行整个构建。

我尝试了什么

我试图编写自定义测试环境以在puppeteer page.evaluate上下文中运行每个测试套件，该上下文可以访问窗口对象：

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序列化了评估参数，所以我找不到在上下文中进行runScript调用的方法。

我也尝试将评估窗口对象克隆到全局变量中，但由于相同的原因没有运气（序列化问题）

 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

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

我的代码广泛依赖于全局窗口对象（及其方法），该对象并未完全由 jsdom 实现，但在真实的浏览器环境中可用。

您使用的窗口范围中的哪些方法不在 jsdom 中？您能否提供一个简单的模拟窗口对象，其中包含这些方法的模拟版本？

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

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