TestCafe: extending 'expect' to incorporate jest-image-snapshot

Question

I noticed that there was an option to extend Selector for TestCafe. The project I am working on needs to have Visual Image Testing.

I wanted to see if I could get jest-image-snapshot working with conjunction with TestCafe...but failing to do so.

So, need help in understanding how I can incorporate that package into validation of a screenshot taken during TestCafe.

here is some basic code I wrote so far:

import { Selector } from 'testcafe';

const { toMatchImageSnapshot } = require('jest-image-snapshot'); var fs = require('fs');

fixture('Snapshots').page('https://tallkurideon.myshopify.com/');

test('check something here', async (t) => {
    expect.extend({ toMatchImageSnapshot })
    // then pass the `t` reference to invoke the helper
    const image = fs.readFile('./test-results/Snapshots/Catalog__chrome/base.png')
    await t.expect(image).toMatchImageSnapshot();
});

Answer 1

TestCafe doesn't use the jest expect API, and the t.expect method cannot be extended. I suggest you try the looks-same library instead of jest-image-snapshot. You can take a screenshot with the t.takeScreenshot() or t.takeElementScreenshot(selector) method and compare them with a local image file. See this documentation topic: Take Screenshot.