1

我在 React 组件中使用HOC ，如下所示：

import React from 'react';
import Wrapper from 'wrapper';
class Component extends React.Component {
  render () {
    return (
      <div className='component' />
    )
  };
}
export default Wrapper(Component)

当使用 Mocha 测试组件时，我试图寻找应该包含在 Component 中的类名。像这样：

describe('Component', function () {
  it('can be mounted with the required class', function () {
    const component = shallow(
      <Component />
    );
    expect(component).to.have.className('component');
  });
});

问题是 Mocha 不知道在包装器中查找 Component 并尝试在 HOC 中找到它。当然不会。

我收到的错误是：

AssertionError: expected <Wrapper(Component) /> to have a 'component' class, but it has undefined
     HTML:

     <div class="component">
     </div>

如何告诉 Mocha 在 HOC 中查找类名的正确位置而不是 HOC 本身？

4

2 回答 2

5

您可以使用酶.dive()

const component = shallow(<Component />).dive();

expect(component.props().className).toEqual('component')
于 2017-01-17T10:54:51.987 回答
0

问题是使用 Enzyme'sshallow而不是mount，这是测试 HOC 时所必需的。

所以，使用mount.

我将此添加到 github 项目中，以便您查看。使用我的redux-form-test项目并确保使用stackoverflow-question-38106763分支。查看tests/unit/index.js文件。

请务必阅读测试文件的源代码。其中一项测试故意未能重现您的问题。

在这种情况下，棘手的是 HOC 的 render 方法准确地复制了它所包装的组件。请参阅您提到的 react-onclickoutside 组件的源代码中的render方法。这就是您看到的令人困惑的原因：它向您显示看起来满足断言的 HTML。但是，如果您运行AssertionError

console.log(component.debug())

在你之前expect，它会显示

<Component />

那是因为shallow只有一层深。component并且如您所见，酶没有使用渲染的 HTML 进行断言，而是使用了没有类的 React 元素。

于 2016-07-09T03:59:10.943 回答