Problems with async code in Jest tests

Question

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 components = Array.from(document.querySelectorAll('div[data-name]'));
      for(let i = 1; i < components.length; i++) {
        components[i].addEventListener('click',() => {});
        components[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 component = href.match(/selectedKind=(.*?)\&/).pop();
        return {href: href, name: component + '-' + name};
      });
      return links;
    }, selector);
  }, timeout);

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

  console.log(storyLinks);

}, timeout);

jsilvax · Accepted Answer · 2017-11-17 07:28:08Z

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 component = href.match(/selectedKind=(.*?)\&/).pop();
      return { href: href, name: component + '-' + 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);
  });

async describe is no longer supported by Jest. You will get warning like ` Returning a Promise from "describe" is not supported. Tests must be defined synchronously.`

Collectives™ on Stack Overflow

Problems with async code in Jest tests

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related