React Project: Bug Tracker (with React Testing Library)

In this tutorial, we'll create a simple React app intended to list bugs in your project but we'll also write some tests for the app using the React Testing Library. Testing starts at 21:06 Completed project is here: https://github.com/codebubb/react-testing-library-tutorial React Project: Bug Tracker (with React Testing Library) --------------------------------------------------------------------------------------- 00:00 Introduction 00:32 First test 03:49 Creating the Bug Tracking App 07:19 Creating the Form 13:29 Rendering Bug List Table 17:46 Styling the app 21:06 Testing the Bug List Table 33:06 Testing the create new Bug form 36:55 Conclusion So this tutorial is all about testing React apps and using the React testing library. However, we need something to test before we start so the first section of the video will be all about creating a simple bug tracking app (it simply lists a number of bugs entered by the user). Once we've got our app set up we'll start writing React tests by using the React Testing Library which will first of all render the table of bugs component and check to see whether the bugs passed in are displayed on the page. We'll also check that the ability to 'resolve' a bug works correctly. With the bug table component tested, we'll check that the ability to add a bug works correctly by using some additional functions from the React testing library to enter user input into our main app component and then click a button on the page to submit the add bug form. Along the way you'll learn about how to structure a test with the Arrange - Act - Assert convention and also the different ways that you can query components that our rendered via the React Testing Library, including how to get items by role or a specific test id. #react #reacttestinglibrary Channel Handle @codebubb