Visual testing library with Puppeteer and Mocha
npm install @zumerbox/testsThis tool simplifies the process of running Jest tests for your project, including visual tests with image snapshots. It provides a convenient way to execute Jest with custom configuration and setup files, allowing you to run tests with ease.
Visual test are a convenient way to test UI. In this case, image snapshoots are compared to detect changes.
Refer to the ZumerBox bundle for more information and tools.
- Headless DOM with jsdom
- Visual diff testing with Puppeteer + pixelmatch
- Out of the box: zero configuration required in the user’s project
Run directly without prior installation:
``bash`
npx @zumerbox/tests
By default, Mocha will discover test files matching test/*/.test.{js,ts,jsx,tsx}.
`js
// test/math.test.js
const { expect } = require('chai');
describe('Math Operations', () => {
it('should add numbers correctly', () => {
expect(1 + 2).to.equal(3);
});
});
`
`js`
// test/button.test.js
describe('Button UI', () => {
it('matches the visual snapshot', async function() {
await this.page.setContent('');
await visualDiff(this.page, 'button-primary.png');
});
});
- On the first run, a new snapshot __snapshots__/button-primary.png will be generated.*.diff.png
- Subsequent runs compare against the baseline and, if discrepancies are found, output a diff image and fail the test.
- --u: Regenerate all baseline snapshots.
`bash``
npx @zumerbox/tests --update-snapshots
npx @zumerbox/tests --grep "Button UI"