Utilisation avec puppeteer

Grâce aux API Global Setup/Teardown et Async Test Environment, Jest peut fonctionner sans problème avec puppeteer.

remarque

La génération de couverture de code pour les fichiers de test à l'aide de Puppeteer n'est actuellement pas possible si votre test utilise page.$eval, page.$$eval ou page.evaluate car la fonction passée est exécutée en dehors de la portée de Jest. Check out issue #7962 on GitHub for a workaround.

Utilisez le preset jest-puppeteer

Jest Puppeteer fournit toute la configuration requise pour exécuter vos tests en utilisant Puppeteer.

1. Tout d'abord, installez jest-puppeteer

npm

npm install --save-dev jest-puppeteer

Yarn

yarn add --dev jest-puppeteer

pnpm

pnpm add --save-dev jest-puppeteer

2. Spécifiez le preset dans votre configuration Jest :

{
  "preset": "jest-puppeteer"
}

3. Écrivez votre test

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });

  it('doit être titré "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});

Il n'y a pas besoin de charger des dépendances. Les classes page et navigateur de Puppeteer seront automatiquement exposées

Consultez la documentation.

Exemple personnalisé sans preset jest-puppeteer

Vous pouvez également brancher votre puppeteer à partir de zéro. L'idée de base est :

1. lancer & exposer le endpoint websocket de puppeteer avec Global Setup
2. se connecter à puppeteer depuis chaque environnement de test
3. fermer puppeteer avec Global Teardown

Voici un exemple du script GlobalSetup

setup.js

const {mkdir, writeFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');

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

module.exports = async function () {
  const browser = await puppeteer.launch();
  // stocke l'instance du navigateur pour pouvoir la démonter plus tard
  // ce global n'est disponible que lors du démontage, mais pas dans TestEnvironments.
  globalThis.__BROWSER_GLOBAL__ = browser;

  // utilise le système de fichiers pour exposer le wsEndpoint pour TestEnvironments
  await mkdir(DIR, {recursive: true});
  await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
};

Ensuite, nous avons besoin d'un environnement de test personnalisé pour puppeteer

puppeteer_environment.js

const {readFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');
const NodeEnvironment = require('jest-environment-node').TestEnvironment;

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 = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
    if (!wsEndpoint) {
      throw new Error('wsEndpoint not found');
    }

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

  async teardown() {
    if (this.global.__BROWSER_GLOBAL__) {
      this.global.__BROWSER_GLOBAL__.disconnect();
    }
    await super.teardown();
  }

  getVmContext() {
    return super.getVmContext();
  }
}

module.exports = PuppeteerEnvironment;

Enfin, nous pouvons fermer l'instance puppeteer et nettoyer le fichier

teardown.js

const fs = require('fs').promises;
const os = require('os');
const path = require('path');

const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
  // ferme l'instance du navigateur
  await globalThis.__BROWSER_GLOBAL__.close();

  // nettoie le fichier wsEndpoint
  await fs.rm(DIR, {recursive: true, force: true});
};

Avec toutes les choses mises en place, nous pouvons maintenant écrire nos tests comme ceci :

test.js

const timeout = 5000;

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

    it('doit être chargé sans erreur', async () => {
      const text = await page.evaluate(() => document.body.textContent);
      expect(text).toContain('google');
    });
  },
  timeout,
);

Enfin, configurez jest.config.js pour lire ces fichiers. (Le preset jest-puppeteer fait quelque chose comme ça sous le capot.)

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

Voici le code de l'exemple de travail complet.