Name: Introduction To Testing In JavaScript With Jest
Uploaded: 2020-03-30T05:30:32.000Z
Duration: 13 min 57 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

The superlative

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 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.

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.

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.

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?

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.

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.

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.

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?

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

Subtitles ListPlay Video

Introduction To Testing In JavaScript With Jest

essentially

incredibly

individual

properly