Testing 用摩卡测试React中的高阶组分

我在React组件中使用了一个

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

从“React”导入React；
从“包装器”导入包装器；
类组件扩展了React.Component{
渲染（）{
返回(
)
};
}
导出默认包装器（组件）

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

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

description（'Component'，function（）{
它（'可以与所需的类一起装入'，函数（）{
常数分量=浅(
);
expect（component）.to.have.className（'component'）；
});
});

问题是Mocha不知道如何在包装器中查找组件，并试图在HOC中找到它。当然不会

我收到的错误是：

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

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

AssertionError:应该有一个“component”类，但它没有定义
HTML:

---

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

问题在于使用酶的

浅
而不是
装载，这是测试HOC时所必需的

因此，使用
挂载

我将其添加到github项目中，以便您可以看到。使用我的项目并确保使用
stackoverflow-question-38106763
分支。请参阅
tests/unit/index.js
文件

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

在这种情况下，最棘手的是HOC的render方法精确地复制了它所包装的组件。请参见
渲染
方法。这就是您看到的
AssertionError
令人困惑的原因：它向您显示的HTML似乎满足了断言。然而，如果你跑

console.log(component.debug())

在您的
expect
之前，它将显示

<Component />



那是因为
浅
只有一层深。Ezyme没有将呈现的HTML用于断言，它使用的是React元素，正如您所看到的，React元素上没有
组件
类。
问题在于使用Ezyme的
浅
而不是
装载
，这是测试HOC时需要的

因此，使用
挂载

我将其添加到github项目中，以便您可以看到。使用我的项目并确保使用
stackoverflow-question-38106763
分支。请参阅
tests/unit/index.js
文件

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

在这种情况下，最棘手的是HOC的render方法精确地复制了它所包装的组件。请参见
渲染
方法。这就是您看到的
AssertionError
令人困惑的原因：它向您显示的HTML似乎满足了断言。然而，如果你跑

console.log(component.debug())

在您的
expect
之前，它将显示

<Component />



那是因为
浅
只有一层深。Ezyme并没有将呈现的HTML用于断言，而是使用React元素，正如您所看到的，React元素上没有
组件
类。
您可以使用Ezyme

const component=shallow（）.dive（）；
expect（component.props（）.className）.toEqual（'component'））
你可以使用酶

const component=shallow（）.dive（）；
expect（component.props（）.className）.toEqual（'component'））
我猜问题在于您使用的是
浅层
而不是
装载
。实际上，您的测试通过了。那是什么包装包？我将css类更改为“component2”以强制测试失败，然后它告诉我
AssertionError：应该有一个“component2”类，但它有“component”
。请注意，缺少像您的邮件那样的word包装器：
。使用mount而不是shallow会产生
不变冲突：\u registerComponent（…）：目标容器不是DOM元素。
包装程序包是
react onclickoutside
，因此获取上述错误是有意义的，因为该程序包没有装载任何DOM对象。在DOM中看起来是这样的：
您知道浅层只渲染一层深度的组件吗？这就是“浅”和“山”的区别。但听起来你的项目中有些部分没有解释。可能会将一个示例发布到github/gist？我猜问题在于您使用的是
浅层
而不是
装载
。实际上，您的测试通过了。那是什么包装包？我将css类更改为“component2”以强制测试失败，然后它告诉我
AssertionError：应该有一个“component2”类，但它有“component”
。请注意，缺少像您的邮件那样的word包装器：
。使用mount而不是shallow会产生
不变冲突：\u registerComponent（…）：目标容器不是DOM元素。
包装程序包是
react onclickoutside
，因此获取上述错误是有意义的，因为该程序包没有装载任何DOM对象。在DOM中看起来是这样的：
您知道浅层只渲染一层深度的组件吗？这就是“浅”和“山”的区别。但听起来你的项目中有些部分没有解释。也许可以将一个示例发布到github/gist？谢谢，Tyler！我没有测试你的答案，但我会将其标记为已接受，因为这似乎是问题所在。我感谢你花时间回答这个问题。一定要爱腓尼基人帮助（前）腓尼基人！谢谢，泰勒！我没有测试你的答案，但我会将其标记为已接受，因为这似乎是问题所在。我感谢你花时间回答这个问题。一定要爱腓尼基人帮助（前）腓尼基人！