Ответ состоит из двух частей: одна с обычным jest, а другая с jest-puppeteer. Вы можете перейти к jest-puppeteer, если хотите.

Проблема (с jest):

Блок browser и page внутри блока beforeAll не имеет отношения к блокам it. Он также не имеет никакого отношения к классу page внутри HomePage.

Вы не упомянули, использовали ли вы jest-puppeteer или нет.

Решение:

Создайте переменные области блока для блока описания и передайте объект страницы модулям.

Уточнение класса HomePage

Рассмотрим следующий класс HomePage.

// HomePage.js
class HomePage {
  constructor(page) {
    this.page = page;
  }

  async getScreenshot() {
    await this.page.screenshot({ path: "example.png" });
  }

  async getTitle(page) {
    return page.title();
  }
}

Как видите, есть два способа доступа к странице внутри класса. Либо передайте внутри конструктора, либо используйте с методом напрямую.

Метод getScreenshot имеет this.page, а getTitle имеет доступ к page.

Уточнение теста

Вы не можете использовать this внутри шутливых тестов из-за Эта проблема, но вы можете объявить переменную поверх блока, а затем получить к ней доступ позже.

describe("Example", () => {
  // define them up here inside the parent block
  let browser;
  let page;
  let homepage;

  beforeAll(async () => {
    // it has access to the browser, page and homepage
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    homepage = new HomePage(page); // <-- pass the page to HomePage here

    await page.goto("http://example.com");
    await page.waitForSelector("h1");
    return true;
  });
});

Теперь все остальные блоки могут получить доступ к странице. В соответствии с нашим предыдущим примером класса HomePage мы можем сделать одно из следующих действий в зависимости от того, как мы определили методы.

it("Gets the screenshot", async () => {
    await homepage.getScreenshot(); // <-- will use this.page
  });
it("Gets the title", async () => {
    await homepage.getTitle(page); // <-- will use the page we are passing on
});

Наконец мы очищаем тесты,

afterAll(async () => {
    await page.close();
    await browser.close();
    return true;
});

Вероятно, нам нужно запустить шуточные тесты с detectOpenHandles для полного режима.

jest . --detectOpenHandles

Результат:

Проблема (с jest-puppeteer):

jest-puppeteer уже дает вам глобальный браузер и объект страницы. Вам не нужно ничего определять.

Однако, если вы хотите использовать jest-puppeteer и expect-puppeteer, вам нужно использовать собственный файл конфигурации.

Решение:

Создайте файл jest-config.json и поместите содержимое,

{
  "preset": "jest-puppeteer",
  "setupFilesAfterEnv": ["expect-puppeteer"]
}

Теперь избавьтесь от браузера и кода создания страницы, а также от любых afterAll ловушек для page.close.

Вот рабочий тестовый файл,

class HomePage {
  async getTitle() {
    return page.$("h1");
  }
}

describe("Example", () => {
  const homepage = new HomePage();
  beforeAll(async () => {
    // it has access to a global browser, page and scoped homepage

    await page.goto("http://example.com");
    await page.waitForSelector("h1");
  });
  it("Gets the screenshot", async () => {
    const element = await homepage.getTitle();
    await expect(element).toMatch("Example");
  });
});

И давайте запустим это,

jest . --detectOpenHandles --config jest-config.json

Результат: