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