Jest，Puppeteer，Typescript，ReferenceError:未定义Blob

Question

我正在开发一个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();
    ...
});

Answer 1

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

代码示例

下面是一个如何使用jest-puppeteer的示例：

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

问题修复

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

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

Answer 2

我发现我需要在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',
 }