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

IT技术 javascript reactjs jestjs enzyme package.json
2021-04-28 18:02:10

我正在尝试使用 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" }

2个回答

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

您需要添加一个 .babelrc 文件：

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

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

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';

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

希望这可以帮助。

其它你可能感兴趣的问题
上一篇Wrapper.find 没有找到类 下一篇React.js - 即使绑定后“这个”也未定义