测试反应组件：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"
  }

Answer 1

这是同样的问题：Jest Error Unexpected token on react component

您需要添加.babelrc文件：

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

Answer 2

我通过执行以下操作解决了类似的问题：

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

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

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

2-添加jest配置到你的package.json：

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

3-将.babelrc文件添加到根路径并在其中写入以下内容：

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

4-如果你的测试中的“expect”关键字出现错误，只需运行npm install -D chai并在测试代码中导入expect函数，如import { expect } from 'chai';

如果你仍然遇到错误，请尝试安装像npm install -D @babel/core @babel/preset-env @babel/preset-react这样的babel依赖项

希望这可以帮助。