Typescript/React 单元测试库，能够单步调试导入的函数

Posted 2023-03-13

【中文标题】Typescript/React 单元测试库，能够单步调试导入的函数

【英文标题】：Typescript/React unit testing libraries with ability to step through imported functions for debugging

【发布时间】：2021-04-02 17:02:18

【问题描述】：

我目前正在使用 Jest 对我的 React 组件和 Typescript 函数进行单元测试。到目前为止，它在减少回归方面取得了巨大成功，我对 vscode Jest 插件感到满意，它让我可以逐步执行单元测试代码以查看变量值和失败前的步骤。

但是，插件/Jest（不确定是哪个）不允许我逐步完成我正在尝试测试的导入函数/组件；调试步骤仅适用于单元测试文件。

例如：

// 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);
);

这显然是一个假例子，但我只能单步执行file.test.tsx 中的步骤，而无法单步进入addOne 函数并查看其中发生的情况。我只能看到它返回的内容。为了解决这个问题，我不得不将所有变量的 console.logs 放在导入的功能文件（file.tsx）中，这很痛苦。

有没有办法配置 Jest（或其他用于 react/typescript 的单元测试库）以便能够逐步执行这些导入的函数？

谢谢

更新： 我应该澄清一下，当我的意思是我不能进入函数时，我的意思是在 file.tsx 中放置断点是行不通的。调试器确实会在 file.test.tsx 中的断点处停止，但我觉得很奇怪，我不能简单地执行前者。

【问题讨论】：

断点有效吗？到目前为止调试仅限于vscode，你尝试过常规方式调试吗？

@EstusFlask 是的，我在不同文件的 vscode 中放置了断点。断点在单元测试文件中起作用，但导入的函数（file.tsx）不会停止代码执行，它会忽略这些断点

常规方式是不用vscode，***.com/questions/33247602/…。不知道问题是特定于 vacode 还是您的设置。

【参考方案1】：

您可以使用 Node 支持的 debugger; 语句。它将停止代码执行（断点）并打开类似 gdb 的提示，您可以使用终端进行调试。您可以在this 页面上找到更多信息。它还解释了如何在 VSCode 中启用调试。此外，WebStorm IDE 支持从 IDE 运行 Jest 测试并使用 IDE 定义的断点。

【讨论】：

我应该澄清一下，将断点放在 file.tsx 中并不会停止执行，但是当我将它们放在 file.test.tsx 中时它们会停止。我不知道为什么。