Kent C. Dodds: 0:00 Let's hit up this extra credit to use @testing-library/jest-dom for much better error messages. Let's say, what happens if I have a typo here and I expect it to equal to? I'm going to get this output here, which is basically "Hey. These two strings don't look the same."

0:18 I have a nice stack trace and code frame here. Things are quite OK. It could be better to communicate that, "Hey. Specifically, it's the textContent of some DOM node is not what you expected it to be." That way, my error message is a lot more helpful. This is where jest-dom comes into play.

0:37 Basically, what I want is I want to say, "Hey. Expect, I'm going to hand you a DOM node and I want you to assert that it has a textContent that equals this." It should be toHaveTextContent. You'll notice that I have some autocomplete right here. That's because I already have this library installed.

0:55 With that, I can have a much more helpful error message from that assertion that'll say, "Hey, by the way, the DOM node that you passed does not have the text content you expected it to have," which gives me just such a better error message.

1:09 There are a couple ways to import the jest-dom assertions so you can use these assertions, because these do not come baked into jest by default. The way that you do this is with import '@testing-library/jest-dom/extend-expect', or you can just do a direct import of jest-dom. That is basically an alias to extend-expect.

1:32 We've already done this for you. If you take a look at the jest configuration, this is another way that you can make this work. You can use this setup files after env configuration. That will be testing-library/jest-dom/extend-expect right there. These are the files that will be automatically loaded into the test environment when Jest gets rolling.

1:53 If you're using something like create-react-app, which doesn't allow you to configure Jest, then you'll want to use the setupTests file that you'll put right here in your src directory. You just do new file setupTests.js. Then in here, you can import '@testing-library/jest-dom/extend-expect'. That will work just as well. If you're using create-react-app, that's what you're going to do there.

2:17 For us, because we have control over our Jest configuration, we're going to use the setup files after env. That's where we stick that extend-expect. With that, our Jest has been extended. We can now use this specific assertion.

2:33 If we save this, then we're going to see a slightly different message here saying, "We expected an element to have the textContent of currentCount 2, but it actually has currentCount 1." That may not look a whole lot more useful than what we had before, but jest-dom does have quite a few extra assertions that you'll find to be useful.

2:55 I recommend that you take a look at the documentation for jest-dom and become familiar with those assertions and prefer those over the built-in assertions that we have.

3:03 Let's go ahead and do that right now. We'll say toHaveTextContent for all of these. Let's update our assertion to be correct. Of course, this will not be .textContent, but the node that we want to check the text content for. There we go. Now we have a passing test.

3:23 What we did here was not a whole lot. We changed the message.textContent to just simply message, and then our toBe to this toHaveTextContent. Now we're expecting this DOM node to have a certain text content.

3:38 The only way that this is possible is if we preload all of the expect assertions that are built into jest-dom by installing jest-dom, and then adding it to our configuration here in our jest.config, where we specify that it's one of the setup files after the jest environment has been established.

3:57 If you're using something like create-react-app or something that doesn't expose the Jest configuration, then you want to have some setup file that does this import for you. With that, you'll have access to all of the awesome assertions that are built into jest-dom.