argos-ci / jest-puppeteer

Run tests using Jest & Puppeteer 🎪✨
MIT License
3.53k stars 289 forks source link

Is @types/jest-environment-puppeteer still required? #568

Open pyoor opened 10 months ago

pyoor commented 10 months ago

After updating jest-environment-puppeteer to 9.0.1, I get the following typescript compiler error: error TS2304: Cannot find name 'page'.

The README notes that typescript definitions are now provided for jest-puppeteer versions > v8.0.0. However, the only way I'm able to resolve the issue is by installing the @types/jest-environment-puppeteer. Is this something wrong with my configuration?

Relevant dependencies:

    "@jest/globals": "^29.7.0",
    "jest": "^29.7.0",
    "jest-environment-puppeteer": "^9.0.1",
    "puppeteer-core": "^21.4.1",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2"

tsconfig.json:

{
  "compilerOptions": {
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "resolveJsonModule": true,
    "target": "ES2022",
    "lib": [
      "ES2022",
      "DOM"
    ],
    "strict": false,
  }
}

jest.config.ts

export default {
  preset: "ts-jest",
  globalSetup: "jest-environment-puppeteer/setup",
  globalTeardown: "jest-environment-puppeteer/teardown",
  testEnvironment: "jest-environment-puppeteer",
  testTimeout: 30000,
}
erik-stodola commented 7 months ago

@pyoor Thank you kind sir for this wisdom I was experiencing a similar issue and adding the latest @types/jest-environment-puppeteer to my devDependencies in my package.json helped me resolve my problem.

In my case version 5.0.6 worked just fine of @types/jest-environment-puppeteer - https://www.npmjs.com/package/@types/jest-environment-puppeteer

jason-ha commented 6 months ago

I am unable to use @types/jest-environment-puppeteer to work around this while also using expect-puppeteer@9.0.2. Installing @types/jest-environment-puppeteer devDependency then results in:

node_modules/.pnpm/expect-puppeteer@9.0.2/node_modules/expect-puppeteer/dist/index.d.ts:1:38 - error TS2305: Module '"puppeteer"' has no exported member 'FrameWaitForFunctionOptions'.

1 import { Page, Frame, ElementHandle, FrameWaitForFunctionOptions, ClickOptions, Dialog } from 'puppeteer';

I see from lock file that using @types/jest-environment-puppeteer@5.0.6 results in the addition of several older and duplicate packages like jest-environment-node@27.5.1 where without already had dependency on jest-environment-node/29.7.0.

Directly @types/jest-environment-puppeteer/5.0.6 has dependencies:

      '@jest/types': 26.6.2
      '@types/puppeteer': 5.4.7  <-- does not have FrameWaitForFunctionOptions
      jest-environment-node: 27.5.1
jason-ha commented 6 months ago

The difference I see in the @types versus package is that the global additions are not declared. @types has:

declare global {
    const browser: Browser;
    const context: BrowserContext;
    const page: Page;
    const jestPuppeteer: JestPuppeteer;
}

Per the difficulties I ran into, I built a local @types/jest-environment-puppeteer that re-exports jest-environment-puppeteer with the addition of global declaration:

declare global {
    const browser: JestPuppeteerGlobal["browser"];
    const context: JestPuppeteerGlobal["context"];
    const page: JestPuppeteerGlobal["page"];
    const jestPuppeteer: JestPuppeteerGlobal["jestPuppeteer"];
}
opyate commented 1 month ago

Does this section help?

https://github.com/argos-ci/jest-puppeteer/tree/main?tab=readme-ov-file#prevent-eslint-errors-on-global-variables

image

gregberge commented 1 week ago

Feel free to submit a PR to fix things if not correct please.