Build A Test Framework In 10 Mins | Jest Clone

[Music] hey everyone i hope you're doing well so today we're going to be building a test framework from scratch something like a jest clone i'm going to be building this in under 10 minutes if you enjoyed this kind of content please consider subscribing and let's get right into it so i've got a brand new project here with nothing in it and what i'm going to do is i'm going to go over the jest getting started guide i'm going to copy over their kind of files and examples on how to get started and i'm going to skip the installation step so we don't adjust but we're just going to try get it to work so first step i'm going to initialize my npm project with yarn in it passing in the hyphen y flag just to skip all the questions and then i'm going to add the two files that are in the documentation here so that's some js and some test js so let's do that just now sum.js there we go and some dot test dot js i'm just going to add in the test of course this is just um calculating the sum of two numbers and returning that and finally i'm just going to add this script tag to my package json now of course this won't work because we haven't actually added jest um but what we are going to do is we're going to add our own gest equivalent and we're just going to call that just.js there we go and i'll just add that file just now just.js and right now the only thing i'm going to do here actually is i'm going to actually just require our test file just so we can start off with running the test first and then we'll work our way back so let's just do require sum.test.js so heading over to our test file of course if i try to run this so if i go to package.json and i try to run this test it's of course going to fail and the reason it's going to fail is because well the test function isn't defined and in fact if we head over back to our sumtestjs the expect and to be functions aren't defined either so let's go ahead and define them and take it from there so we'll start off with the test function and i'm going to comment out the assertion for now we'll just focus on the test function and i'm going to create a function called test and the first argument it's going to take is the name and the second argument here is basically the the function um or the test function or the test callback so i'm just going to call this text function and the idea of running these tests is basically we want to run the test function and make sure it just doesn't throw any uh errors and that's basically all there is to it so i'm going to add a try catch here oops there we go um and what we're going to do is we're just going to run the test function which is the callback that's been passed in and if it passes that's fine we're going to console.log the test name with a tick so what i'll do is i'll add this take here and i will pass in the name and if it fails then we're just going to console.log the name but we're going to add an x instead across and what we'll do as well is we'll also log the error that's passed in and it should just be as simple as that to get it running so if i now run this what i should see is great um i got the tick and the name of course we're not doing anything but if my test throws something so it throws an error so if there's an error and let's just type in um with a message what we should see is a failing test and we should see our message so if i just bring this up so we can see the x there with the name and we can see our message and that's the basic fundamentals of our actual um test function so next up let's implement our assertions so the assertions should be relatively straightforward as well um and of course depends on how many assertions or matches you're going to implement so we're just going to add this um basically this this 2b matcher um and we're going to leave it at that for for this case here but you'll be able to see how you can add kind of additional matches onto that um after so what we're going to do is we're going to add this expect function now this expect function here is taking in the the actual value um so the received value i'm going to call this received and what's returning here is actually an object and this object contains a function and these functions are your matchers so i'm just going to add the 2b function here so that's a function and that gets in the expected value so this function here we're just going to compare the expected and received and simply throw an error if they don't match so if um the received is not equal to expected i'm going to keep it very simple all we're going to do is we're going to throw an error and um that's it we're just going to add a bit of an error here so we're just going to say this is what we received just like this received and then we're going to say the expected value here just for uh slightly nice um oops expected slightly nice logging there we go so that's all we need and this throws the error which is then caught in the test function which is how it's displayed so let's see if that's all working so i'm going to run the test again and this passes no issues there but of course if i change this value from 3 to 4 let's say we run that one more time we can see that that fails um again it's got the name and it's got our nice error here we received three but we expected four perfect so let's pop that back to three so now this is of course all working but we still have the test and expect function all within our file so let's extract them out and put them into some sort of global area and then we'll focus on how we get all the tests running because of course right now we are just directly inside our jst file just directly running this one um one file so first thing i'm going to do is i'm going to create a new file i'm going to call this i guess i'm going to call this testsuite.js so this is going to be our test suite and we're going to go over to the sum test file and we're just going to take our two functions from there and we're going to paste them into the test suite and what we're going to do here in fact is we're going to add these to the node global variable so there is a global variable that exists with node and we're just going to add a test function onto that which just is our test function i'm going to do the exact same for our um expected function so again we're going to add expect and expect there we go so because we're adding these to the global we should be able to access these on the global scope as long as this file is imported so if i hit play now it's not going to work because um we've not actually imported this file so it doesn't it doesn't understand where to get from how do we solve that well we can go over to package.json and instead of just running node.js we can basically tell it um to load the test suite module so we can say hyphen r i load this module and that's i think it needs to be test and it's testsuite.js so load this module which adds the globals and then run our tests so if i run plane now this should all run fine and it's picking up the tests and if i can just jump into sum.test and if i command b into that it recognizes this is where the test is coming from so the final step here of course is how do we get it to run all our tests instead of just this single test so let's add another test here another sum test so let's just call this one another add 1 plus 1 is equal to 2 so that's fine and of course if i run this now it's not going to pick up this test because we're running specifically uh this file only so how do we do that well what we're going to do is we're going to run over to our jest js file and instead of just requiring a hard coded file we're going to search for anything or any file that ends in test.js and we're going to require them dynamically um so to help us do this we're going to import a dependency called glob glob and that's just basically going to help us pattern match all the files in this directory so i'm going to add glob as a dev dependency and then here i'm going to import it in so gloves equal to require glob perfect and what i'm going to do is i'm going to call the glob function so that takes in a pattern in this case i'm just going to say find me all files that end in test dot js this can be anything you like and you can pass in front options here um but we don't have any options we're gonna pass in uh alternatively you can just pass in the callback directly so we can pass in the function callback and the callback is it provides an error and it provides the list of files that it finds for you just like that um this is a bit weird with the options thing but if you check the the code base there first thing it does is it basically checks if it's a function and then assigns cb the callback to option so although it says options here it is the actual callback and that's absolutely fine so what we're going to do here is we can actually just console.log files just to see what it returns um if i just run play here we can see that it basically goes through and it returns anything that's test.js and the good thing about this is it does this recursively so even if you have files within you know nested directories this is going to work absolutely fine so what we're going to do finally is we're just going to basically loop over our files and we're just going to require them so for each file we're going to require the file and the only thing we're going to add here um just to get this working is the dot slash just to make it a relative path there we go so i think that should be everything so it's going to find all our test files it's going to require all them and as it goes in requiring each test then it's just going to execute the the global test function so i'm going to remove this here i'm going to run play one last time second last time there we go we can see both our tests are passing and the final thing here just to kind of make sure that the glob is working fine i'm going to add a directory um here we go called source and i'm going to move all my logic for the sum and the tests there we go into source so i'll refactor them kind of a typical pattern and i'll press play again just to make sure it hasn't broken anything there we go and of course just looks for a bit more than that but i think this is going to do for um our little clone just now and there you have it uh you can see there just in a you know few lines of code we've built a very very very minimal version of jest and of course this kind of same uh pattern or same framework applies to the majority of test frameworks out there uh you're running the tests you're checking if they they throw exceptions you're logging the errors and there's of course a lot of things that we're missing out but um this is probably a good place to start understanding how kind of these test frameworks work so yeah i think i'll wrap the video up there thank you very much for watching have a good day and i will see you in the next [Music] you

Channel: Redhwan Nacef

Views: 56

Rating: 5 out of 5

Keywords: Software engineer, software developer, how to, how to code, coding, programming, testing, java, javascript, learn to code, learn coding, learn programming, software, technology, computer science, YouTube, Redhwan Nacef, jest, test-framework

Id: UQap4i54YjI

Length: 10min 50sec (650 seconds)

Published: Thu Sep 09 2021