Jest Puppeteer - Setup Visual Studio Code for it

Question

I'm planning to setup env for testing in Visual Studio Code IDE. The problem that I have is that VS Code in any XXX.test.js file don't know what is browser or page variable. I'm receiving such errors:

'page' is not defined.eslint(no-undef)

Is this something related only to IDE that I'm using? Some plugin from this IDE? Or maybe it is normal for jest-puppeteer and I need to get used to it?

The whole test when it runs works ok but it seems that IDE only don't know what is page.

I'm working right now on this simple example and I'm just learning this but I'm trying to setup env for it in the same time. My Network.test.js file looks like this. No imports or require at all at the top of the file.

describe("Google", () => {
    beforeAll(async () => {
        await page.goto("https://google.com");
    });

    it('should display "google" text on page', async () => {
        await expect(page).toMatch("google");
    });
});

Later I need to switch it to Typescript which I think will be also a challenge. Now I just want to focus on pure javascript approach.

How to get rid of this IDE errors that are not errors in reality?

Answer 1

Add the Puppeteer globals, Page and Browser, to your ESLint config.

Then, add the following to your .eslintrc file:

env: {
    jest: true,
},
// Puppeteer globals
globals: {
    page: true,
    browser: true,
},

See Here : Link