无噪音的 Jest 测试

这篇文章假设您已经设置了 Jest 并在package.json文件中定义了测试脚本。

一次运行 1 个测试文件

您知道当您编写Jest测试并检查其正确性时的感觉吗？您需要运行所有测试，最重要的是等待几分钟？⌛

好吧，至少有一段时间我是这么做的。

但幸运的是，还有更好的方法！通过运行以下命令：

npm test -- FILE_NAME

使用上面的命令，我们将只运行该文件内的测试套件！不仅如此，您甚至不需要写文件的全名，因为 Jest 将针对名称与 FILE_NAME 的正则表达式匹配的每个文件运行。

如何使用命令

查看下面的文件夹结构👇

/src
  /components   
    /button      
      Button.tsx
      Button.test.tsx
      ButtonCTA.test.tsx
    /heading
      Heading.tsx
      Heading.test.tsx
    /...
package.json
...

如果运行，npm run test -- button你实际上会同时运行Button.test.tsx和中的测试ButtonCTA.test.tsx。这是因为 Jest 将运行所有名称与以下正则表达式 匹配的测试/button/i，这使得它不仅查找所有包含字符串 的文件名button，而且还忽略大小写。

因此，在这种情况下，为了只运行内部测试，Button.test.tsx您实际上应该输入一些更具限制性的内容，例如：

npm test -- button.test

运行 1 个测试用例或 1 个测试套件

现在，很多时候我们实际上只是想运行那个“顽固”的、根本不想通过的测试。

我们已经知道如何严格控制 Jest 仅在一个文件内运行测试，但这仍然需要一些时间，具体取决于该文件中有多少个测试。

选项 1 - 按测试名称运行

根据Jest Docs，可以使用以下命令仅按名称运行 1 个测试：

npm test -- -t '<testName> OR <testSuiteName>'     

但是这样做，您不仅会有一些运行多个测试的概率（因为名称折叠），而且它仍然有点未优化，因为 Jest 必须查看所有文件，以检查是否有任何名称匹配，从而通过或运行测试。

现在，如果我们将查找文件名的标志 +查找测试名称的标志连接起来，我们就可以创建一些好的东西：

npm run test -- button.test -t "should render the primary button"   

上面的命令只会运行button.test.tsx名称符合“应该渲染主按钮”的测试。这样，我们就可以以更优化的方式运行我们想要的特定测试！

选项 2 - 使用.only()

当使用 标记测试用例/套件时.only，Jest 将只运行该测试用例/套件（实际上您可以标记多个），而跳过所有其他测试用例/套件。

这样，我们可以结合之前学到的命令来只运行 1 个文件（npm test -- button.test），并在此基础上执行以下操作：

describe('Button', () => {

// Only this test will be executed inside this file
  it.only('should render the primary button', () => {
    render(<Primary {...(Primary.args as any)} />);
    expect(screen.getByRole('button')).toHaveTextContent(/Genie/i);
  });

  it('should render the secondary button', () => {
    render(<Secondary {...(Secondary.args as any)} />);
    expect(screen.getByRole('button')).toHaveTextContent(/Genie/i);
  });
});

这样，每次我们运行指向该button.test.tsx文件的测试时，只有标有的测试.only才会执行。

选项 3 - 观看模式

监视模式，顾名思义，就是设置一个运行环境来监视测试文件内部的变化。

幸运的是，监视模式带来了一个向导菜单，它允许我们轻松过滤我们想要监视更改的任何文件或测试，从而更快地执行测试！

显然，第一步是启动监视模式：

npm run test -- --watch

菜单出现后，您应该首先选择要运行测试的文件 -只需按“p”并开始输入名称。

现在只运行了一个文件的测试，是时候选择我们感兴趣的测试了！为此，您只需在终端中按下“t”，然后再次输入测试名称来选择测试。

奇迹发生了🎩！现在，每次你修改那个特定的测试并保存文件时，都只会执行那个测试，是不是很酷！

结论

每当您尝试修复该测试时，请不要偷懒，只需运行您在文件上设置的命令package.json并使用上面列出的其中一种技术即可！

它不仅可以节省您的时间，还可以改善整体开发人员体验。