Jest - Storyshot - getCustomBrowser - how to manage? - jestjs

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