Using the plugin in a Create React App project

[00:00 - 00:58] CreateReachUp is the easiest way to create a simple single page react application with no configuration. Under the hood, createReachUp powers your app with packages like Webpack Babel or ESLint. This is very handy since ESLint is already set up with some basic configuration and a bunch of plugins. It turns out that one of those plugins is ESLint plugin testing library which was introduced in version 4. However, depending on the version of CreateReachUp you are using, you will get different versions of ESLint plugin testing library. In this lesson, we want to talk about which version of the plugin is including each CreateReachUp version which rules are enabled out of the box and how to customize its config. Let's see what version of the plugin can be found on each CreateReachUp version . In CreateReachUp version 5, we can find the version 5 of ESLint plugin testing library.

[00:59 - 01:46] So it's already using the very latest version available of the plugin out of the box. We don't need to do anything special about it. In CreateReachUp version 4, we have ESLint plugin testing library on version 3. You could update the plugin using internally by CreateReachUp through Yarn resolutions or NPM overwrites. But since both Create ReachUp version 4 and ESLint plugin testing library version 3 are duplicative, we highly recommend you to migrate any project you may have with CreateReachUp version 4 up to version 5. In CreateReachUp version 3, there is no ESLint plugin testing library available . So you will need to install it manually in a similar way that we saw at the beginning of this module, but we won't cover that since this version of CreateReachUp is also duplicated.

[01:47 - 02:07] So CreateReachUp already takes care of setting up ESLint plugin testing library for us, but what rules are enabled by default? This is not explicitly indicated in the CreateReachUp docs, but we can extract this information directly from the internal configuration. If we scroll down to the Tested Library section, we can see all the rules enabled by CreateReachUp.

[02:08 - 03:07] Since CreateReachUp is applying its own configuration for ESLint and its plugins, there is a specific way to extend it or replace it. You should see an ESLint config property within your package JSON, like this. By default CreateReachUp includes the Extents property with these two values. All the custom configuration for ESLint should be placed in this property within your package JSON. The configuration itself is the same as we have seen in the course, but instead of in your ESLint config file, it should be placed in here. Let's see an example. Assuming this is a project with CreateReachUp and this is our package JSON, this is the default ESLint config property we will find. If for example, we want to switch off the rule "No, No" access, it will be as simple as adding in here the rules property, then putting the name of the rule and indicating we want to switch it off. That's it.