用酶测试反应成分并期望失败

Question

我正在使用 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 道具。我的测试检查组件上是否存在 prop。由于某种原因，onAdd 未定义且测试失败。有帮助吗？

Answer 1

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

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>
    );
  }
}

Example 显示在 enzyme 文档中，有点令人困惑。

用酶测试反应成分并期望失败

Testing react component with enzyme and expect fails

reactjs

enzyme