Comments (5)
@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.
from jest-image-snapshot.
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
from jest-image-snapshot.
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();
from jest-image-snapshot.
Doesn't change anything, tried it.
from jest-image-snapshot.
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.
from jest-image-snapshot.
Related Issues (20)
- Inconsistent images HOT 2
- Reduce distribution size HOT 3
- Jest 28 support HOT 9
- The "path" argument must be of type string. Received undefined HOT 3
- Advice for handling visual discrepancies between Intel and Apple Silicon images HOT 11
- Screenshot name for received image HOT 9
- support jest 29 HOT 1
- TypeError: Cannot read properties of undefined (reading '_counters') HOT 1
- Please add optional peer dependency HOT 1
- [Feature Request]: would it be possible to make the inline image diff size configurable?
- failureThresholdType=percent is confusing HOT 1
- `updatePassedSnapshot` updates all snapshot regardless of jest `--updatesnapshot` value HOT 1
- Allow custom comparisonMethod
- Reporting a vulnerability HOT 1
- storeReceivedOnFailure refuses to store received images in a CI environment HOT 1
- [Feature request] Expose `onBeforeWriteToDisk` hook (to manipulate EXIF data) HOT 4
- Always generate diff snapshots HOT 1
- Scrolled to bottom element screenshot clips bottom HOT 1
- [BUG] Outdated-snapshot-reporter fails with custom snapshot ids
- Vitest currentTestName causing ENAMETOOLONG HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jest-image-snapshot.