从 jsx 文件中的 @testing-library/react 导入 'render' 出错

Question

这个有点卡住了。我正在将 React 单元测试引入我的团队 node/react 项目中。我们已经在 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 甚至正确地向我展示了渲染方法的样子，所以我知道它的正确导入。

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

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

谢谢！

同样值得注意的是，我有 babel-jest 和 jest-dom 设置，据我所知，这就是很多类似问题的答案。

Answer 1

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

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

要绕过它，您需要运行在节点 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_module 中的所有文件都将被转换，这可能会使测试运行变慢。更好的解决方案是将 transformIgnorePatterns 设置为包含除 @testing-library 之外的所有 node_modules 文件的正则表达式模式。我不是正则表达式方面的专家，所以我会留给你解决这个问题。

从 jsx 文件中的 @testing-library/react 导入 'render' 出错

Importing 'render' from @testing-library/react in a jsx file is erroring out

javascript

unit-testing

reactjs

jestjs

react-testing-library