False positive when creating a rendering helper function
HenryHall opened this issue · 2 comments
HenryHall commented
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
Belco90 commented
Hi @HenryHall. I'm afraid this is a behaviour related to the Aggressive Reporting feature. In particular, this is coming from custom-renders
mechanism.
Please read those docs to know more about how to restrict such behaviour.