测试与酶反应的成分并预期失败

【问题标题】：Testing react component with enzyme and expect fails测试与酶反应的成分并预期失败
【发布时间】：2016-09-07 06:25:49
【问题描述】：

我正在使用 Enzyme、Mocha 和 Expect 测试一个 React 组件。测试用例如下图：

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';
import Add from '../src/client/components/add.jsx';

describe('Add', () => {
  let add;
  let onAdd;

  before(() => {
    onAdd = expect.createSpy();
    add = shallow(<Add onAdd={onAdd} />);
  });

  it('Add requires onAdd prop', () => {
    console.log(add.props());
    expect(add.props().onAdd).toExist();
  });

});

我正在使用 expect 创建一个间谍并将其附加到 Add 组件的 onAdd 属性。我的测试检查组件上是否存在该道具。由于某种原因，onAdd 未定义并且测试失败。有什么帮助吗？

【问题讨论】：

标签： reactjs enzyme

【解决方案1】：

问题是add 没有包装<Add> 组件，它包装了它返回的内容。所以，如果你的组件看起来像：

class Add extends React.Component {
  render() {
    return (
      <div>
        {this.props.foo}
      </div>
    );
  }
}

这条语句add.props().onAdd 将尝试从<div> 而非<Add> 访问onAdd 属性，显然它会失败。

这个断言：

expect(add.props().onAdd).toExist();

会成功，在组件中会是这样的：

class Add extends React.Component {
  render() {
    return (
      <div onAdd={this.props.onAdd}>
        {this.props.foo}
      </div>
    );
  }
}

enzyme 文档中显示的

Example 有点令人困惑。

【讨论】：