no-render-in-setup.md

Disallow the use of render in setup functions (no-render-in-setup)

Rule Details

This rule disallows the usage of render (or a custom render function) in setup functions (beforeEach and beforeAll) in favor of moving render closer to test assertions.

Examples of incorrect code for this rule:

beforeEach(() => {
  render(<MyComponent />);
});

it('Should have foo', () => {
  expect(screen.getByText('foo')).toBeInTheDocument();
});

it('Should have bar', () => {
  expect(screen.getByText('bar')).toBeInTheDocument();
});

beforeAll(() => {
  render(<MyComponent />);
});

it('Should have foo', () => {
  expect(screen.getByText('foo')).toBeInTheDocument();
});

it('Should have bar', () => {
  expect(screen.getByText('bar')).toBeInTheDocument();
});

Examples of correct code for this rule:

it('Should have foo and bar', () => {
  render(<MyComponent />);
  expect(screen.getByText('foo')).toBeInTheDocument();
  expect(screen.getByText('bar')).toBeInTheDocument();
});

If you use custom render functions then you can set a config option in your .eslintrc to look for these.

   "testing-library/no-render-in-setup": ["error", {"renderFunctions": ["renderWithRedux", "renderWithRouter"]}],

If you would like to allow the use of render (or a custom render function) in either beforeAll or beforeEach, this can be configured using the option allowTestingFrameworkSetupHook. This may be useful if you have configured your tests to skip auto cleanup. allowTestingFrameworkSetupHook is an enum that accepts either "beforeAll" or "beforeEach".

   "testing-library/no-render-in-setup": ["error", {"allowTestingFrameworkSetupHook": "beforeAll"}],