React Testing Library - Install and Write Your First Test

[00:00 - 00:28] So it's time to start testing our components and to do this we are going to use a library called React Testing Library which is the state of the art library to test your React components. So to quickly use this library let's execute this command but only in our React package so yarn workspace react then add and as a development dependency this library.

[00:29 - 04:00] But to use this we will also install some additional libraries that they are required like the test DOM library and then install just and then we need some supporting libraries in order to transform the TypeScript syntax and everything to play in JavaScript so we will use bubble for this job and now that everything is installed let's jump back to our code editor get to the react package and let's create a file called zest.config.js and this is a really simple configuration just that we will use as a test environment that's a yes DOM and then we can create one more file bubble.config.js and paste this one and we are doing this manually as we did not use any create React package so we have to set this up ourselves and probably we will be ready to go and let's create a new folder called tests 200 score tests 200 scores and then here let's test our button button.test.tsx and copy and paste the code you will find in the text version of this course but let's move this folder here but what we are doing wrong yeah we don't export this as a default so this should work so here we have our first test and what we are doing we are creating a mock function that we listen to the on the clicking events we render a button and then we fire a fake click on the screen and we expect the mock function to have been called one time and then to have a text content of demo button which is basically what we render so this is a pretty basic test and to actually use this we will go to our package file and add a new script which is the test script and then just run just and again the same approach we targeted the React package and we run the test script now run the test and everything works as expected which is really nice and in the next lesson we will see how we can enable accessibility testing so we can pinpoint some accessibility issues that we are probably missing in the code development