测试React组件：Jest遇到了一个意外的标记。

Question

我正在尝试使用Jest进行测试，但是遇到了错误： Jest遇到了意外的标记 这通常意味着您正在尝试导入Jest无法解析的文件，例如，它不是纯JavaScript代码。

我有一个照片库应用程序，每当我点击图像时，都会弹出包含该图像的模式。我想测试当我点击图片时，弹出窗口显示或存在的情况。是否有一种方法来解决这个问题？ 这是我的代码：

import { shallow, mount, render } from 'enzyme';
import App from '../client/src/components/App';

describe('<PhotoItem />', () => {
  it('should popup image on click', () => {
    const wrapper = shallow(
      <App title="mock" />
    );
    wrapper.find('.item item-0').simulate('click');
    expect('.modal-opactiy').toExist();
  });

这是我的package.json文件内容： "jest": { "verbose": true, "transformIgnorePatterns": ["/node_modules/(?!App)"], "testURL": "http://localhost/photos" } 它涉及到IT技术。

- Michael Lee

Answer 1

以下是需要翻译的内容：

这里遇到了同样的问题：Jest Error Unexpected token on react component

您需要添加一个 .babelrc 文件，并包含以下内容：

{ "presets": ["env","react"] }

- Fco. Alejandro Jurado Pérez

Answer 2

我通过以下方式解决了类似的问题：

1. 添加酶设置文件并编写以下内容：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

2- 在你的 package.json 中添加 jest 配置，像这样：

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3- 在根目录下添加 .babelrc 文件，并在其中编写以下内容：

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

如果你在测试中使用 "expect" 关键字时出现错误，只需运行 npm install -D chai 命令，并在测试代码中导入 expect 函数，如下所示：import { expect } from 'chai'; 如果仍然出现错误，请尝试安装 babel 依赖项，命令如下：npm install -D @babel/core @babel/preset-env @babel/preset-react 希望这可以帮助你。

- Muho