Jest 测试中的异步代码问题

Question

我在将代码放入 beforeAll 函数完成并等待解决 storyLinks 的承诺时遇到问题。 sn-p 末尾的控制台日志返回undefined，但我需要它来返回我故事书中故事的href。由于测试管道在失败时被阻塞，我无法将其包装到异步函数中。

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);

Answer 1

我注意到有几件事可能会导致您的问题。您需要将异步添加到您的描述块。此外，“描述”将多个测试组合在一起，因此您缺少一个 it 或测试块。 Jest 文档还注意到添加了 expect.assertions(NUM_OF_ASSERTIONS);我会做类似的事情：

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);
  });