[no-render-in-lifecycle] false positive

[Maxim-Mazurok]

Have you read the Troubleshooting section?

Yes

Plugin version

v6.1.2

ESLint version

v8.57.0

Node.js version

v20.17.0

package manager and version

npm 10.8.2

Operating system

Ubuntu 24

Bug description

no-render-in-lifecycle gives false posivite when calling a function that starts with render:

beforeEach(() => {
  setActivePinia(createTestingPinia());
  renderStoreInsideSetup(useLoggedInUserStore); // This throws false-positive - unexpected
  useComplianceStore().landingPageNavigationTriggered = true;
});

Likely due to regex issue?

Steps to reproduce

Lint code from above

Error output/screenshots

Forbidden usage of `render` within testing framework `beforeEach` setupeslint[testing-library/no-render-in-lifecycle](https://github.com/testing-library/eslint-plugin-testing-library/tree/main/docs/rules/no-render-in-lifecycle.md)

ESLint configuration

...

...compat
    .extends("plugin:jest-formatting/recommended", "plugin:vitest/all", "plugin:testing-library/vue")
    .map((config) => ({
      ...config,
      files: ["src/**/__tests__/*", "**/*.spec.ts", "**/*.spec.tsx", "**/*.skip.ts"],
    })),

...

Rule(s) affected

testing-library/no-render-in-lifecycle

Anything else?

No response

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

No

[Maxim-Mazurok]

Actually after reading more about the rule origin, maybe it's not a false positive... We don't actually render the component, we just use this to test pinia stores that use vue-query which relies on being inside of setup(), so we create a dummy component for these tests.

I guess, according to the article we should create a setup function instead and manually call it in each test..., is that the idea? Or is this rule meant to only apply to actually rendering the component?

Originally I said that it's a false-positive because examples only mention render() name, not renderSomethingCustom()

[Belco90]

Hi @Maxim-Mazurok.

The original idea behind this rule is to avoid rendering the tested component in the beforeEach indeed, calling it manually in each test. However, your renderStoreInsideSetup is reported as a rendering method because of the Aggressive Reporting.

If you read the custom renders behavior doc, you'll see the plugin will assume any function containing "render" in its name will be considered as a proper Testing Library rendering method, hence the reported error in your code.

You can customize the setting for this behavior, ignore the corresponding line reported if your renderStoreInsideSetup is not actually rendering components, or just rename your util to something else to indicate it doesn't actually render components.

[Maxim-Mazurok]

Makes perfect sense, thanks for linking to the docs, appreciate that this is configurable as well!
In my case, I just renamed the util function to not include "render".
It technically renders a dummy component in order to be able to use store, but it's not rendering an actual component, so I think it's fine...
Thanks, closing for now!