javascript - React-testing-library 渲染函数抛出语法错误

Question

我正在尝试开始在我的项目中使用 react-testing-library。问题是，我无法正确设置所有内容。

我做的步骤:

1. 我按照文档的建议安装了@testing-library/react 和 jest-dom。

2. 我设置了 jest.config.js:

   module.exports = {
       setupFilesAfterEnv: [
           '@testing-library/react/cleanup-after-each',
       ],
   };
   

3. 我写了基本测试:

   import React from 'react';
   import App from '../App';
   import {render } from "@testing-library/react";
   
   it('renders without crashing', () => {
       const {asFragment} = render(<App/>);
       expect(asFragment).toMatchSnapshot();
   });
   

我得到的错误:

  4 |
  5 | it('renders without crashing', () => {
> 6 |     const {asFragment} = render(<App/>);
    |                                 ^
  7 |     expect(asFragment).toMatchSnapshot();
  8 | });
  9 |

来自 package.json 文件的我的包版本:

"@testing-library/react": "^8.0.4",
"jest-dom": "^3.5.0",
"jest": "^24.8.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",

我已经尝试了几种方法，例如在本地而不是从 jest.config.js 文件中进行清理以使其正常工作，但似乎没有任何效果。

编辑:项目是使用 CRA 创建的。尽管如此，我尝试按照建议自行配置 babel 和 babel-jest，但没有成功。

Answer 1

老实说，我不知道这里的问题是什么。我只知道当我从 enzyme 切换到 react 测试库时会发生这种情况。注意:恢复为 enzyme 无效。

但是，我可以说出什么有效。这是基于 CRA 的项目，这意味着我隐藏了所有 babel、webpack 和 jest 配置。我决定运行 npm eject 只是为了修复配置。然而，在运行此命令后，测试又开始工作了。