JEST JS Visual Regression Test - By pass Modals.

jest-page-with-modal-test.js

import puppeteer from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
expect.extend({ toMatchImageSnapshot });
import config from '../config';

let page;
let browser;

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const checkForSurvey = async page => {
    const SELECTOR =
        'button[data-modal="identify"]';
    await timeout(300); // animation loading
    if ((await page.$(SELECTOR)) !== null) {
        await page.click(SELECTOR);
        await timeout(300); // animation unloading
    }
};

export default checkForSurvey;

beforeAll(async() => {
    browser = await puppeteer.launch({
        args: ['--no-sandbox', '--enable-features=NetworkService', '--ignore-certificate-errors', '--disable-web-security'],
        headless: false,
        // slowMo: 80,
        ignoreHTTPSErrors: true,
        devtools: true
    });

    page = await browser.newPage();
});

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

describe('Diagram Coponent: Visual Regression Test MDS Home Page', () => {

    test('Home page screenshot should match', async() => {
        await page.setViewport({ width: 375, height: 2000 });
        await page.goto(config.pageUrl);
        // Check for Welcome Modal and close if it exists.
        await checkForSurvey(page);
        const screenshot = await page.screenshot();

        expect(screenshot).toMatchImageSnapshot();
    });

    test('MDS Clinical Data should match', async() => {

        await page.goto('http://v2-clg-revhcp.lndo.site/mds/clinical-data/');
        const screenshot = await page.screenshot();

        expect(screenshot).toMatchImageSnapshot();
    });
});