no-render-in-lifecycle.md

Disallow the use of render in setup functions (testing-library/no-render-in-lifecycle)

Rule Details

This rule disallows the usage of render (or a custom render function) in testing framework 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();
});

const setup = () => render(<MyComponent />);

beforeEach(() => {
	setup();
});

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();
});

const setup = () => render(<MyComponent />);

beforeEach(() => {
	// other stuff...
});

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

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-lifecycle": ["error", {"allowTestingFrameworkSetupHook": "beforeAll"}],