Initial setup

[00:00 - 00:10] Initial Setup To begin working on this project, copy the code 0-2 testing 0-2-0 -2 initial setup to your workspace folder. It will be our starting point.

[00:11 - 00:18] In this tutorial, I assume that you will be using VS Code. Open the project in the editor, you should see the following file structure.

[00:19 - 00:27] Our application is written using Create React App, so Jest is already pre- configured there. Jest supports TypeScript out of the box. We don't need any additional setup to run the tests.

[00:28 - 00:37] To verify that everything works, install the dependencies using Yarn and run the tests. Yarn, ignore, engines, and Yarn test.

[00:38 - 00:52] It will launch the Jest Runner in watch mode. If you change the code or test files, it will re-run the tests. You can quit the runner by pressing Q. We use ignore engines here because the NES.css package that you can find in the package JSON.

[00:53 - 00:59] We use it to style our application. It is only compatible with Node with version around 10. And you likely have a newer version.

[01:00 - 01:11] Install VS Code plugin. If you are using VS Code, then you can install a useful Jest plugin, install extensions, and then here look for Jest. You need this one from Orta.

[01:12 - 01:17] This plugin will automatically run the tests and display the test results right in the text editor. It will look like this.

[01:18 - 01:26] To verify that it works, open SRC, upspec.tsx. You should see the green check mark near the first test case.

[01:27 - 01:41] If it's not there, you can try to run command Jest start or runners. Having those results in the gutter instead of having to run the tests in the terminal is very convenient, because this way you get the visual feedback from running your tests way quicker.

[01:42 - 01:46] Enable debugging tests. Before we begin, there is one more thing that is good to know.

[01:47 - 01:58] How do you debug your tests? To enable debugging in VS Code, you need to add a launch JSON configuration into that .vscode folder in the root of your project. In this project, I already did it for you. There is launch.json.

[01:59 - 02:05] Let's open it and see what it contains. Here we specify a launch configuration called debug_cra_tests.

[02:06 - 02:12] It uses React scripts with parameters from ARX field. Here we have test, run and bend, no cache, and watch all falls.

[02:13 - 02:21] So, run and bend makes the tests run serially in one process. We use it because it's hard to debug many processes that are running at the same time.

[02:22 - 02:30] No cache, disables the cache to avoid cache-related problems during debugging. And watch all falls, disables rerunning the tests when any related files change .

[02:31 - 02:38] We want to perform a single run, so we set this flag to false. This configuration will work with any create react/up-generated application.

[02:39 - 02:42] Set a breakpoint. Let's verify our debugging configuration.

[02:43 - 02:49] Open the C-upspect.sx and place a breakpoint. Somewhere here, where we define a container.

[02:50 - 02:58] Now open command palette. You can do it using command-shift-p or control-shift-p and selecting debug, select and start debugging.

[02:59 - 03:08] Choose the debug_cra_tests. You should see the debug pane with runtime variables, call stack, breakpoints, and control buttons.

[03:09 - 03:18] The execution should stop where you placed your breakpoint. You can go line by line now using the step over function, or just continue execution.

[03:19 - 03:27] You can use this interface to go through your test execution step by step and observe the values of all the variables in your code. You will see them in the variable pane.

[03:28 - 03:37] You might need this functionality later in this chapter, but for now, stop the execution by pressing the red square bottom or pressing shift F5. Remove the breakpoint by clicking on it.