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

【问题标题】：React-testing-library render function throws syntax errorReact-testing-library 渲染函数抛出语法错误
【发布时间】：2019-11-15 23:01:51
【问题描述】：

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

我做的步骤：

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

我设置了 jest.config.js：

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

我写了基本测试：

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，但没有成功。

【问题讨论】：

你设置babel和babel-jest了吗？您需要配置它们才能将 JSX 代码转换为 JavaScript
同意@skyboyer，看起来你的测试中没有运行 babel。我建议你试试facebook.github.io/create-react-app 这样你就不用担心所有的配置了
我像@Gpx 建议的那样使用 CRA
它对你有用吗？
不，没有帮助..

标签： javascript reactjs testing jestjs react-testing-library

【解决方案1】：

老实说，我不知道这里有什么问题。我只知道当我从酶切换到反应测试库时会发生这种情况。注意：恢复为酶不起作用。

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

【讨论】：