Skip to content

Commit

Permalink
docs: add workaround for TS custom commands
Browse files Browse the repository at this point in the history
  • Loading branch information
marmaladebacon authored and mko-fds committed Sep 25, 2023
1 parent 756fea0 commit 1d4f735
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions docs/api/cypress-api/custom-commands.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,33 @@ IntelliSense to show helpful documentation. See the
[`cypress-example-todomvc`](https://github.com/cypress-io/cypress-example-todomvc#cypress-intellisense)
repository for a working example.

#### 6. Create a function that adds the custom command

Cypress [12.17.4](/guides/references/changelog#12-17-4) includes a webpack upgrade (v4 to v5), which [tree shakes out](https://webpack.js.org/blog/2020-10-10-webpack-5-release/#inner-module-tree-shaking) any side-effects or files that only include side-effects.

If you are using TypeScript and have `sideEffects:false` set in your package.json, custom Cypress commands will not be registered by the common pattern of writing the commands in one file and having them be run as a side effect of importing the file. For example:

```typescript title="/cypress/support/commands.ts"
Cypress.Commands.add("login", (email, password) => { ... })
```

```typescript title="/cypress/support/e2e.ts"
import './commands'
```

To support `sideEffects:false`, you can wrap the Cypress commands in a function that will be imported by the support file.

```typescript title="/cypress/support/commands.ts"
export function registerCommands(){
Cypress.Commands.add("login", (email, password) => { ... })
}
```

```typescript title="/cypress/support/e2e.ts"
import { registerCommands } from './commands'
registerCommands()
```

## History

| Version | Changes |
Expand Down

0 comments on commit 1d4f735

Please sign in to comment.