Jest 與 puppeteer 一起使用

借助全局設(shè)置/拆卸和異步測試環(huán)境API，Jest 可以與puppeteer順利工作。

如果測試使用?page.$eval?，?page.$$eval?或者?page.evaluate則當(dāng)前無法使用 Puppeteer 為測試文件生成代碼覆蓋率。因?yàn)閭鬟f的函數(shù)在 Jest 的作用域之外執(zhí)行。查看GitHub 上的問題 #7962以獲取解決方法。

使用 jest-puppeteer 預(yù)設(shè)

Jest Puppeteer提供了使用 Puppeteer 運(yùn)行測試所需的所有配置。首先，安裝 jest-puppeteer

yarn add --dev jest-puppeteer

在 Jest 配置中指定預(yù)設(shè)：

{
  "preset": "jest-puppeteer"
}

寫你的測試：

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });
  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});

無需加載任何依賴項(xiàng)。Puppeteer 的?page?和?browser?類將自動公開

請參閱文檔。

沒有 jest-puppeteer 預(yù)設(shè)的自定義示例

可以從頭開始連接 puppeteer?；舅枷胧牵?/p>

1. 使用全局設(shè)置啟動并歸檔 puppeteer 的 websocket 端點(diǎn)
2. 從每個(gè)測試環(huán)境連接到 puppeteer
3. 使用 Global Teardown 關(guān)閉 puppeteer

這是 GlobalSetup 腳本的示例

// setup.js
const path = require('path');
const fs = require('fs');
const os = require('os');
const mkdirp = require('mkdirp');
const puppeteer = require('puppeteer');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
  const browser = await puppeteer.launch();
  // 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());
};

然后我們需要為 puppeteer 定制一個(gè)測試環(huán)境

// puppeteer_environment.js
const fs = require('fs');
const path = require('path');
const os = require('os');
const puppeteer = require('puppeteer');
const NodeEnvironment = require('jest-environment-node');
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);
  }
}
module.exports = PuppeteerEnvironment;

最后，我們可以關(guān)閉 puppeteer 實(shí)例并清理文件

// teardown.js
const os = require('os');
const path = require('path');
const rimraf = require('rimraf');
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);
};

完成所有設(shè)置后，我們現(xiàn)在可以像這樣編寫測試：

// 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,
);

最后，設(shè)置?jest.config.js?為從這些文件中讀取。（?jest-puppeteer?預(yù)設(shè)在幕后做了類似的事情。）

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

這是完整工作示例的代碼。