测试React组件：Jest遇到意外令牌

Question

我正在尝试对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();
  });

HERE是我的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-这样向您的package.json添加有趣的配置：

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

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

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

4-如果测试中的“期望”关键字出错，则只需运行npm install -D chai并将期望函数导入到测试代码中，例如import { expect } from 'chai';

如果仍然出现错误，请尝试安装类似npm install -D @babel/core @babel/preset-env @babel/preset-react的babel依赖项

希望这会有所帮助。