Using jest-axe to Find Accessibility Issues in React Components

[00:00 - 04:15] So we discussed about accessibility testing and more importantly automatic accessibility testing but let's see how we can make it happen. Let's close every file and go to the react packouts and to the test folder creating new icon button test.tsx and we can paste the following code inside. Again let's remove the brackets and we are doing basically the same a mock function we pass this as a callback and we need to test if it's being called or not and as a children we are providing an SVGI basically and let's again run our tests and we can see that everything is passing so why it should not pass. The thing is that if we remember from from the storebook add-on we can see that this is not an accessible button we do not provide an area label and it should not pass the test accessibility test but here for some reason it passes and and this is expected because we don't test explicitly for accessibility and to do this we will use a packouts called axe accessibility. This is a state of the art software you use for accessibility testing and there is a real nice package called just axe which is basically providing some just maths functions for your component testing so we will install this right now and then we will refactor our test to use these packets so here we will import from just axe axe and the function to have no violations and then we extend the expect function to have this method and then we will go below here and paste those two lines while grabbing the container perfect so what we are doing here is that we render our component and we grab the container we pass this to axe which is an asynchronous function and we wait for the results and we expect the results to have no violation so we can go again and run the tests and let's see what happens now we can see that we are failing for the accessibility tests and why is that the test is giving us a URL where we can visit basically to describe the reasons and it says that the buttons must have a must have something of a text for screen readers that people can read or listen to and if you can see the test we are failing to do this we have the SVG children and then just an on-click function but nothing else so that's what we are going to fix right now we can explicitly defined an area label which is an icon button and then if we test again we can see that the tests are now passing thus by providing an area label and this is really nice to pinpoint accessibility issues in them in the development phase rather than pushing them into production without even testing for accessibility and that was it and let's go to the next lesson