Check out a free preview of the full Production-Grade TypeScript course:
The "Testing" Lesson is part of the full, Production-Grade TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike installs Jest and the type definitions for Jest to enable testing in the TypeScript Project. The preset-env and preset-typescript Babel plugins allow the test code to be written in TypeScript and the source code can be tested without first being transpiled to JavaScript.

Get Unlimited Access Now

Transcript from the "Testing" Lesson

>> The next concern we're going to focus our attention on is testing. So, at this point, we wanna ensure that we've installed all the things necessary for testing. You may have already installed jest as I did earlier, in one of the early steps. There's some additional stuff that we need to allow jest to work nicely with TypeScript, and we're going to add those right now.

[00:00:26] So it's not harmful. I already have this I know I do, but in case you don't, this will get it for you. We're gonna get jest itself. The type information for jest so at types, this is stuff coming from definitely typed. We'll talk more about that later. And then some Babel plugins, Preset ends and preset TypeScript.

[00:00:57] So jest is probably the best test runner to use with TypeScript, as of the time this course is being recorded. In that, if you have the right Babble plugins in your project, it kinda just works. So now that we have that installed, we can check our package JSON, make sure it happened, there, I see these here.

[00:01:24] It's a good sign. Time to create our first test file. We're gonna make a directory tests, and I'm going to create our first test file in there, we'll call it index.test.ts. So I've just grabbed the test content from the workshop notes. And I'm going to paste it into this index test ts folder that I just created.

[00:01:55] Now, I'm being yelled at, about a bunch of things. It's an unsafe call of an any type value, right? We're not quite done yet. And part of this is saying the use of jest in terms of this global described variable being allowed. It's like you told me that you can't use any types and so we're gonna have to get into this and resolve it.

[00:02:30] Like I didn't import described from anywhere, and it is objecting to that. So our tests need their own ts config. And, once again, we're gonna extend. This is all in the notes by the way, so you can copy paste. We're gonna extend from our base level ts config.

[00:02:57] We're going to use something called references. So this is what allows us to have sort of two disconnected sub projects within this repo, and it allows us to refer to the already built source folder in our test folder without having to compile everything all together. So we'll say name,it's my lib, and the path is the home folder of this project.

[00:03:29] Compiler options we're gonna say, I allow jest, and my root dir is the home folder. So your root directory needs to contain all of the source code needed to make things work and in this case, the tests also need source. And so we have to consider that to be the root directory here.

[00:03:52] There's one two more things we can add. One is include, and we're gonna include, we're going to say everything in the test folder is what this tsconfig pertains to. And then finally, no omit true. Jest is not going to require that we actually build JavaScript files from our TypeScript.

[00:04:14] It just needs this tsconfig to exist. So no emit true is safe to do in this case. TypeScript is helpfully telling me I forgot something. So I must turn on composite true, when I'm using a reference like this. So if I turn that on, this should quiet down.

[00:04:48] We perturb it and see what happens. Let me try restarting my language server. It's giving it a fresh look at my codebase. And That's long enough that I feel like it's type check this and it's no longer barking at me. So we have this project reference thing. We have our dedicated tsconfig, man we're getting so close.

[00:05:18] One last thing and it has to do with Babel. So we have to create a dot Babel RC And this is what just uses, uses this Babel RC file to understand how to transform our test code, and consume it. So our presets, our Babel preset, And it's we use this like nested array syntax.

[00:05:53] And we're gonna say targets Node 10. And then the second preset we're using is Babel/preset TypeScript. There we go. And, if I've done my job right here, so these two is a sign that the compiler is happy. It found type information. Yes, lint is saying I am trying to call an any as if it's a function.

[00:06:35] So what this is telling me is that eslint is not quite clued in to the TypeScript project. So I'm just gonna look and make sure that everything seems right. Okay, that seems right. What I want to do is I want to restart VS code, because while I did restart the TypeScript server, I have not restarted eslint, and sometimes that's what needs to happen.

[00:07:07] So I'm gonna look down here in the status bar for a little eslint icon. All right, I see two checks, the servers running, and no more red squiggles. So that like, this is a good [LAUGH] example of something I've learned from experience and I'm passing to you so you don't have to learn it the hard way.

[00:07:24] Bounce eslint as an early step of debugging, because we could have gone down a whole rabbit hole here, and tried to figure out what was wrong, it just needed to stop and restart. This is often what's gonna have to happen as you change config files, not something you do every day, but definitely something you're doing while you're trying to kick the tires and make sure that your project is working as expected.

[00:07:51] So let's just double check yarn lint. Oops, that is not how you spell it. Zero errors yarn build. Zero errors yarn test. I expect some errors here, because my code being tested is pretty shoddy. Maybe this isn't the shoddy code. Nope, this is the good code. We're gonna be dealing with some obviously broken things later on.

[00:08:26] So we've got our test cases, and we can see this nice little like. Output here. Note that my dist folder still just contains my library. I didn't need to explicitly say, my tests are in TypeScript. I'm going to compile them into JavaScript so that Jes can understand them.

[00:08:43] Just understands it. Just because I have this Babel RC. I have the right plugins there. So here's what we have. We didn't have to reach for Webpack, we're just using TypeScript as not only the type checker, but the thing that's emitting the types and the JavaScript. We can write our tests in TypeScript.

[00:09:03] We can write our source code in TypeScript here. Let me make sure that this condition holds true as I hoped it would. Can I do Right, I'm not allowed to use this jest specific thing. Let me put them side by side so we can see what I'm talking about here.

[00:09:27] Right, so I have this describe I can only use that in my test folder. This is great. It's a dev dependency. You don't want this in your app code. You don't [LAUGH] wanna accidentally bundle jest or your assertion library in with your app and here, you won't, you'll be yelled at for doing it.

[00:09:46] So we got that nice division of concerns. Minimal toolchain linting testing, a pretty simple build, and what you see is what you get here folks.