Jest - Storyshot - getCustomBrowser - how to manage?

Question

Having issue where i want to use a custom browser for storyshot with jest but I'm having a hard time finding any example or docs about managing the browser lifecycle - it's just mentioned offhand. My initStoryshots looks like this

initStoryshots({
  suite: 'Image storyshots',
  storyKindRegex: /^((?!.*?skipImageSnapshot).)*$/,
  test: imageSnapshot({
    storybookUrl,
    getMatchOptions,
    getCustomBrowser: async () => {
      let browser = await puppeteer.launch({
        args: [
          '--no-sandbox ',
          '--headless',
          '--disable-setuid-sandbox',
          '--disable-dev-shm-usage',
          '--disable-lcd-text',
        ],
      });

      return browser
    }
  }),
});

So I'm not clear where I can add an afterAll or some other way to get the browser and .close() it?

Hoping to find some guidance here. Please let me know what details I can add.

Answer 1

Ok, solved it. Leaving record here for the next person:

Solution was to capture the testFn returned by imageSnapshot and override the afterAll on that.

let browser;

let afterAll = () => {
  if (browser) {
    browser.close();
  }
};

let testFn = imageSnapshot({
  storybookUrl,
  getMatchOptions,
  getCustomBrowser: async () => {
    browser = await puppeteer.launch({
      args: [
        '--no-sandbox ',
        '--headless',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-lcd-text',
      ],
    });
    return browser;
  },
});

testFn.afterAll = afterAll;

initStoryshots({
  suite: 'Image storyshots',
  storyKindRegex: /^((?!.*?skipImageSnapshot).)*$/,
  test: testFn,
});