React:Timeout - 在jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时时间内未调用异步回调

时间:2018-02-20 10:50:11

标签: reactjs asynchronous jestjs e2e-testing puppeteer

在我的反应应用程序中,我正在尝试使用puppeteer(jest)编写e2e测试。

test.js

  const puppeteer = require("puppeteer");

    let browser;
    let page;

    describe("LoginPage", () => {
     beforeAll(async () => {
     browser = await puppeteer.launch({
     headless: false,
     slowMo: 250
    });
      page = await browser.newPage();
    });

   it("should display login page", async () => {
     await page.goto("http://localhost:3000/");
     const text = await page.evaluate(() => document.body.innerText);
     expect(text).toContain("Unity");
   });

    it("should show error message if email is not correct", async() => {
      await page.type("#email", "user");
      await page.type("#password", "pass");
      await page.click("button[type=submit]";

            const errorMessage = await page.evaluate(
            async () =>
             document.getElementsByClassName("ui negative message container")[0]
            );
          console.log("errorMessage", errorMessage);
       });
    });

但是这个e2e测试无法使其发挥作用。

我收到错误:

Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

使用jest v23,我会尝试超时和一些次要版本的代码(查看评论):

const puppeteer = require("puppeteer");

let browser;
let page;

describe("LoginPage", () => {
  beforeAll(async() => {
    browser = await puppeteer.launch({
      headless: false,
      slowMo: 250
    });
    page = await browser.newPage();
  }, 60e3); // timeout

  afterAll(() => browser.close()); // <-- don't leave browser hanging after the suite

  beforeEach(() => page.goto("http://localhost:3000")); // start with fresh page between test, don't keep implicit page state dependency

  it("should display login page", async() => {
    const text = await page.evaluate(() => document.body.innerText);
    expect(text).toContain("Unity");
    done(); //here
  });

  it("should show error message if email is not correct", async() => {
    await page.type("#email", "user");
    await page.type("#password", "pass");
    await page.click("button[type=submit]");

    try { // you need to try catch the error with async await
      await page.evaluate(
        () => document.getElementsByClassName("ui negative message container")[0] // no need for async
      );
    } catch (errorMessage) {
      console.log("errorMessage", errorMessage);
    }
    
    // you lack the expectation in the test
    // expect(true).toBe(true)
  });
});