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

Question

我正在尝试在我的项目中开始使用 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 但没有成功。

Answer 1

老实说，我不知道这里出了什么问题。我只知道当我从酶切换到 react-testing-library 时会发生这种情况。注意：恢复为酶无效。

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

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

React-testing-library render function throws syntax error

javascript

reactjs

testing

jestjs

react-testing-library