0

I'm currently using Jest to unit test my React components and Typescript functions. So far, it's been a big success at reducing regressions and I am happy with the vscode Jest plugin that lets me step through the unit test code to see variable values and steps before the failure.

However, the plugin/Jest (not sure which) doesn't allow me to step through my imported functions/components I'm trying to test; the debugging step-through only works in the unit test file.

For example:

// file.tsx (file with functionality I want to test)
export function addOne(x: number) {
  return x + 1; // can't step through this
}

// file.test.tsx (the test file)
import addOne from './file';

....... test set up......
it('addOne adds to 3 to get 5', () => { // obviously a failing test
   const start = 3; // can only step through this file
   const result = addOne(start); // step into doesn't work here, will skip over to the expect
   expect(result).toBe(5);
});

This was obviously a fake example, but I can only step through the steps in file.test.tsx and I can't step into the addOne function and see what is happening inside it. I can only see what it returns. In order for me to get around this, I had to place console.logs for all the variables in the imported functionality files (file.tsx) and it has been a pain.

Is there a way to configure Jest (or another unit testing library for react/typescript) to be able to step through these imported functions?

Thanks

Update: I should clarify that when I mean I can't step into functions, I also mean that putting breakpoints in file.tsx doesn't work. The debugger does stop at breakpoints in file.test.tsx however, which I find strange I can't simply do the former.

joe b.
  • 131
  • 1
  • 11
  • Do breakpoints work? So far the debugging is limited to vscode, did you try to debug it the regular way? – Estus Flask Dec 24 '20 at 08:02
  • @EstusFlask yes I put breakpoints in vscode across various files. The breakpoints work in the unit test files but the imported functions (file.tsx) don't stop code execution and it ignores those breakpoints – joe b. Dec 24 '20 at 19:00
  • The regular way is without vscode, https://stackoverflow.com/questions/33247602/how-do-you-debug-jest-tests . It's unknown if the problem is specific to vacode or your setup. – Estus Flask Dec 24 '20 at 19:42

1 Answers1

0

You can use the debugger; statements supported by Node. It will stop code execution (breakpoint) and open gdb-like prompt that you can debug in using the terminal. You can find more information on this page. It also explains how to enable debugging in VSCode. Also, WebStorm IDE supports running Jest tests from the IDE and using the IDE-defined breakpoints.

comonadd
  • 1,822
  • 1
  • 13
  • 23
  • I should clarify that putting breakpoints in file.tsx doesn't stop execution but they do stop when i put them in file.test.tsx. I'm not sure why. – joe b. Dec 24 '20 at 19:03