Diffs returning errors instead of fails

[ruxiang05]

When there is a diff between the images, the tests throw an error instead of returning a failed test. Is that a normal behaviour or how shall I handle failed test?

[anescobar1991]

@ruxiang05 can you provide an example or sample repo showing how you are using it and tell me what version you are using? I have not seen that issue. The matcher is supposed to fail the test just the same as any other matcher.

[ruxiang05]

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });

test('visual regression', async (done) => {
const selector ='a[href*="selectedStory="]';
const browser = await puppeteer.launch();
const 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();
}
})
let iframe = await page.$('#storybook-preview-iframe');
const clip = Object.assign({}, await iframe.boundingBox());

let 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)
.then(async (storyLinks) => {
for(let i = 0; i < storyLinks.length; i++){
const storyLink = storyLinks[i];
await page.goto(storyLink.href);
const screen = await page.screenshot({clip: {x:clip.x, y: clip.y, width: clip.width, height: clip.height}});
await expect(screen).toMatchImageSnapshot({customSnapshotIdentifier: storyLink.name});
done();
}
}).catch((err) => {
console.log(err);
});

await browser.close();
});

I'm using version 1.0.1 because of #22

[anescobar1991]

The issue is that you are unnecessarily using await on toMatchImageSnapshot() which then turns the assertion into a promise that would need to be handled:

Instead of
await expect(something).toMatchImageSnapshot();

You just need to do
expect(something).toMatchImageSnapshot();

[ruxiang05]

Doesn't change anything, tried it.

[anescobar1991]

It is hard to read your code without it being formatted but it seems to me (from a very quick glance) that you are not handling your async code properly in the test.

Read up on testing asynchronous code in the jest docs. If I have time later I will look into this with more detail but it does not seem to be a jest-image-snapshot issue.