Run the plugin only on test files

[00:00 - 00:13] This is an optional but handy lesson to get advantage of some ESLint at Baths config. ESLint plug-in testing library will link testing library utils and SIGTAHS, right?

[00:14 - 00:26] Those testing library utils who want to report are located in testing files like this one. However, if we go to the ESLint config file, we enable ESLint plug-in testing library within the X10 property.

[00:27 - 00:41] This means we are applying the testing library rules to all the files in our code. This could lead to some potential false positives in case ESLint plug-in testing library files are similar to syntax to testing library that might be reported.

[00:42 - 00:59] This shouldn't be a problem for most of the users, but let's see how this can be improved, so we will run this plug-in over testing files to prevent some false positives but also to avoid running the plug-in over unnecessary files. We are going to do this through a ESLint at Baths config called overwrites.

[01:00 - 01:14] This is a special key that you can put in your ESLint config file. The main purpose of overwrites is to indicate a pattern for some specific files and then a specific configuration so you can apply those to only those files.

[01:15 - 01:34] If we go back to our project, the idea then is to move this testing library React preset from the X10 into a new overwrites array. Here we are going to specify a new object and then we need to pass the files pattern.

[01:35 - 01:59] The idea is to enable the testing library preset that we had in X10 only for these files. So we are going to add the X10 again in here with an array of strings in the same way as this one, but here we are going to only put the testing library React preset that we remove from this X10, so we place it in here.

[02:00 - 02:15] So this basically means rather than applying this preset for all the files linked by ESLint, we only want to apply it in here for the files indicated in here. Which files do we want to apply this configuration?

[02:16 - 02:25] Well, we say that our idea is to only enable the testing library React preset for the testing files. How do we identify those files?

[02:26 - 02:37] If we check the documentation for the files property, we see this is expecting an array or a string indicating a glove pattern. But which pattern do we need to put in here?

[02:38 - 02:50] If we go to the jest documentation, in here we will see the test match property . This property indicates which are the test files that are just will run the test over.

[02:51 - 03:15] By default, this pattern, which is a glove pattern, is this expression. This pattern basically means all JS, JSX, TS and TSX files that are inside a test with double underscore before and after, as well as any file with the suffix test or spec like component.test.js or component.spec.js.

[03:16 - 03:33] So this is basically the pattern we want to apply in our ESLint config to enable the testing library React preset only for our testing files. So we need to copy this default behavior into our files property.

[03:34 - 03:46] Be careful because this is an array of two strings. So we need to copy both of them, so we go back into our code editor and in files we put as an array of strings.

[03:47 - 03:59] Now we need to make sure this is reporting test files as expected. So we go back again to our app test JSX and replace the get by text with find by text.

[04:00 - 04:04] And you can see it's underline in red again complaining about some error. So everything is working as expected.