javascript - Problems with async code in Jest tests - Stack Overflow

admin管理员组

文章数量:1405574

I am having problem with getting the code into the beforeAll function finish and wait for the promise that resolves the storyLinks. The console log at the end of the snippet returns undefined but I need it to return the hrefs of the stories in my storybook. I cannot wrap this into an async function because of the testing pipeline being clogged on fail.

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
const timeout = 5000;
describe('visual tests', () => {

  let page, browser, storyLinks;
  const selector = `a[href*="selectedStory="]`;
  beforeAll(async() => {
    browser = await puppeteer.connect({browserWSEndpoint});
    page = await browser.newPage();
    await page.goto('http://localhost:8080');
    await page.evaluate(() => {
      const ponents = Array.from(document.querySelectorAll('div[data-name]'));
      for(let i = 1; i < ponents.length; i++) {
        ponents[i].addEventListener('click',() => {});
        ponents[i].click();
      }
    });

    storyLinks = await page.evaluate((selector) => {
      const stories = Array.from(document.querySelectorAll(selector));
      const links = stories.map(story => {
        let href = story.href;
        let name = story.text.replace(/[^A-Z0-9]/ig, '-').replace(/-{2,}/,'-');
        let ponent = href.match(/selectedKind=(.*?)\&/).pop();
        return {href: href, name: ponent + '-' + name};
      });
      return links;
    }, selector);
  }, timeout);

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

  console.log(storyLinks);

}, timeout);

I am having problem with getting the code into the beforeAll function finish and wait for the promise that resolves the storyLinks. The console log at the end of the snippet returns undefined but I need it to return the hrefs of the stories in my storybook. I cannot wrap this into an async function because of the testing pipeline being clogged on fail.

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
const timeout = 5000;
describe('visual tests', () => {

  let page, browser, storyLinks;
  const selector = `a[href*="selectedStory="]`;
  beforeAll(async() => {
    browser = await puppeteer.connect({browserWSEndpoint});
    page = await browser.newPage();
    await page.goto('http://localhost:8080');
    await page.evaluate(() => {
      const ponents = Array.from(document.querySelectorAll('div[data-name]'));
      for(let i = 1; i < ponents.length; i++) {
        ponents[i].addEventListener('click',() => {});
        ponents[i].click();
      }
    });

    storyLinks = await page.evaluate((selector) => {
      const stories = Array.from(document.querySelectorAll(selector));
      const links = stories.map(story => {
        let href = story.href;
        let name = story.text.replace(/[^A-Z0-9]/ig, '-').replace(/-{2,}/,'-');
        let ponent = href.match(/selectedKind=(.*?)\&/).pop();
        return {href: href, name: ponent + '-' + name};
      });
      return links;
    }, selector);
  }, timeout);

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

  console.log(storyLinks);

}, timeout);

• javascript
• async-await
• jestjs
• puppeteer

Share Improve this question Follow asked Nov 16, 2017 at 16:46 Ruxandra AnghelRuxandra Anghel 17311 gold badge22 silver badges66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There's a few things I notice might be causing your issues. You need to add async to your describe block. Also, "describe" groups together multiple tests so you're missing an it or test block. Jest docs also note adding the expect.assertions(NUM_OF_ASSERTIONS); I'd do something like:

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
const timeout = 5000;

async function myStoryLinkTest(page) {
  const selector = `a[href*="selectedStory="]`;

  await page.goto('http://localhost:8080');

  await page.evaluate(() => {
    Array.from(document.querySelectorAll('div[data-name]'), item => {
      item.addEventListener('click', () => {});
      item.click();
    });
  });

  const storyLinks = await page.evaluate(selector => {
    return Array.from(document.querySelectorAll(selector), story => {
      let href = story.href;
      let name = story.text.replace(/[^A-Z0-9]/gi, '-').replace(/-{2,}/, '-');
      let ponent = href.match(/selectedKind=(.*?)\&/).pop();
      return { href: href, name: ponent + '-' + name };
    });
  });

  return storyLinks;
}

describe('visual tests', async () => {
    let page, browser;

    beforeAll(async () => {
      browser = await puppeteer.connect({ browserWSEndpoint });
      page = await browser.newPage();
    });

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

    it('should do something with storyLinks', async () => {
        expect.assertions(1);
        const storyLinkResult = await myStoryLinkTest(page);
        expect(storyLinkResult).toEqual('Some value you expect');
     }, timeout);
  });

本文标签： javascriptProblems with async code in Jest testsStack Overflow