AirBnB 的酶测试（用于 React 组件）返回 SyntaxError答案

【问题标题】：AirBnB's Enzyme test (for React Component) returning SyntaxErrorAirBnB 的酶测试（用于 React 组件）返回 SyntaxError
【发布时间】：2023-03-24 14:35:01
【问题描述】：

我有一个酶测试，它直接来自某个教程：

import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';

describe('<Keypad />', () => {

    it('should render children when passed in', () => {
        const wrapper = mount(
          <MyComponent>
            <div className="unique" />
          </MyComponent>
        );
        expect(wrapper.contains(<div className="unique" />)).to.equal(true);
    });
});

我不断收到语法错误，意外标记：

SyntaxError: test.js: Unexpected token     (9:4)
   7 |  it('should render children when passed in', () => {
   8 |          const wrapper = mount(
>  9 |            <MyComponent>
     |            ^
  10 |              <div className="unique" />
  11 |            </MyComponent>
  12 |          );

有什么想法吗？我已经在我的 package.json 文件中安装和配置了所有这些模块：

  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.9.0",
    "chai": "^3.5.0",
    "enzyme": "^2.3.0",
    "mocha": "^2.5.3",
    "react-addons-test-utils": "^15.1.0",
    "redux-devtools": "^3.3.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
   },
  "dependencies": {
    "compression": "^1.6.2",
    "csurf": "^1.9.0",
    "express-session": "^1.13.0",
    "helmet": "^2.1.0",
    "if-env": "^1.0.0",
    "object.assign": "^4.0.3",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "redux": "^3.5.2",
    "request": "^2.72.0",
    "winston": "^2.2.0"
  }

我正在 Windows 上运行 npm test：

"test": "mocha src/home/test.js -c --compilers js:babel-register --recursive",

*****编辑******

这是我的组件文件：

// Library / Framework imports
import React, { Component } from 'react'

/*
 * @class Home
 * @description Display the home page React Component
 */
 export default class Home extends Component {

    render() {

        return (
            <section>
                <h1>Home Page</h1>
                <p>This is the home page</p>
            </section>
        )
     }
 }

这是我的测试文件：

// Library / Framework imports
import React from 'react'
import { mount, render, shallow } from 'enzyme'
import { expect } from 'chai'
import Home from './Home.jsx'

describe('<Home />', () => {

    it('should render children when passed in', () => {

        const wrapper = shallow(<Home />);
        console.log(wrapper)
    })
})

错误是：

SyntaxError: D:/home/test.js: Unexpected token (12:26)
  10 |
  11 |          // console.log(SubmitButton)
> 12 |          const wrapper = shallow(<Home />);
     |                                  ^
  13 |          console.log(wrapper)
  14 |
  15 |          // expect(<SubmitButton />).contains()).to.equal(true)

我尝试了浅层、渲染和安装。我在这里想念什么？我正在使用最新的 React 15 版本。事实上所有最新的模块 - 只是做了一个 npm 安装。我一定错过了如何使用这个库的基本理解。请帮忙！

【问题讨论】：

只是检查，但 MyComponent 是什么？你是说键盘？
你需要使用小键盘，然后...
和以前一样的问题。为什么组件的名称很重要？
我确实得到了 mocha 酶示例，但它有很多旧的模块版本以及文档中未提及的 setup.js 文件
您解决了这个问题吗？

标签： reactjs npm mocha.js chai enzyme

【解决方案1】：

<MyComponent>只是一个例子，你需要在mount中使用<Keypad/>

const wrapper = mount(
  <Keypad>
    <div className="unique" />
  </Keypad>
);

【讨论】：

和以前一样的问题。为什么组件的名称很重要？
因为没有像 MyComponent 这样的东西，这只是一个例子，那部分很明显，这可能是一个解析错误，您需要按照有关设置的说明进行操作 - 检查一下：github.com/lelandrichardson/enzyme-example-mocha
我已更新我的代码以显示错误 - 使用我的实际组件。请问我错过了什么？我阅读了文档，觉得这应该可行，但我一定误解了这个难题的一个基本部分

【解决方案2】：

也许你对not setting adapter config for enzyme有问题

您只需在应用程序的根目录中运行以下代码：

npm i --save-dev enzyme-adapter-react-16

然后将这些行添加到您的测试中：

  import Enzyme, {configure, shallow} from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';

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

  describe(
    //what ever that was 
  );

但这是另一个将 Home 组件寻址到错误位置的机会，请先检查它，然后测试我之前提到的解决方案。

【讨论】：