小编Rux*_*hel的帖子

我想在这里做的是循环故事书故事,所以我可以对它们进行视觉回归测试:

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

test('no visual regression for button', async () => {
  const selector = 'a[href*="?selectedKind=Buttons&selectedStory="]';
  const browser = await puppeteer.launch({headless:false, slowMo: 350});
  const page = await browser.newPage();
  await page.goto('http://localhost:8080');


const storyLinks = await page.evaluate(() => {
  const stories = Array.from(document.querySelectorAll('a[href*="?selectedKind=Buttons&selectedStory="]'));
  const links = stories.map(story => story.href);
  return links;
});
 await storyLinks.forEach( (storyLink) => {
   page.goto(storyLink).then(async (res,rej) => {
     const screen = await page.screenshot();
     return await expect(screen).toMatchImageSnapshot();
   });
 }); …

我试图在我的项目中摆脱 Modernizr，但我似乎无法理解或找到 .mq 函数的替代品。有人可以解释或为我的问题提供一个简单的解决方案吗？

我在将代码放入beforeAll函数完成时遇到问题，并等待解决storyLinks的承诺。代码段末尾的控制台日志返回，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 …