在 jsx 文件中从 @testing-library/react 导入“渲染”时出错

Question

有点卡在这个上。我正在将反应单元测试引入我的团队节点/反应项目。我们已经在 FE 中对我们的后端和实用程序进行了很长时间的开玩笑单元测试，但没有进行反应测试。

我正在通过https://redux.js.org/recipes/writing-tests关注测试指南

我的问题是，我创建测试文件的方式与所有其他单元测试的创建和正常运行方式完全相同。我在文件中放了一个假的测试用例：

import React from 'react';
//import { render } from '@testing-library/react';

describe('test', () => {
  it('tests', () => {
    expect(true).toEqual(true);
  });
});

这个测试用例按预期执行。但是，一旦我取消注释 import { render } 行，就会出现以下错误：

 FAIL  */__tests__/client/views/components/componentToTest.test.jsx
  ● Test suite failed to run

    */node_modules/@testing-library/dom/dist/helpers.js:44
        } catch {// not using Jest's modern fake timers
                ^
    
    SyntaxError: Unexpected token {
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/pretty-dom.js:13:16)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/config.js:11:18)

对这里发生的事情完全不知所措，找不到任何有类似问题的人。我的 IDE 甚至正确地向我显示了渲染方法的样子，所以我知道它的导入正确。

我已经安装了指南中建议的所有软件包，并且显然已经配置了运行 jsx 文件（因为测试有效，但只是在导入时中断）

一个答案会很好，但真的很想指出如何解决这个问题的正确方向。

谢谢！

另外值得注意的是，我有 babel-jest 和 jest-dom 设置，因为我知道这是很多类似问题的答案。

Answer 1

这里的问题是 JavaScript 中的可选 catch 绑定（当您声明一个不绑定错误的 catch 块时：try {} catch {} 而不是 try {} catch(error) {}）仅适用于 Node V10+。

另外，测试库支持 Node V10+。

要解决这个问题，您需要在 Node V10+ 上运行测试，并确保设置 babel 以使用系统中的当前节点版本，并进行适当的转换。

查看Jest documentation 了解更多信息。

P.S.：您可以找到有关此问题的更多信息here。

Answer 2

所以看起来 Babel 需要转换 /node_modules/@testing-library 中的 js 文件，而在你的情况下它没有这样做。我怀疑你的笑话配置（在package.json 或jest.config.js 中定义）需要修复，以便 babel 确实转换这些文件。

快速解决方法是将transformIgnorePatterns 设置为空数组。默认情况下 transformIgnorePatterns 设置为 "/node_modules/" 并将其设置为空数组将阻止 node_module 文件被忽略所以它可能是这样的。

...
"transform": {
  "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"transformIgnorePatterns": [],
....

此解决方案的问题是 node_modules 中的所有文件都将被转换，这可能会使测试运行缓慢。更好的解决方案是将 transformIgnorePatterns 设置为包含所有 node_modules 文件的正则表达式模式，除了 @testing-library。我不是正则表达式方面的专家，所以我会让你自己弄清楚。