运行第一个 Jest/Puppeteer 测试时出现 TypeError

Question

我正在尝试在 Ubuntu 上集成 Jest 和 Puppeteer。我已仔细阅读本教程Using with puppeteer，但在运行第一次测试时出现此错误：

# npm test
[...]
 FAIL  ./test.js
  ● Test suite failed to run    
    TypeError: TestEnvironment is not a constructor
      at node_modules/jest-runner/build/run_test.js:88:25

这是我设置项目环境的方法：

~# mkdir jest-lab
~# cd jest-lab/
~/jest-lab# npm init -y
~/jest-lab# npm install --save-dev jest-puppeteer puppeteer jest

然后我复制并粘贴了教程Using with puppeteer中的文件。

我必须对文件 setup.js 进行一些自定义以添加选项“{args: ['--no-sandbox']}”。

这是我所有的项目文件：

jest.config.js

module.exports = {
  globalSetup: './setup.js',
  globalTeardown: './teardown.js',
  testEnvironment: './puppeteer_environment.js',
};

package.json：

{
  "name": "jest-lab",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^23.6.0",
    "jest-puppeteer": "^3.7.0",
    "puppeteer": "^1.11.0"
  },
  "jest": {
      "verbose": true
  }
}

puppeteer_environment.js：

// puppeteer_environment.js
const NodeEnvironment = require('jest-environment-node');
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const os = require('os');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');

class PuppeteerEnvironment extends NodeEnvironment {
  constructor(config) {
    super(config);
  }

  async setup() {
    await super.setup();
    // get the wsEndpoint
    const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf8');
    if (!wsEndpoint) {
      throw new Error('wsEndpoint not found');
    }

    // connect to puppeteer
    this.global.__BROWSER__ = await puppeteer.connect({
      browserWSEndpoint: wsEndpoint,
    });
  }

  async teardown() {
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

setup.js（定制为使用 --no-sandbox 运行 chrome）：

// setup.js
const puppeteer = require('puppeteer');
const mkdirp = require('mkdirp');
const path = require('path');
const fs = require('fs');
const os = require('os');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');

module.exports = async function() {
  const browser = await puppeteer.launch({args: ['--no-sandbox']});
  // store the browser instance so we can teardown it later
  // this global is only available in the teardown but not in TestEnvironments
  global.__BROWSER_GLOBAL__ = browser;

  // use the file system to expose the wsEndpoint for TestEnvironments
  mkdirp.sync(DIR);
  fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
};

teardown.js：

// teardown.js
const os = require('os');
const rimraf = require('rimraf');
const path = require('path');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function() {
  // close the browser instance
  await global.__BROWSER_GLOBAL__.close();

  // clean-up the wsEndpoint file
  rimraf.sync(DIR);
};

最后是测试文件 test.js：

// test.js
const timeout = 5000;

describe(
  '/ (Home Page)',
  () => {
    let page;
    beforeAll(async () => {
      page = await global.__BROWSER__.newPage();
      await page.goto('https://google.com');
    }, timeout);

    it('should load without error', async () => {
      const text = await page.evaluate(() => document.body.textContent);
      expect(text).toContain('google');
    });
  },
  timeout,
);

Answer 1

在“puppeteer_environment.js”末尾添加以下内容

module.exports = PuppeteerEnvironment;