How to Add Jest to a React Project for Automated Testing

[00:00 - 00:06] So, in this video, we're going to set up our testing framework. We're going to use Jest.

[00:07 - 00:13] It's a project that is supported by the Facebook once again. It has a great support, great community.

[00:14 - 00:17] I think it's the biggest one for now. Almost zero config.

[00:18 - 00:21] Of course, you can set up a lot of stuff there. It has a great API.

[00:22 - 00:27] It runs tests very quickly and fast. You can do the coverage.

[00:28 - 00:31] You can do the mocks very easily. There is a lot of matches.

[00:32 - 00:41] There's a great reporting when there's a matches or fail. It will nicely show you the results.

[00:42 - 00:46] And, you know, that's a great tool that we're going to use. It does a great piece of software.

[00:47 - 00:52] It has a lot of plugins. It has a lot of, you know, matches, reporters, extensions.

[00:53 - 00:58] It works with all kinds of continuous integration systems. We're going to talk about it later.

[00:59 - 01:03] And, you know, it's just great. So, let's just set it up.

[01:04 - 01:14] So first thing, as usual, we need to run our NPM script to install it. So NPM, I for install, then we do D.

[01:15 - 01:24] So we will install it for the, as a development dependency. So we need TypeScript Jest because we're using TypeScript.

[01:25 - 01:30] And we need types for Jest. And we need the Jest itself.

[01:31 - 01:34] Here we go. All right.

[01:35 - 01:52] So we have it. And the next thing we need to do is to run one simple command, which is NPX TypeScript Jest, TSJest, config in it in order to generate JestConfig.js file.

[01:53 - 01:54] Here we go. So it's pretty simple.

[01:55 - 01:59] Straight forward, press it. D.S. Jest, test environment, note.

[02:00 - 02:07] Okay. So the next thing we need to do is we need to add the package, JSON test command.

[02:08 - 02:25] So we'll have a test command, which we'll just run test, not test, test. Then we will have a test watch, NPM test with watch flag is exactly the same thing as running it like that.

[02:26 - 02:33] Let's just create one test file just for the sake of making sure it's all running. So test, yes.

[02:34 - 02:49] You need to have this post fix of test, T.S. or test, T.S. in order to show J est that this is a test file is not a regular JavaScript file. And let's just write some simple test.

[02:50 - 02:59] So here's a simple test and let's just run the commands. Clear NPM run test.

[03:00 - 03:06] As you can see, it's detected. Our test, hello world is past and everything is running smoothly.

[03:07 - 03:13] That's not all that I want to add. There is also ESLint config that will be a nice addition.

[03:14 - 03:25] Yes, lint press, or plug in, whatever, that'll be nice to add to our beautiful ESLint config. So let's install it first as usual.

[03:26 - 03:33] Great, clear. Next thing, we need to add some stuff to our beautiful ESLint config.

[03:34 - 03:38] So let's just copy paste this thing. Great.

[03:39 - 03:45] And then we need to add a plug in, just here. And we need to add environments.

[03:46 - 03:55] So global to be true. So and I think it's great for us and it will work for us just fine.

[03:56 - 04:04] So congratulations, yeah. We just ended our initial developer environment setup and we are ready to finally develop custom hooks.

[04:05 - 04:22] If you're not interested in this part, you can just keep it over to the module 3 and to get straight into the how to prepare your code for publishing, compiling, bund ling, and stuff like that. All these in-depth details will be in the module 3.

[04:23 - 04:35] Module 2 will be solely about hooks, not in-depth, but just implementation details of how React Hanger is working under the hood. So it may be interesting for you or you may just skip it.

[04:36 - 04:36] Let's go to the next one.