Jest、Puppeteer、Typescript、ReferenceError：未定义 Blob答案

【问题标题】：Jest, Puppeteer, Typescript, ReferenceError: Blob is not definedJest、Puppeteer、Typescript、ReferenceError：未定义 Blob
【发布时间】：2020-01-09 08:34:17
【问题描述】：

我正在开发一个 Typescript 库并尝试使用 Jest 和 Puppeteer 编写测试。测试失败是因为ReferenceError: Blob is not defined。我遵循了 Jest 和 Jest-Puppeteer 的入门部分，但我仍然遇到这个问题。如果测试在浏览器中运行，如何不定义 Blob？我能做些什么来解决这个问题？

# jest.config.js
module.exports = {
    preset: 'jest-puppeteer',
    transform: {
        '^.+\\.ts$': 'ts-jest',
    },
};

# mylibrary.ts
function doSomething() {
  const blob = new Blob(...);
  return blob;
}

# mylibrary.spec.ts
it('should return a blob', function(){
    const b = doSomething();
    ...
});

【问题讨论】：

标签： jestjs puppeteer jest-puppeteer

【解决方案1】：

我发现我需要在我的 jest.config.json 中将 testEnvironment 从 node 更改为 jsdom。我的测试是我认为默认的 testEnvironment 是 jsdom，但是在使用 ts-jest 之后它变成了 node，所以我把它改回 jsdom 像这样

之前

 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
 };

之后

 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
 }

【讨论】：

【解决方案2】：

jest-puppeteer 允许您使用puppeteer。它不会自动将您的代码（应该在浏览器中运行）包装到浏览器中。

代码示例

这是一个应该如何使用jest-puppeteer 的示例：

it('...', async () => {
    await page.goto('...');
});

问题修复

如果您想在浏览器中测试整个网站，请使用jest-puppeteer。然后您需要启动本地服务器并使用 puppeteer 访问您的网站。

如果您想在服务器上运行客户端库，您可能需要使用 polyfill。你可以在你的情况下使用blob-polyfill。

【讨论】：