False negative for no-unnecessary-act when importing act from react-test-renderer

[fabiendem]

Hi,
I believe this is not really a bug so opening a discussion instead:
In my project, I have the no-unnecessary-act rule enabled: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-unnecessary-act.md

Now, if I import act this way:

import { act, fireEvent } from "@testing-library/react-native";

and do:

act(() => {
     ...fireEvent..
})

it will get reported by ESLint as unnecessary act, as expected for fireEvent.

But if I import act this way:

import { act } from "react-test-renderer";
import { fireEvent } from "@testing-library/react-native";

and do:

act(() => {
     ...fireEvent..
})

it won't be reported by ESLint.

Now my question is...

• How can I prevent such a wrong import?
• Is there an ESLint rule for "correct act used"? That would be ideal.
  Can I tweak VSCode to import the correct act most of the time.
• Or do you think this is actually a bug in the ESLint rule?

If anyone has any tip here, please help 😄
Thank you!

[Belco90]

Hey @fabiendem! Thanks for starting this conversation.

I didn't know you could import act from react-test-renderer. The rule would only report it if imported from a @testing-library package or react-dom/test-utils (as mentioned in the rule's doc).

I don't think there is a way for you with the current plugin settings available to force the act from that package to be reported.

Since I'm not that experienced with RNTL, I'd like to know if there is a particular reason someone would import it from react-test-renderer instead of @testing-library/react-native?

Although it would be interesting to think about reporting react-test-renderer, bear in mind this plugin doesn't support RNTL 100% so you might run into some other cases like this with weird errors or false negatives.

[fabiendem]

Thanks for your reply. 👍

Since I'm not that experienced with RNTL, I'd like to know if there is a particular reason someone would import it from react-test-renderer instead of @testing-library/react-native?

There isn't any good reason, but with VSCode and the auto-import, sometimes the first import suggested will be the react-test-renderer one.
While the developer hasn't a good reason to do that, the dev may not check this.
It's really not the kind of thing you want to spend time on during Pull request reviews (ESLint ftw), that's why I am trying to find an automatic solution.

I didn't know you could import act from react-test-renderer. The rule would only report it if imported from a @testing-library package or react-dom/test-utils (as mentioned in the rule's doc).

Although it would be interesting to think about reporting react-test-renderer, bear in mind this plugin doesn't support RNTL 100% so you might run into some other cases like this with weird errors or false negatives.

Your comments made me looking into the source of the react-native-testing-library act, and turns out it's simply an alias for the act from react-test-renderer:

https://github.com/callstack/react-native-testing-library/blob/54d970c94013966c8839ee318b99737d64296d83/src/act.js#L1-L9

So now, I am thinking maybe we could have the rule to report for imports from react-test-renderer as well, since it's the same.
But I am not sure about the side effects for the plugin.

[Belco90]

Thanks for the context. I think is reasonable to report act from react-test-renderer too. It should be pretty straightforward, I'll create a ticket for it.

[Belco90]

Here you are! #494

[fabiendem]

Nice thank you!