What is eslint-plugin-cypress?
The eslint-plugin-cypress npm package provides a set of linting rules specific to Cypress, an end-to-end testing framework. These rules help developers adhere to best practices and avoid common mistakes when writing Cypress tests.
What are eslint-plugin-cypress's main functionalities?
Enforcing Assertions
Ensures that assertions are made in test cases to prevent tests that mistakenly pass without asserting any conditions.
expect(something).to.be.true;
Disallowing Assignment in Conditional Expressions
Prevents the use of assignment operators in conditional expressions, which can lead to tests that pass incorrectly due to an assignment rather than a proper comparison.
if (user = getUser()) { /* ... */ }
Disallowing Unnecessary Waiting
Discourages the use of arbitrary wait times in tests, promoting the use of Cypress's built-in waiting mechanisms that are more reliable and efficient.
cy.wait(5000);
Other packages similar to eslint-plugin-cypress
eslint-plugin-jest
This package provides linting rules for Jest, another popular testing framework. It is similar to eslint-plugin-cypress in that it offers a set of rules tailored to the specific testing framework to encourage best practices.
eslint-plugin-mocha
Similar to eslint-plugin-cypress, this package offers linting rules for Mocha, a test framework for Node.js and the browser. It helps maintain code quality and adherence to Mocha-specific conventions.
eslint-plugin-testing-library
This package is designed for linting code that uses the Testing Library family of utilities. It provides rules that help enforce best practices when writing tests with Testing Library, similar to how eslint-plugin-cypress does for Cypress tests.
Cypress ESLint Plugin
An ESLint plugin for your Cypress tests.
Note: If you installed ESLint globally then you must also install eslint-plugin-cypress
globally.
Installation
npm install eslint-plugin-cypress --save-dev
Usage
Add an .eslintrc.json
file to your cypress
directory with the following:
{
"plugins": [
"cypress"
]
}
You can add rules:
{
"rules": {
"cypress/no-assigning-return-values": "error",
"cypress/no-unnecessary-waiting": "error",
"cypress/assertion-before-screenshot": "warn",
}
}
You can whitelist globals provided by Cypress:
{
"env": {
"cypress/globals": true
}
}
Recommended configuration
Use the recommended configuration and you can forego configuring plugins, rules, and env individually. See below for which rules are included.
{
"extends": [
"plugin:cypress/recommended"
]
}
Rules
These rules enforce some of the best practices recommended for using Cypress.
Rules with a check mark (✅) are enabled by default while using the plugin:cypress/recommended
config.
NOTE: These rules currently require eslint 5.0 or greater. If you would like support added for eslint 4.x, please 👍 this issue.
Chai and no-unused-expressions
Using an assertion such as expect(value).to.be.true
can fail the ESLint rule no-unused-expressions
even though it's not an error in this case. To fix this, you can install and use eslint-plugin-chai-friendly.
npm install --save-dev eslint-plugin-chai-friendly
In your .eslintrc.json
:
{
"plugins": [
"cypress",
"chai-friendly"
],
"rules": {
"no-unused-expressions": 0,
"chai-friendly/no-unused-expressions": 2
}
}
Contribution Guide
To add a new rule:
- Fork and clone this repository
- Generate a new rule (a yeoman generator is available)
- Run
yarn start
or npm start
- Write test scenarios then implement logic
- Describe the rule in the generated
docs
file - Make sure all tests are passing
- Add the rule to this README
- Create a PR
Use the following commit message conventions: https://github.com/semantic-release/semantic-release#commit-message-format