useTestHooksOnTop (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.14
Diagnostic Category: lint/style/useTestHooksOnTop
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- test
Sources:
- Same as jest/prefer-hooks-on-top
- Same as vitest/prefer-hooks-on-top
- Same as playwright/prefer-hooks-on-top

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useTestHooksOnTop": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that lifecycle hooks appear before any test cases in the same block.

Placing beforeEach, beforeAll, afterEach, and afterAll hooks after test cases (it, test) makes the setup and teardown harder to spot at a glance and can be a source of confusion for readers of the test suite.

Examples

Invalid

1
describe('foo', () => {
2
  it('does something', () => {});
3
  beforeEach(() => {});
4
});

code-block.js:3:3 lint/style/useTestHooksOnTop ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Lifecycle hook beforeEach appears after a test case.
  
    1 │ describe('foo', () => {
    2 │   it('does something', () => {});
  > 3 │   beforeEach(() => {});
      │   ^^^^^^^^^^^^^^^^^^^^
    4 │ });
    5 │ 
  
  ℹ Placing the hook after this test case makes it harder to spot the setup and teardown for these tests at a glance.
  
    1 │ describe('foo', () => {
  > 2 │   it('does something', () => {});
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │   beforeEach(() => {});
    4 │ });
  
  ℹ Move the hook above all test cases in the same block for better readability.

Valid

1
describe('foo', () => {
2
  beforeEach(() => {});
3
  it('does something', () => {});
4
});