[00:00] Inside a new test file, import rule tester from ESLint, which is a class designed to help test custom ESLint rules and the parser we use in this project, that's TypeScript ESLint parser. And finally, import the custom rule. Create an instance of the RuleTester class with the linter configuration you want to use in this test. Here you can specify things you would put into your ESLint configuration file, but the only thing we must include to be able to test our custom rule is the JSX parsing support, so we will list this as the only parser option. Now you can call the run function on the rule tester instance you just created, where the first parameter is the name of the custom rule, The second parameter is the imported custom rule, and the third parameter is an object where you will list valid and invalid cases of your rule.
[00:53] Let's create a valid example. In this case, I have a class name that starts with a lowercase letter, so no warnings will be shown. Now, let's create an invalid example. In this case, the class name starts with an uppercase letter which should violate the custom rule. Now, I also have to tell what error message I'm going to get from my custom ESLint rule.
[01:17] This is CSS class names should start with a lowercase letter which is defined where my rule is defined. So you can see that message here in the custom ESLint rule. Now open the terminal and run npm test. If you made your ESLint rule to auto-fix the problem it detected, you can also test that by simply adding here an example of the output after the fix. So in our case, it should be email address with a lowercase letter.
[01:46] To turn your ESLint rule into something that's actually auto-fixable, you only have to do two things. Add here the fixable code key and value, and inside the reporter implement a fix function. In our case we will simply take the value of the className attribute, split it by empty spaces, then on each word we will convert the first letter into a lowercase letter, and then combine the string and replace the original value of the class name. And once you've saved this and go back to the test, you can open the terminal again and run npm test. Let's make a simple mistake so that we know that this actually works.
[02:34] So let's change the output to have a class name where the e is capital, and you will see this rule failing because the reported output example doesn't match the expected output example. So let's change back this to a lowercase letter and the test passes again.
