Kent C. Dodds: 0:00 One of my favorite subjects around testing is the idea of avoiding implementation details. Implementation details are basically the things that users don't care at all about.

0:09 For example, I've got this multiply function. You can implement this in basically infinite ways. It doesn't really matter to the user. In fact, the user doesn't even know that we're using React. It doesn't know that we're using function components versus class components.

0:23 Your test should be pretty ambivalent to all of this as well. Trying to keep your tests as implementation detail-free as possible enables you to refactor things. When we made the big change from React class components to React function components with hooks, if you had to change a bunch of your tests because of that refactor, then you probably were testing implementation details.

0:48 For me, I was already using React Testing Library, and I didn't have to change very many of my component tests at all because I was avoiding implementation details with React Testing Library. That's what I'm going to teach you about.

1:01 In this exercise, we're going to learn about how to avoid implementation details using React Testing Library. Feel free to read through this background information, get a little bit of an idea of what we can do to select different elements on the page. It also gives you some blog posts and some documentation that you can take a look at as you get geared up for this exercise.

1:21 For this exercise, we're just building on what we had before and swapping out what we're doing for implementation-detail-free queries that we can use to make our tests refactor friendly. We also have some extra credit to make our interactions with our component resemble the way that our software actually functions in production as well.

1:41 Go ahead and take a look at that, and I will see you on the other side of this exercise.