Jestテストでの非同期コードの問題

Question

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

あなたの問題を引き起こしている可能性があることがいくつかあります。記述ブロックにasyncを追加する必要があります。また、グループを複数のグループに分けてグループ化しているため、グループやテストブロックが不足しています。 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); 
    });