Testing React Applications, v2 Testing Fundamentals

[00:00:00]
>> Kent C. Dodds: So we're gonna talk about different forms of testing really briefly. This is one form of testing, Static Code Analysis. This is happening through a tool called ESLint. If you have your editor configured to work with ESLint, you might see some ESLint warnings as you're going through. ESLint can be really helpful at identifying very simple bugs.

[00:00:23] There's also static type checkers like Flow that can catch also, pretty simple bugs. But, in general, the nice thing about these tools is that they work statically and so they don't have to run your code. So you don't have to really write these tests. With Flow, you're sort of writing tests in the source with the typing.

[00:00:41] But yeah, in general, there's not a whole lot of effort around writing these kinds of tests or configuring these kinds of tools. So I highly recommend that you use these tools. We will not be using these tools today. I thought it was enough just to teach you testing React.

[00:01:00] It'd be a whole another workshop to teach you a static type checker. But in your applications, I definitely in React recommend using flow-typed or TypeScript, and then obviously ESLint is kind of a given. One thing I should say about ESLint is please don't enforce style rules with ESLint like code style, code formating.

[00:01:23] It's silly, because we have Prettier, an amazing tool that will automatically format your code for you. Use that instead, and then us ESLint just to catch actually problems like. Variables aren't defined, stuff like that. Because the last thing I wanna do is see a red squiggly because I have an extra space after the function keyword.

[00:01:45] My code's still gonna work, and then Prettier's gonna fix that when I hit the save key anyway. So here's just a quick example of a unit test, don't look to closely because this is you first exercise. Just kidding, feel free to look as closely as you like. So we have React and ReactDOM.

[00:02:02] And when you wanna render an application, you ReactDOM.render. You could do the same thing in your test, there's nothing wrong with doing that. And I'll show you with Jest, you can configure it to simulate the browser environment in Node. And it's using jsdom, so doing document.creatElement totally works.

[00:02:22] And yeah, you just use the component the way that you would use it in a source code elsewhere. And then you can make assertions based on what is rendered. So we'll look deeper into that, but unit tests are generally pretty straightforward. And from a purist standpoint, a unit test will mock out all of the dependencies.

[00:02:45] I care less about that. So for me, the unit versus integration test is a little bit fluid. But in general, unit test is a kind of a smaller test, testing something in particular. Integration tests with regard to React is a little bit kind of a bigger experience. And so here we're rendering the entire application with the router.

[00:03:10] And we can specify, hey, route to this page and I'll show you how to do all this stuff. And so it takes a little bit more work. You have to mock out API calls and stuff. But with this, you're rendering more of the many components working together. Yeah, so that's the idea of an integration test.

[00:03:36] You get a lot more coverage with an integration test than you do with the unit test. But in general, they can be a little bit slower and also can be a little harder to set up, because of the network requesting things that you have to mock out. End-to-end tests is a totally different thing.

[00:03:55] It's not Jest. This is with Cypress. And you're kind of treating the application as a black box that user, from a user's perspective clicking on things and typing in some text. And then verifying the state of the application sort of in a way the user would. And so that is an example of an end-to-end, and we'll look into all of these forms of tests.

[00:04:21] Okay, so I'm not gonna go too deep into this, but this is link to a blog post They have called. But really what is a JavaScript test? Where I kind of iteratively build an insertion library and testing framework. We actually did that in the testing workshop yesterday. And if you're interested, then you can jump in the project in the other directory whats-a-test and start with 1.todo and follow the instructions.

[00:04:48] And you too can build your assertion library in JavaScript framework. But the fundamental concept of a test in JavaScript is it's something that throws an error when things are wrong. So if I pass the numbers one and two to the sum function and I don't get three back, then I'm gonna throw an error.

[00:05:11] And then the testing framework's responsibility is to make it clear why that error occurred, where the problem is, and how to fix it. That's kind of a hard task, but that's the general idea of what a JavaScript test is.