|
| 1 | +# prefer toBeDisabled() or toBeEnabled() over toHaveProperty('disabled', true|false) (prefer-enabled-disabled) |
| 2 | + |
| 3 | +## Rule Details |
| 4 | + |
| 5 | +This rule aims to prevent false positives and improve readability and should only be used with the `@testing-library/jest-dom` package. See below for examples of those potential issues and why this rule is recommended. The rule is autofixable and will replace any instances of `.toHaveProperty()` or `.toHaveAttribute()` with `.toBeEnabled()` or `toBeDisabled()` as appropriate. |
| 6 | + |
| 7 | +In addition, to avoid double negatives and confusing syntax, `expect(element).not.toBeDisabled()` is also reported and auto-fixed to `expect(element).toBeEnabled()` and vice versa. |
| 8 | + |
| 9 | +### False positives |
| 10 | + |
| 11 | +Consider these 2 snippets: |
| 12 | + |
| 13 | +```js |
| 14 | +const { getByRole } = render(<input type="checkbox" disabled />); |
| 15 | +const element = getByRole('checkbox'); |
| 16 | +expect(element).toHaveProperty('disabled'); // passes |
| 17 | + |
| 18 | +const { getByRole } = render(<input type="checkbox" />); |
| 19 | +const element = getByRole('checkbox'); |
| 20 | +expect(element).toHaveProperty('disabled'); // also passes 😱 |
| 21 | +``` |
| 22 | + |
| 23 | +### Readability |
| 24 | + |
| 25 | +Consider the following snippets: |
| 26 | + |
| 27 | +```js |
| 28 | +const { getByRole } = render(<input type="checkbox" />); |
| 29 | +const element = getByRole('checkbox'); |
| 30 | + |
| 31 | +expect(element).toHaveAttribute('disabled', false); // fails |
| 32 | +expect(element).toHaveAttribute('disabled', ''); // fails |
| 33 | +expect(element).not.toHaveAttribute('disabled', ''); // passes |
| 34 | + |
| 35 | +expect(element).not.toHaveAttribute('disabled', true); // passes. |
| 36 | +expect(element).not.toHaveAttribute('disabled', false); // also passes. |
| 37 | +``` |
| 38 | + |
| 39 | +As you can see, using `toHaveAttribute` in this case is confusing, unintuitive and can even lead to false positive tests. |
| 40 | + |
| 41 | +Examples of **incorrect** code for this rule: |
| 42 | + |
| 43 | +```js |
| 44 | +expect(element).toHaveProperty('disabled', true); |
| 45 | +expect(element).toHaveAttribute('disabled', false); |
| 46 | + |
| 47 | +expect(element).toHaveAttribute('disabled'); |
| 48 | +expect(element).not.toHaveProperty('disabled'); |
| 49 | + |
| 50 | +expect(element).not.toBeDisabled(); |
| 51 | +expect(element).not.toBeEnabled(); |
| 52 | +``` |
| 53 | + |
| 54 | +Examples of **correct** code for this rule: |
| 55 | + |
| 56 | +```js |
| 57 | +expect(element).toBeEnabled(); |
| 58 | + |
| 59 | +expect(element).toBeDisabled(); |
| 60 | + |
| 61 | +expect(element).toHaveProperty('checked', true); |
| 62 | + |
| 63 | +expect(element).toHaveAttribute('checked'); |
| 64 | +``` |
| 65 | + |
| 66 | +## When Not To Use It |
| 67 | + |
| 68 | +Don't use this rule if you: |
| 69 | + |
| 70 | +- don't use `jest-dom` |
| 71 | +- want to allow `.toHaveProperty('disabled', true|false);` |
| 72 | + |
| 73 | +## Further reading |
| 74 | + |
| 75 | +- [toBeDisabled](https://github.com/testing-library/jest-dom#tobedisabled) |
| 76 | +- [toBeEnabled](https://github.com/testing-library/jest-dom#tobeenabled) |
0 commit comments