Jest-puppeteer: using expect-puppeteer with jest's regular expect

[joshpitzalis]

expect(page).not.toContain('Example Title'); throws TypeError: (0 , _expectPuppeteer2.default)(...).not.toContain is not a function

is there a way to use jest expect and puppeteer expect in the same test in create-react-app?

I'm guessing the following jest configurations fix this:

{
"preset": "jest-puppeteer",
"setupTestFrameworkScriptFile": "expect-puppeteer"
}

...but CRA doesn't let me configure this without ejecting. Is there anything I can do?

[gregberge]

You can import expect-puppeteer as standalone.

import expectPuppeteer from 'expect-puppeteer'
// ...
expectPuppeteer(page).not.toContain('Example Title')

[joshpitzalis]

Didn't realise that was a standalone export. Perfect. Thank you.

For anyone else following this, I think neoziro meant expect(page).not.toContain('Example Title') in the example above, not.toContain() won't work with expectPuppeteer(). The point was to be able to use jest's regular expect.

[imjared]

@joshpitzalis I think your use case is what I'm looking for as well. Did you find a way around this? It seems that I should be using "preset": "jest-puppeteer", in my Jest config but ideally I'd like to only fall back to that and use it namespaced as @neoziro suggested.

Ideally, a test file might look like:

import expectPuppeteer from 'expect-puppeteer';

describe('Dashboard', () => {
  it('Redirects to login when logged out', async () => {
    const page = await browser.newPage();
    await page.goto('http://myapp.dev/dashboard');
    await page.waitFor('.login-link-signin');

    const url = await page.mainFrame().url();
    expect(url).toContain('login'); // Uses Jest
  });

  it('Redirects to login when logged out', async () => {
    const page = await browser.newPage();
    await page.goto('http://myapp.dev/dashboard');
    await page.waitFor('.login-link-signin');

    const url = await page.mainFrame().url();
    expectPuppeteer(page).toMatch('login'); // Uses expect-Puppeteer
  });
});

(apologies for the preemptive email you probably got. I fat-fingered the return key)