Test Driven Development with AsyncStorage

what's up folks spencer here with another lesson of react native school today we're going to be doing some test driven development when using async storage it's something i've been spending a lot of time doing uh lately over the last few weeks so it's something i just want to share walk through that process so we've just got a basic app here it's just the result of react native init if i go ahead and open up the terminal in here and run yarn test you'll see that the automatic tests that just has or that react native includes via jest are already here so what we'll do is actually expand on these so when we're using async storage and when we're testing something that interacts with async storage we need to actually mock that library and rather than doing it all manually i like to use this package called mock async storage it's the one that i found works the best and has the best most consistent api i found other ones that just didn't work quite as well so this is one we're going to use to actually use it i'll say i'll copy mock async storage go over to my terminal window i'm just going to say yarn add dash dash dev mock async storage we want to add this as a development dependency since this is something we only care about in development and if we look back over here you can see we need to set up files after env and it tells us uh rooter directory and then a setuptests.js so i'm just going to copy this part go back over to my project and i'll close out terminal quickly we'll go to our package.json and inside of there you'll actually see a jest configuration we'll just go ahead and put that in there with that we want to make sure we actually format everything correctly so our project doesn't yell at us and now let's actually set up this setup tests.js file going back to my async storage you can see what it actually takes to set this up so we'll just go ahead and copy that paste it in here and you can see i'm getting a few eslint errors basically it doesn't like my single quotes but this will be fine actually not sure why it's yelling at us anyways you can see here what we're doing here we're importing mac async storage we're actually creating a new instance of mock async storage and then we're saying just.mock at react native community slash async storage mock implementation uh the reason we're doing that is whenever we import this we actually want to use this mocked version of it versus the real thing so that reminds me we actually need to add this package so i'll go ahead and say yarn add react native community async storage and depending on your version of react native you may actually need to go ahead and say react native link react native community async storage so with that complete let's go ahead and start implementing our project so what i'm going to say is create a new file called recent search.js and we're going to have two functions we're going to have save recent search i'll just go ahead export account save recent search we're also going to have get recent search we're also going to need to import async storage from at react native community async storage and we've got that function let's go ahead and set up our test file as well so i'll just go ahead and create a new file in here i'm going to say recent search.test.js if you use test.js just will automatically pick those tests up for you from here i'll import the get recent search and save recent search from dot forward slash recent search and then the way i like to do this is i'm going to describe each function so get recent search it's going to be a test block and then describe save recent search will be another test block i just went ahead and disabled eslint there to save a few errors so something else we're going to want to do is import async storage from at react native community async storage and since we're going to be working with this and interacting with it something you always want to do whenever you're working with a mock library is basically clear everything up this goes for really any test is each test should be its own unique test bed so with that since we're working with async storage what i'm going to say is before each it's going to take a callback function in there i'm going to say async storage dot clear so that basically means delete everything from async storage and this is an asynchronous action so what we'll want to do is actually use async and await whoops so i'm just going to put in front of this async storage.clear and await so that it waits for everything to clear before it goes ahead and runs each one of these tests let's just go ahead and make sure whoops this is right so we'll test uh it works and we'll just expect true dot to be truthy let's run this test to make sure our test is being picked up so i'll say yarn run or just yarn test all right it's picking up our test it passed both of our test pass that one took a while longer since we're not actually using this test i'm just going to go ahead and delete it but what we'll do now is actually just let's move recent tests into that test directory just so it kind of fits there that means we actually need to make sure we update the import path dot dot forward slash recent search so it goes out of the directory and grabs the right file and then i'll go ahead and delete this test so it speeds things up the app dash test.js now we can go ahead and run this again and that works for us so what i'm going to do is actually add yarn test desktop dash dash watch so it just keeps re-running our test as we change our files okay we're actually going to use dash dash watch all because we don't have git enabled and we'll open that up whenever we run our tests okay looking at get recent search what are things it's going to do first if no results exist at key return an empty array otherwise another test is it returns an array of recent searches and that's all our get recent search is going to do so let's write tests for that just go ahead copy this so we can say test i'm going to use async await in here because our get recent search is going to be an asynchronous function or it's going to return promises so we can use async await so what i can say is counts result it's going to equal await get recent search okay and then we're going to expect result dot 2 b actually i think it's going to be 2 equal in empty array alternatively we could just say expect result.length.2b1 but i want to do two equal to make sure it is an array next let's go ahead and set up our returns in array so we'll say test returns an array of recent searches put our async up here and i can say const result is equal well to the same thing up here this time though let's just say it's going to be an id of 1. so it's going to return an array with this in it now to make that actually happen we need to go ahead and say await async storage dot set item at whatever key get recent search is going to be so i'm going to set the key as demo recent search okay so now if we look at this test result you'll see we've got one test failed actually we've got two test failed which is what we expect because our function does nothing so first off looking at get recent search well we can say let's just go ahead and so get recent search we've already imported our async storage let's go grab our key so we've got demo recent search we'll use async and await in here again we can say const result is equal to async storage dot get item demo recent search we can say if result we'll go ahead and return json.parse result if not we'll just go ahead and return an empty array and if you're using async and a weight well first we need to make sure we await the response from async storage you also want to wrap things in a trying to catch so what we're going to say is try catch this is our positive outcome and if something goes wrong we're just going to return an empty array so let's run our test looks like this is expecting okay so if i change fix my syntax error we can see if no result exists at key return an empty array that's good but we can see our second test returns an array of recent searches we can see that we've got we expect an array of objects with an id of one but we get an empty array so let's go look at the implementation can see we're going to well we see we've got a typo here so async storage dot get item save okay so even with that typo we still have an error or with the typo fixed we still have an error so let's go over here and we can see async storage.setitem i'm not actually setting any items so i'll go ahead and put json.stringify the array with id of one and we can see here our tests now successfully run so that's our get recent search it's pretty basic uh what about the save recent search well what do we want to happen here we're going to say it adds the latest search to the start of the array that's one test it's going to add an item to we'll say if no recent search exists adds item limits the result of recent search to three and then finally it's going to accept optional second argument to clear all response clear all recent searches how about that okay we're only going to do a few of these and then i'm going to leave the rest for you so what we'll do we'll do this if no recent search and we'll also do this ads the latest search to the start of the array and you can do these next too so let's go ahead and add these in so we'll say test again we're going to be using async and wait okay so we've already imported our save recent search we've got async in here so what i'll say is save recent search if no recent search exists it adds an item so we'll go ahead and just set this up as an id of one so await that and then we can go ahead and say we'll just go ahead and get recent search because we've already tested that we're confident that'll work and not break our tests so i'll just go ahead and say cast result so we expect this to give us this response likewise let's just go ahead and copy this over we'll do an await save recent search with an id of one and two and we want the most recent search to be at the top of the array we're at the position of zero so we expect it to equal an array with an id of two and an id of one in that order if i save this and run our tests we'll see both of those fail so if we go to our save recent search we'll wrap this in a try and a catch in this case again we'll just return an empty array if there is some or we're just going to return if there is some error we don't really care about errors in this case it is something to add in later on if you so wish so we'll use async await up here so if no recent search exists adds an item so let's just say that we're going to return async storage dot set item at our demo recent search okay we need to make sure we stringify this and we know we're going to take the actual recent search and stringify that which it needs to be an array we'll save this and we see we've got if no recent search exists adds an item so it does that successfully however our second test is failing because it's just showing us a an array with the id of two because we're not actually adding to it we're just going ahead and replacing it so what we'll want to do here is actually say const recent search is equal to await get recent search and then we can say const new recent search is going to equal an empty array we're going to copy over the existing recent search and then we need to add actually this needs to be instead of recent search we'll call this existing search so we're making a shallow copy of the existing search and copying it into a new array and since we know recent search needs to go at the front of that array we can go ahead and copy recent search to that front and then copy over the rest of the array now for new recent search we can just go ahead and swap that down here and we know that with get recent search because of the test we wrote previously is either going to return the recent results an array of the recent results or an empty array so we don't need to do any checks to make sure that existing search is already an array so if i save this and run it you can see all of our tests are now passing so that was just a quick rundown on running some writing some tests uh test driven development for async storage related testing uh you need to make sure you actually import a mock library or mock the library yourself it's going to be true for any third party package that you interact with in any of your functions in your tests you want to make sure you actually clear that out so you have a clear testbed i like to set up a describe block for each one of my functions and put my test cases for that function inside of the describe block and that's pretty much it i i definitely encourage you to write tests for these next two test cases add some additional test cases to handle errors as well just to get more comfortable with it i struggled a really long time still kind of struggle with testing but what i found is get some examples in and then get some repetitions of actually writing tests for yourself so i hope you found some value in this and i'll see in the next lesson

Channel: React Native School

Views: 2,381

Keywords:

Id: _F9A7LqipRw

Length: 17min 4sec (1024 seconds)

Published: Tue Jul 28 2020