testing-library / testing-library/eslint-plugin-testing-library

False positive when creating a rendering helper function

Open
#731 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

awaiting response question
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.