# testing-library/render-result-naming-convention

📝 Enforce a valid naming for return value from `render`.

💼 This rule is enabled in the following configs: ![badge-angular](https://img.shields.io/badge/-Angular-black?style=flat-square&logo=angular&logoColor=white&labelColor=DD0031&color=black) `angular`, ![badge-marko](https://img.shields.io/badge/-Marko-black?style=flat-square&logo=marko&logoColor=white&labelColor=2596BE&color=black) `marko`, ![badge-react](https://img.shields.io/badge/-React-black?style=flat-square&logo=react&logoColor=white&labelColor=61DAFB&color=black) `react`, ![badge-svelte](https://img.shields.io/badge/-Svelte-black?style=flat-square&logo=svelte&logoColor=white&labelColor=FF3E00&color=black) `svelte`, ![badge-vue](https://img.shields.io/badge/-Vue-black?style=flat-square&logo=vue.js&logoColor=white&labelColor=4FC08D&color=black) `vue`.

<!-- end auto-generated rule header -->

> The name `wrapper` is old cruft from `enzyme` and we don't need that here. The return value from `render` is not "wrapping" anything. It's simply a collection of utilities that you should actually not often need anyway.

## Rule Details

This rule aims to ensure the return value from `render` is named properly.

Ideally, you should destructure the minimum utils that you need from `render`, combined with using queries from [`screen` object](https://github.com/testing-library/eslint-plugin-testing-library/blob/master/docs/rules/prefer-screen-queries.md). In case you need to save the collection of utils returned in a variable, its name should be either `view` or `utils`, as `render` is not wrapping anything: it's just returning a collection of utilities. Every other name for that variable will be considered invalid.

To sum up these rules, the allowed naming convention for return value from `render` is:

- destructuring
- `view`
- `utils`

Examples of **incorrect** code for this rule:

```javascript
import { render } from '@testing-library/framework';

// ...

// return value from `render` shouldn't be kept in a var called "wrapper"
const wrapper = render(<SomeComponent />);
```

```javascript
import { render } from '@testing-library/framework';

// ...

// return value from `render` shouldn't be kept in a var called "component"
const component = render(<SomeComponent />);
```

```javascript
import { render } from '@testing-library/framework';

// ...

// to sum up: return value from `render` shouldn't be kept in a var called other than "view" or "utils"
const somethingElse = render(<SomeComponent />);
```

Examples of **correct** code for this rule:

```javascript
import { render } from '@testing-library/framework';

// ...

// destructuring return value from `render` is correct
const { unmount, rerender } = render(<SomeComponent />);
```

```javascript
import { render } from '@testing-library/framework';

// ...

// keeping return value from `render` in a var called "view" is correct
const view = render(<SomeComponent />);
```

```javascript
import { render } from '@testing-library/framework';

// ...

// keeping return value from `render` in a var called "utils" is correct
const utils = render(<SomeComponent />);
```

## Further Reading

- [Common Mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-wrapper-as-the-variable-name-for-the-return-value-from-render)
- [`render` Result](https://testing-library.com/docs/react-testing-library/api#render-result)