Skip to content

False positive for testing-library/render-result-naming-convention #695

@Cielquan

Description

@Cielquan

Have you read the Troubleshooting section?

Yes

Plugin version

5.9.1

ESLint version

8.27.0

Node.js version

18.10.0

package manager and version

8.19.2

Operating system

Linux 5.15.0-53-generic #59-Ubuntu

Bug description

I have a HOC which has the word "render" in ins name, wenn I wrote a test for it I got a false positive for the testing-library/render-result-naming-convention rule where RTL's render function was not even called.

Steps to reproduce

  1. Create a file with this content:
import { render } from "@testing-library/react";

import { withRenderInName, withR_enderInName } from "somewhere";

test("shows the false positive", () => {
  const HOC = withRenderInName(() => null);

  const { container } = render(<HOC />);

  expect(container.firstChild).toMatchSnapshot();
});

test("does not show the false positive", () => {
  const HOC = withR_enderInName(() => null);

  const { container } = render(<HOC />);

  expect(container.firstChild).toMatchSnapshot();
});
  1. See testing-library/render-result-naming-convention triggering on line 6 but not on line 14 where the only difference is the added underscore.

Error output/screenshots

No response

ESLint configuration

BASE CONFIG:

const config = {
  root: true,
  extends: ["plugin:react/recommended", "airbnb", "prettier"],
  plugins: ["react", "prettier", "react-hooks"],
  env: {
    browser: true,
    es2021: true,
  },
  settings: {
    next: { rootDir: "packages/swlp-frontend/" },
  },
  parserOptions: {
    ecmaVersion: 2021,
    ecmaFeatures: { jsx: true },
    sourceType: "module",
  },
  rules: {
    "arrow-body-style": ["error", "as-needed", { requireReturnForObjectLiteral: true }],
    "class-methods-use-this": "off",
    "func-style": ["error", "expression"],
    "global-require": "off",
    "import/default": "off",
    "import/extensions": ["error", "ignorePackages", { ts: "never", tsx: "never" }],
    "import/named": "off",
    "import/namespace": "off",
    "import/no-named-as-default-member": "off",
    "max-len": [
      "warn",
      100,
      { ignorePattern: "([^\\n\\r]{95,100}\\{(?:'|\") (?:'|\")\\})|^import|^export" },
    ],
    "no-shadow": "off",
    "no-unused-vars": "off",
    "no-use-before-define": "off",
    "no-void": ["error", { allowAsStatement: true }],
    "prettier/prettier": "error",
    "react/function-component-definition": [
      "warn",
      {
        namedComponents: "arrow-function",
        unnamedComponents: ["function-expression", "arrow-function"],
      },
    ],
    "react-hooks/exhaustive-deps": "warn",
    "react-hooks/rules-of-hooks": "error",
    "react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
    "react/react-in-jsx-scope": "off",
    "react/require-default-props": "off",
    "react/static-property-placement": "off",
  },
  overrides: [
    {
      // activate typescript-eslint rules only for ts files
      files: ["*.ts", "*.tsx"],
      extends: ["plugin:@typescript-eslint/recommended"],
      plugins: ["@typescript-eslint"],
      settings: {
        "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] },
        "import/resolver": {
          typescript: { project: ["./tsconfig.eslint.json", "./packages/**/tsconfig.eslint.json"] },
        },
      },
      parser: "@typescript-eslint/parser",
      rules: {
        "@typescript-eslint/explicit-function-return-type": ["error", { allowExpressions: true }],
        "@typescript-eslint/no-shadow": ["error"],
        "@typescript-eslint/no-unused-vars": "warn",
        "@typescript-eslint/no-use-before-define": ["error"],
      },
    },
    {
      // test files
      files: ["*.test.ts", "*.test.tsx", "testing/**"],
      rules: { "import/no-extraneous-dependencies": "off" },
    },
  ],
};

module.exports = config;

PACKAGE CONFIG

const config = {
  extends: ["./../../.eslintrc.js", "plugin:@next/next/recommended"],
  overrides: [
    {
      files: ["src/**/*.test.{ts,tsx}"],
      extends: [
        "plugin:jest/recommended",
        "plugin:jest/style",
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react",
      ],
      plugins: ["jest"],
      env: {
        "jest/globals": true,
      },
      rules: {
        "jest/consistent-test-it": "error",
        "jest/prefer-spy-on": "error",
      },
    },
  ],
  ignorePatterns: ["translations/locales/**/*.ts"],
};
module.exports = config;

Rule(s) affected

testing-library/render-result-naming-convention

Anything else?

I assume that the rule looks for functions with "render" in its name.

Do you want to submit a pull request to fix this bug?

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriagePending to be triaged by a maintainer

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions