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

Answer 1

问题是add没有包装<Add>组件，它包装它返回的内容。因此，如果您的组件如下所示：

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

此声明add.props().onAdd将尝试从onAdd而不是<div>访问<Add>道具，显然它会失败。

这个断言：

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

会成功，在组件中会看起来像：

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

酶文档中显示的

Example有点令人困惑。

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

1 个答案: