no-manual-cleanup rule
Understanding the errors reported by the rule `no-manual-cleanup`
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Master Testing Library with ESLint Plugin course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Master Testing Library with ESLint Plugin, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:21] We are going to start with one of the simplest rules of the plugin, the "No manual cleanup" rule. If we check this rule in the table of the supported rules in the docs and we go to the "including configurations" column, we can see it's not enabled in any of the presets, so we need to enable this rule manually.
[00:22 - 00:38] In our demo app for this lesson, we open the "ecelinconfig" file and in the " overrise" column, we will find within the "rules" object, test it leverage / "no manual cleanup" with the "value" error. This is the way we can enable this rule manually.
[00:39 - 00:46] This rule is only compatible with React, a view to test it leverage frameworks. The purpose of this rule is to disallow the use of "cleanup".
[00:47 - 01:01] The "still library" provides a "cleanup" method for some frameworks that amounts the trees that were mounted with the "render" utility. Failing to call the cleanup when you have rendered your component with the " render" utility could result in a memory leak or side effects between your tests.
[01:02 - 01:13] Because of this, you should always call "cleanup" after each test. Depending on the testing framework you are using for running your test, you might not have seen this "tested library" cleanup utility before.
[01:14 - 01:24] Why? Because some testing frameworks, like Mocha, Jest or Jasmine, handle this automatically for you since they support the global after each hook.
[01:25 - 01:36] For those testing frameworks, you won't need to call "cleanup manually", hence the inspiration for this rule. If we go back to our demo app and go to the example test file, we will see a pretty basic test implemented in here.
[01:37 - 01:43] Wefton is already highlighting an error reported by ESLint. We can see that in our cleanup method in here.
[01:44 - 01:49] This is the error you will usually see. We just need to get rid of all manual cleanup usages and imports.
[01:50 - 02:02] So in this example, we can remove the usage of cleanup in here, because test state library is already taking care of it for us. Since the after each callback is empty, we can remove it too.
[02:03 - 02:09] Now the only last usage from cleanup is the input in here. We can remove it too.
[02:10 - 02:22] Now we don't have any ESLint error reported by the plugin, and we can make sure that the test is passing. We go to our terminal or any other preference you might have for running your test.
[02:23 - 02:39] In my case, I'm going to run npm run test and since I only want to run this specific file, I can pass the flag p and then specify the path of the test file. We run this and the test is passing.
[02:40 - 02:50] You must enable this rule if your testing framework supports the global after each hook, such as mocha, jest or jasmine. And you didn't skip the tested library out of cleanup.
[02:51 - 03:04] Since there are other testing runners that doesn't have support for the global after each and this plugin cannot guess which testing runner you are using, this is the reason why the rule is not enabled in any preset. Now is your turn.
[03:05 - 03:09] You should find a way to fix the errors reported in the practice.test.js file.