In today's video, I'm going to be covering testing in Java script, which is one of the most important skills you can know as a developer.

It's something a lot of people don't teach or focus on.

But if you know testing, it's gonna set you apart from every other developer that doesn't know testing and give you that extra leg up when you're applying for jobs.

So in today's video, I'm gonna show you the very basics of how to get started with testing in JavaScript using chest Welcome back to Webb have simplified my name's Kyle, and my job is to simplify the Web for you so you can start building your dream projects quicker and better.

And if that sounds interesting, make sure you subscribe to my channel for more videos just like this one.

And to get started in this video, I have something a little bit different than usual.

I have a few files already created, and these were very simple JavaScript files.

All they do is to find a very simple function and then export that function for us and our case.

We have a function that adds to numbers.

We have a function that subtracts two numbers and we have a function that duplicates an array.

And if you aren't familiar with this spread operator syntax, I have an entire video that covers it links in the cards and the description down below if you're interested.

But essentially all this is doing is duplicating the array and creating a brand new array from the current array that were given.

And as I mentioned at the beginning of this video, we're gonna be talking about testing and how to test in JavaScript.

And the easiest way to do that, in my opinion, is to use the library cult jest, which is an incredibly popular and well built testing library inside of JavaScript.

So in order to start this, all we need to do is run N p m on it, hashed ass wide to it.

That way, it'll initialized all the default values.

And this gives us our starting point package dot Jason, next we need to install.

So we're gonna npm Dash, Dash Save Dev and we want to install jest.

This is going to be our testing library and the reason we're saving it as a development dependency is because we only use this testing library in development to make sure everything runs.

Now that that is done downloading we can come in here.

We have our test, a script, and we can just change this by typing in jest.

And essentially, now, when we run and PM test, it's going to actually run just and run all of our test.

But of course, right now we don't have any tests, So this is just going to fail.

So to get started creating your very first test, all you need to do is create a new file, give it the exact same name as the file you want to test in our case will test some, and then you just say dot test and then dot Js.

So essentially, you just take the same file name, ad dot test to the end of it and make sure the dodgy s stays at the very end.

Now, inside of this file, what we need to do is import are some function says you remember here were exporting a function called some.

So we're gonna import that function by just saying in here we want to require dot slash some.

This is going to import this some function, and then we can actually write a test for this.

So what we want to do is to test to make sure some function works.

So essentially, we want to test that when we give it to parameters.

For example, one plus two.

We wanna test to make sure that that is equal to three.

And in order to write a test with just we use this function called test.

And the very first perimeter to this test function is just a string of what the test is doing.

So in our case, we could just say that it properly adds two numbers.

You just write what you want to test inside of that string because this will actually show up inside of the console.

When we run this test, the second thing is going to be a function, and dysfunction is what gets called to run your test.

So we have a test which is going to properly add two numbers, and then it calls this function.

And inside this function, we need to make sure that are expected.

Result happens, and in order to do that normally and javascript, you maybe would put like if you could say if some of one and two is equal to three, then you want to run some code inside of here.

Otherwise, if it doesn't work, you want to throw some kind of error.

Maybe, And that would be how you do this.

A normal job script.

But this is kind of bulky and hard to use, so with just they actually have functions built in that allow you to do this.

Testing and those test functions are called expect just like that.

That's what we're saying is we expect something to equal something else.

So we are expecting some of one and two, and we want this to be three, so we could just say to be and we pass in three Now if we save that and run this, you should see that our test, you're going to run and they're going to pass.

As you can see, it's running this test right now and you can see it's ran all of our tests and their past.

Let's just expand this up so we can see it easier and you can see that it ran properly, adds two numbers in two milliseconds and it passed and it says everything is working fine.

And it took about two seconds to run everything.

Bring that back down and I'm gonna go into this syntax a little bit more because this looks really confusing, I guarantee so.

Let's break this out So it's a little bit easier to read and know exactly what's going on.

The first section we have is expect and expect takes anything that we want.

And we're saying we expect whatever is inside of this section to do something related to the other section.

And there's a lot of functions we can use, for example, to be two equal, not to be, to be knoll, to be undefined and so on.

There's quite a lot of different matches that you could use in this case before a simple example over doing is checking that one plus two is the same as three and in our case that past and ran correctly.

Now let's go over to our clone array function here, and what we want to do is we want to test to make sure our Ray is the same.

We just want to make sure that we created a duplicate array that is exactly the same.

So it's create that new file clone, a radar test dot Js and inside of here again, we need to import our clone array function.

So we could just do that, require hopes, require docks last clone array, and then inside of here, all we need to do is do that test.

We want to say it properly.

Clones, array.

And in here we can just from that, we want to say, expect Clone Array.

And we want to create an array first sort of thing to say Constant already is going to be equal to Justo Array with some random numbers in it.

So we want to expect this is going to be our array, and we're actually going to get a failure when we do this.

So let's just run this test for a quick and this is actually the difference between to be and to equal.

So once we get this, we're gonna screw up so we can see our error.

And as you can see right here, it says, What did you do?

Expect receive to be expected.

Object is equality.

If it should pass with DP quality replaced to be with two strict equal, and its has expected 123 And it says received serialize is too the same string.

So this is kind of saying, Is this saying these objects look to be exactly the same?

The value seems to be the same, but they're actually different places and memory because, remember, I said, Clone Array.

This is actually creating a brand new array with all of the same values.

So now we have two arrays that are both referencing.

They won't have the same value, but they're referenced by different memory addresses, and this sounds a little bit confusing, but I have an entire video on passed by value and passed by reference.

But I break this down in so you can check that out linked in the cards and the description below.

But essentially, what we need to use is something called to equal instead.

Now, if we run our test, this is actually going to pass because our raise both have the same structure.

They're both 123 and as you can see, they both passed.

They just don't have the same memory address so we can use a second test where we can say to, We want this to be not to be a ready and we could run that.

And the reason we're testing this is we want to make sure Clone Array is actually making a copy.

And then it's not just the exact same array, and as you can see, that passed.

So we made sure our ray is the same array 123 And we also made sure that it created a clone instead of just returning the exact same array, it created a clone of that array a little bit confusing.

But as I mentioned, you can check out that video and it'll break down past my reference and pass by value for you really easily.

Now.

One last thing we would do is let's create a test for subtract dot test dot Js and instead of here, I'm gonna copy are some test because it's going to be very similar.

We want to make sure we import our subtract method, and we want to do that.

This is properly subtracting two numbers and of course, we need this to be negative one cause one minus two is negative one.

Let's run that ***.

Of course we should see here that all of our tests are going to pass as soon as his finishes.

And as you can see, we're getting an air, and that's just because this needs to be subtract instead of some.

And now we run this test.

We should get everything to pass again, which is going to be perfect and just a second never go everything past.

But it's kind of hard to tell what parts of our code or tested right now.

It just says that our test passed, but how do we know which functions got tested?

Which lines got tested?

And this is actually really easy to do?

We just need to pass in the dash dash coverage property to are just test.

Now.

If we save this and run our test again, it's actually going to make note of every single line that gets ran.

Every single function of it gets rant and make sure our code is tested 100%.

And as you can see here, it says that all of our files have all the statements.

Branches, functions and lines tested 100% and it even generates up here.

An HTML file index dot HTML.

If we open this up, I bring this over.

You can see that it actually has all of our code being tested 100%.

But if for some reason instead of are some we had a separate function.

Let's just say we had a function called helper and this function is just going to do something.

Let's just say it logs out helper.

Now, if we run our test well, actually test this function Nowhere in our test are we running this helper function ever.

So you're going to see down here when this finishes that we have some of our code not being tested and we can just open this back up so we can actually see it.

As you can see, we get generated out that only 66% of our statements were tested 50% of our functions.

And if we click on it, you can see in red is all the sections that are not being tested, which makes it really easy to know if we're actually testing everything that we want to test Now, before I die of any further, I want to step back a little bit and talk about testing as a whole.

Why it's important and how you can actually go about doing it in an easy manner.

Because I've shown you how to actually write your test for your functions by using the text test keyword.

And they expect as well is to be two equal to other things, depending on what you want to test.

And that's all great.

But how do you know your writing?

Good test and why do you even bother writing test?

Well, let's say, for example, we want to change our some dot Js and we're coming in here.

We're making a bunch of changes.

Were writing all this new code and somewhere along the wines we accidentally change this be a So now our code is saying return Plus a.

Obviously April's A is not going to be what we want.

So now when we run our test again, we're gonna get a failure.

So this is a way for us to build to change our code and know that everything is working properly.

If our test passed or if, in this case our test failed, we know somewhere along the lines we broke our some function because our task, our test for properly adding two numbers is now failing.

So what we do is we're gonna go back.

Look at our some function realized Oh, whoops.

We changed our A to a B R beat even a Let's change it back to the beef, run our test.

And this is just a really great way to verify your program, does what you wanted to do.

And in all of these tests, I'm doing what's called the unit.

Testing and unit testing is when you test the smallest unit of your coat and our case.

This is just a single function.

We want to test only one single thing at a time.

For example, I could write a fancy big test that could test some.

It could test clone array, Annika test, subtract all at once and do all this crazy testing.

But that would be a lot harder to write, and it wouldn't really tell you that much.

If that test breaks is your problem and it's some is it in Kelowna, Ray, is it in?

Subtract isn't even somewhere else with unit test.

Where you're doing is you're breaking your code down into really, really small components, essentially small units and you're testing these individual units.

So now you know, if your test for a single unit failed that that single unit is broken and you know exactly where to go to fix it.

Also, it allows you to write really small test because you're only testing a small part of your code, so you only need to make sure inputs and outputs for that very small section of code are what you expect.

So it makes testing really easy because your tests are just super simple.

Like this, obviously, and your use case, your test might be slightly more complex than just one plus two, but it's still going to be incredibly simple.

Another really important thing about test is that they give you confidence.