 So, hello everyone, I am Manjula, currently working at book my show as a senior developer. I am leading Mumbai women coders and currently also been a core part of Google Developer Group. So, today I am going to talk about testing and what are the ways you can do testing in while you are using React application. So, the first question that would be is do you really test, stop line? So, I think yes, so it is like most of us I think do not test what we write. So, there are different problems that needs to be sorted out why are we not testing, there are different tool sets and different dependencies that makes us write less test cases. So, at the end it just happens that developers as in we just like and love the idea of testing, correct? So, what are the existing problems? The existing problems are whenever the effort is more we end up writing you know less test cases, but when the effort is less definitely we will be writing more of test cases. So, today at this session if you are writing more if you are writing test cases you are already winning, but if you are not I am going to encourage you to write more of test cases. So, we prevent our bugs, what are the ways we can prevent our bugs? So, we at book my show are very big company we have certain movie releases happening every Sunday or so there was a Bahubali release which happened. So, we do not want that you know there are some bugs that are that are draining us. So, what we should be writing test cases. So, we at book my show are using flow that is a static type checker. So, it will basically check your bugs at the compile time. Secondly, yes we are using ESLinting so ESLint is nothing but a set of style guides both for JS and CSS. Third testing, yes so we are doing testing so for testing how many of you are like using just at production just a quick hands up, okay cool. So, yes before moving to just first let us discuss why testing. So, get some bugs before they can happen. Note it is some not all so we can definitely catch bugs before they can happen. Next is they sort of act as a executable documentation wherein you can have your tests for all your code. Third is obviously writing a better code because if your code is testable you can sort of write a better code and it is also visible and the other developers can also read it in a better way. Fourth is obviously it gives a stability to your software and it is easy to maintain. So what are the what are the kinds of testing we do have so there are a lot of them there is the A, B testing there is performance testing, fast testing and what not but we aren't doing all of them right. So today I am going to focus on unit testing and how are we doing it at bookman show so we are using just for testing framework there are certain tools so as you see javascript has provided us with certain tools also so there is chai, mocha, cucumber and what not but we are not using all of them to test right. So we at bookman show are using just to test our react components. Now what is let's start with unit testing in react app what is unit testing so what is unit, unit is nothing but your function a function can be anything it can be a component it can be a reducer it can be an action in your react application but today we are going to basically focus on how we can test your react components. So how do we test our react components we are using just so just is a framework which is built on top of Jasmine where it provides you all the global functions like expect and test runner so it sort of gives you and global access to all of the functions you need not install or dependency like chai, mocha or anything else it just gives you a global access to all the functions why just so the reason we chose just was a lot of them first one was it was very easy to configure so it was just we had to install just and no other dependencies secondly we started with a jasmine based tech stack and moved on to just so yes the transition was quite fast and the test cases which used to take say about 2.3 seconds in our build was reduced to instant run so there is a very cool feature which I am going to show it in a demo the snapshot testing was a very cool feature given by Jess we are going to talk it about later fourth was our code coverage so code coverage is nothing but it sort gives you a result of whatever code you have created a test cases for both it had a watch mode so to setting up just like very simple it's you can either do it from npm or yeah this is the small snippet wherein I have just installed just as dev dependency and I also have a configuration of code coverage result which is set to true so what is snapshot testing so this is very cool feature given by just it is similar in a way we used to do UI snapshots wherein you used to compare images of your app in one state to the image of another app but here the just is improving it in a way that it gives you a reactor it gives you a renderer wherein when you are rendering your component it sort of converts your snapshot to jason string wherein you are actually comparing jason string you are not comparing image snapshot wherein in case of image snapshot there are a lot of unused information which is being sent like browser information so and also the test run is very sort of slow in that case when you are comparing images but this snapshot improves away because you are comparing adjacent how does it work so when you are first running the test case it sees whether I have a snapshot or not and yes if it has a snapshot it saves it in a file so the first run of always of your snapshot will pass while the second time when you are running your test if you have updated or over iterated your component you need to see that you have updated your snapshot but if not it will fail so this is not a manual process wherein you are going in and you know updating your snapshot like that's like a very difficult every time you are over iterating your component you need not go back and change your snapshot that's not what I want to do but that is if that is possible with a single command why not how do I update my snapshot so okay we start good developing a component say book my show has like you know set of different teams and there are different teams working on different part of components and in a component say three or four teams are working and you know mistakenly some some developer goes and changes certain things in the component and I do not know so now this change in enough is an unexpected change which I do not want to do in that case I will be fixing my code to match the snapshot but yes if the code which I have changed is an expected one what I'll do is I'll go back and update the snapshot so if you see the snapshot has changed but the expected change is the one I want so I'm going back and updating my snapshot well in the case where I don't where I see that it is an unexpected change I go back and I say come on fix the code until it matches the snapshot so what are the benefits of using snapshots so it sort of gives us a very automated process because I'm not every time going back and you know manually changing my test cases everything is just in the simple command line I am going back and updating my snapshot whenever required and if not I'm just going back to the code and fixing it it's very easy to maintain and very easy to adapt for a developer next is let's test so I'll show you a quick demo of a component so we're going to test the book button which in our case will be an action button so I'm quickly going to show you a demo so you see this action button wherein this is my component it has some props that is being passed before that let me just show you the packet.json file wherein I have included jest and I have also included react test renderer which will sort of help me to render my components of react or react native on the DOM so let me go back to the test which I have written so the test says that a tree wherein I'm just rendering my component and matching it to the JSON string and the second step says that whatever I have created should match the snapshot so the first step is you're creating a snapshot of whatever component you've created and the second step is just matching your snapshot. Let me just run this code the snapshot has passed now what happens after you run this particular test what happens is we have underscore underscore so this is a mandatory thing which needs to be there so you always need to write your test inside this folder and now you see that as soon as I run my test I have a snapshot folder which gets created and inside this so this is how your snapshot looks like so it's completely JSON string in the form of JSON string this is a small demo wherein I just created a snapshot of my button component run first time it did pass now what if I have some other developers which goes on and you know so he decides that he changes the code in a way wherein he doesn't want certain props to be passed in that case when I run the test again it fails because I have haven't updated my snapshot correct it was an unexpected one which I do not want so I have a clear picture over here okay something is wrong with my code I need to go back and fix the code to match it to my snapshot secondly if it is an expected change what do I do do I go back to my snapshot and change it I do not even understand how and where should I change it but then this is not the way so the way we update our snapshot when you're sure that the change was an expected one is you say just update snapshot so yes your snapshot is being updated and at the last you see because the in my configuration in packet.json the code coverage was true so I'm able to see the result as well and it shows 100% so I have covered all my test cases for whatever code I have written so that was about update snapshot let me just switch back to the slide github link to whatever I did just now next so the future scope of jest is like it is also coming in for the browser snapshot so you'll be able to render it in browsers secondly they're also planning image snapshots where you could also test your CSS files like test any style changes so Dan Abramov is one of the creator of Redux and he says that you know it is not going to go anywhere in you know next two to three years because Facebook is entirely testing its code with jest so jest versus enzyme so this is just I'm not going to deep dive into it so I see a lot of article being asked that you know what should I use should I use jest or should I use enzyme where I see that it shouldn't be compared because this is like comparing aptal and oranges these are all together different things enzyme is a utility that helps you render your components on the DOM tree and query your DOM tree as well as jest is a provides you with sort of test runners and it is a testing framework so they work hand in hand and they are supposed to work hand in hand if you are testing your react components using both of these it is a great idea so I'm not going to deep dive much into enzyme because it's altogether another topic there's some shortcomings of jest I'll quickly go through it as there's a shortage of time so merge conflicts yeah so this is the one where you should be careful off because your snapshots without your committing is purely adjacent string you might end up in a merge conflict which shouldn't happen and which will be like very difficult if you want to resolve it secondly overuse so sometimes we try to overuse a snapshot feature of jest like you try to test your reducers and actions which shouldn't be the case because reducers are the part where you have your business logic and that is where PDD should come into pictures and you shouldn't be doing it with a snapshot feature third is obviously you cannot PDD and some business logic would still be in your application so how it helped us moving from Jasmine so since we are using only to test components we moved from Jasmine bit text stack to jest the way it helps us is the developer was only focusing on one framework instead of multiple one which is chai mocha and he's just focused over here and not you know finding in problems to use some other frameworks or dependency should you use art not I would say definitely yes if you are testing your react components but yes you should be careful that you're using it at valid places as I said not testing your reducers or actions that's it and here thank you so there's a medium blog which I have written for the same you can go and have a look at it thank you