Typescript support: Update documentation for plugins.ts

[CSchulz]

Current behavior:

plugin.ts:

export function plugins(on: Cypress.PluginEvents, _config: Cypress.ConfigOptions): void {
  on('before:browser:launch', () => {
    console.log("hello");
  });
}

Fails with

> export function plugins(on, _config) {
> ^^^^^^
> 
> SyntaxError: Unexpected token 'export'
>     at Module._compile (internal/modules/cjs/loader.js:896:18)
>     at Module.m._compile (Cypress\Cache\4.4.0\Cypress\resources\app\packages\server\node_modules\ts-node\src\index.ts:536:23)
>     at Module._extensions..js (internal/modules/cjs/loader.js:986:10)

Desired behavior:

Should work without any issue or the documentation should state it.

The workaround is the following:

function plugins(on: Cypress.PluginEvents, _config: Cypress.ConfigOptions): void {
  on('before:browser:launch', () => {
    console.log("hello");
  });
}

module.exports = plugins;

Test code to reproduce

Use the first snippet.

Versions

4.4.0

[jennifer-shehane]

I am not encountering this error actually. Although I do not see the before:browser:launch console logging any of the options, so it seems like it's not running at all?

[CSchulz]

Interesting, I have found out it makes a difference how to start cypress.

npx cypress open --project e2e

npx cypress open -C e2e\cypress.json

results into the error from above.

cypress.json

{
  "fileServerFolder": ".",
  "fixturesFolder": "./src/fixtures",
  "integrationFolder": "./src/integration",
  "pluginsFile": "./src/plugins/index.ts",
  "supportFile": "./src/support/index.ts",
  "video": true,
  "videosFolder": "../../../results/cypress/e2e/videos",
  "screenshotsFolder": "../../../results/cypress/e2e/screenshots",
  "chromeWebSecurity": false,
  "reporter": "../../../node_modules/mocha-multi-reporters",
  "reporterOptions": {
    "configFile": "reporter-config.json"
  },
  "pageLoadTimeout": 10000,
  "blacklistHosts": ["*.net", "*.com"],
  "modifyObstructiveCode": false
}

[sainthkh]

Confirmed.

It happens when the Cypress root folder is not located at the default path.

How to reproduce

1. Create Cypress project like below:

root/
- test/
  - e2e/
    - cypress/
      - integration/
      - plugins/
        - index.ts
    - cypress.json
- tsconfig.json
- others...

2. Create a tsconfig.json with these options:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

3. Run cypress like below:

cypress open --project test/e2e

It fails.

Cause of the Problem.

When the project is not located at the default path and tsconfig.json has "module": "esnext", it fails. Because ts-node somehow reads that file and don't transpile import/export syntax.

Help wanted.

How should we emulate cypress open --project test/e2e and e2e-test this bug?

[bahmutov]

Quick note: your export is incorrect, since it is a named export

export function plugins(on: Cypress.PluginEvents ...)

It should be

export default function plugins(on: Cypress.PluginEvents ...)

[keeema]

I also had a problem with plugin.ts and found working solution:

`// plugins file

function register(): void {
return;
}

export = register;
`

[bahmutov]

@sainthkh you can from the root of the monorepo run yarn start --project test/e2e and it will be same as doing cypress open ...

[cypress-bot]

The code for this is done in cypress-io/cypress#7197, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 4.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.6.0, please open a new issue.