False positive when creating a rendering helper function

[HenryHall]

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]

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.

[vicasas]

Same problem here, when using React's renderToString function in my tests.

It tells me that the variable name should be view, utils or use destructuring, but this rule should not apply to using the renderToString function.

I have tried to overwrite the rule without success.

import ReactDOMServer from 'react-dom/server'

it('should render on the server-side', () => {
    const markup = ReactDOMServer.renderToString(<EventCard {...mockProps} />)

    expect(markup).toContain('Awesome Concert')
})