Setting the plugin up in your project

[00:00 - 00:13] All right, it's time to install and setup ISLIMPLAGING tested library in our course demo project. Before jumping into the installation and setup itself, there are some points to remember.

[00:14 - 00:26] We will use Jest as our testing framework, which is is our recommendation since some rules are tied to its matches. We will use some extra packages from the tested library ecosystem for improving the testing experience.

[00:27 - 00:37] There are a bunch of them, but we are sticking to these two. Jest DOM, which is a companion library for tested library that provides custom DOM element matches for Jest.

[00:38 - 00:53] This will make our assertion more maintainable and readable. And user event, this is another library for tested library ecosystem to simulate user interaction with our UI since it provides more advanced simulations of browser behaviors than the built-in Fire event method.

[00:54 - 01:05] We are aware of we are using user event version 13 for this course, not version 14, which is the latest one released. Now we can start with the installation of ISLIMPLAGING tested library.

[01:06 - 01:15] Remember to download the sample code and install the dependencies with npm install. After that, we can add the ISLIMPLAGING tested library into our project.

[01:16 - 01:44] To do that, it's as simple as telling npm to install a new dependency in our dev dependencies and then indicate ISLIMPLAGING tested library. We can check the package JSON in our project and we will see that in the dev dependencies, ISLIMPLAGING tested library has been installed correctly.

[01:45 - 01:53] Once ISLIMPLAGING is installed, we need to tell ISLIM that we want to enable this new plugin. There are two ways of doing so.

[01:54 - 01:58] Manually or using a preset. Let's see first how to enable the plugin manually.

[01:59 - 02:06] In our code editor, we open the ISLIM config file. We will see some settings already in here.

[02:07 - 02:15] To manually enable an ISLIMPLAGING, that has to be done through the plugins property. So we can add it after the extends, for example.

[02:16 - 02:27] This is an array of strings. If we want to enable ISLIMPLAGING tested library, in this plugins array, we need to include the testing library string.

[02:28 - 02:39] This only tells ISLIM that we want to use this plugin, but there is no rule enabled at all. So we need to manually enable each individual rule under the rules section.

[02:40 - 02:50] To do that, we will have to include an entry for the desired rule we want to enable indicating the error level. So for example, we could do something like this.

[02:51 - 03:08] This is the rule we want to enable, and then the error level, which is error. This gives us more granular control over the rules we want to enable or disable , but it's really painful to enable each one of them manually.

[03:09 - 03:22] So we are going to see the second way of enabling rules, which is more convenient in our case. As we mentioned in the intro of the course, this plugin already provides some shareable configuration, so you can enable many rules at once.

[03:23 - 03:37] In our case, since we are implementing our app with React, we are going to stick to the React preset. So we already need to add the plugin tested library React to the extends section.

[03:38 - 03:45] We go to our code editor, and before the preter one, we add the tested library React preset. This will do two things for us.

[03:46 - 04:00] First of all, telling ESLint that we want to enable the tested library plugin, and secondly, enable a bunch of rules automatically for us. You can find those rules in the supported rules table from the documentation with the React icon.

[04:01 - 04:14] We will stick to this way of enabling the plugin in our code base, but in some specific lessons, we will enable some rules manually since they are not part of the preset for React. Let's try the plugin out.

[04:15 - 04:33] We can go to the app test JSX, and we will see some tests already implemented in here. Everything looks fine so far, but if we go to this get by text query, I change it by find by text query, we will see it gets underlined in red.

[04:34 - 04:49] We can see the error promised returner from this query must be handled. If we run ESLint in our terminal, we will see the same error.

[04:50 - 04:53] This means the plugin is working correctly, so we can go ahead to the next lesson.