testing-library / testing-library/eslint-plugin-testing-library
False positive when creating a rendering helper function
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 168
- Avg merge
- 15h 44m
- Merged PRs (30d)
- 14
Description
Have you read the Troubleshooting section?
Yes
Plugin version
v5.10.0
ESLint version
v8.31.0
Node.js version
v16.8.0
package manager and version
npm 8.19.2
Operating system
Windows 10
Bug description
When creating a helper function that used render internally, I was getting an error (testing-library/render-result-naming-convention) telling me I've picked a poor name and that I should incorrectly destructure the results. Oddly, this only seemed to happen if I imported the function, but used within the same file.
Steps to reproduce
// MyComponent.helper.tsx
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
export function makeComponentRenderer(config) {
// do some stuff...
return function () {
// do some other stuff...
return render(<MyComponent />);
}
}
// When used inside the file, it works without eslint complaining
const config = { /* ... */ };
const someInternal = makeComponentRenderer(config); // OK
// Elsewhere.tsx
import { makeComponentRenderer } from './MyComponent.helper';
const config = { /* ... */ };
// ESLint: `renderMyComponent ` is not a recommended name for `render` returned value. Instead, you should destructure it, or name it using one of: `view`, or `utils`(testing-library/render-result-naming-convention)
const renderMyComponent = makeComponentRenderer(config); // ERROR
Error output/screenshots
No response
ESLint configuration
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['react', 'react-hooks', 'jest-dom', 'testing-library', '@typescript-eslint'],
parserOptions: {
project: ['./tsconfig.json'],
extraFileExtensions: ['.mdx'],
},
env: {
browser: true,
es2020: true,
node: true,
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:react/jsx-runtime',
],
ignorePatterns: ['/dist/*', '/coverage/*', '/public/mockServiceWorker.js'],
overrides: [
{
files: ['./src/**/?(*.)+(spec|test).[jt]s?(x)'],
extends: ['plugin:jest-dom/recommended', 'plugin:testing-library/react'],
},
],
settings: {
react: {
version: 'detect',
},
},
};
Rule(s) affected
testing-library/render-result-naming-convention
Anything else?
No response
Do you want to submit a pull request to fix this bug?
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the testing-library/render-result-naming-convention rule and reproduce the behavior using MyComponent.helper.tsx and Elsewhere.tsx from the report. Compare the rule's handling of the imported makeComponentRenderer result with the same-file use. Done means the valid helper naming pattern no longer produces a false positive, with regression coverage for this reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, typescript
- Domain
- testing-qa, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100