Agenda
- Jest...so what? big deal, who cares?
- Your project before and after Jest
- Snapshot testing
- Visual regression tests with image snapshots
Snapshot all the things
(not really)
Compare serializable values
Without snapshots
// output === {foo: 'foo', bar: 'bar'}
describe('Some test suite', function() {
it('can create an object', () => {
expect(output.foo).toEqual('foo');
expect(output.bar).toEqual('bar');
});
});
With snapshots
// output === {foo: 'foo', bar: 'bar'}
describe('Some test suite', function() {
it('can create an object', () => {
expect(output).toMatchSnapshot();
});
});
Before
After
Before
{
"dependencies": {
"chai": "^4.0.1",
"chai-shallow-deep-equal": "^1.4.6",
"istanbul": "^0.4.4",
"mocha": "^3.4.2",
"mocha-lcov-reporter": "^1.0.0",
"mocha-unfunk-reporter": "^0.4.0",
"nyc": "^11.0.2",
}
}
After
{
"dependencies": {
"jest": "^20.0.4"
}
}
Before
// Mocha uses before()
describe('Some Test Suite', function() {
before(() => {
// one-time setup
});
it('can be awesome', () => {/* expects and stuff */});
});
After
// Jest uses beforeAll()
describe('Some Test Suite', function() {
beforeAll(() => {
// one-time setup
});
it('can be awesome', () => {/* expects and stuff */});
});
Start static server
{
"scripts": {
"server:start": "nohup http-server -p 1337 &"
}
}
Capture Screenshots
function captureScreenshots(options) {
return (async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width, height});
await page.goto(/* url */);
// perform action
await page.screenshot(/* path */);
browser.close();
return 'Capture Complete';
})();
}
Run snaphot tests
// First run will save snapshots
// Second run will perform comparisons
describe('Your software', function() {
it('can be free of visual regressions', () => {
return images.each(image => {
expect(image).toMatchImageSnapshot();
});
});
});