用ase.mount测试反应HoC似乎不能正确输出子组件答案

【问题标题】：testing a react HoC with enzyme.mount doesn't seem to properly output child component用ase.mount测试反应HoC似乎不能正确输出子组件
【发布时间】：2017-06-11 02:56:10
【问题描述】：

我正在构建一个 HoC，以便轻松创建可选择的表行。我正在尝试编写测试以确保它使用正确传递的道具呈现包装的组件。不幸的是，我无法让我的测试正常工作，因为酶似乎没有将所有成分都渲染出来（或者，更有可能的是，我在做一些有点傻的事情）。

HoC

import React, { PropTypes, Component } from "react";
import { omit } from "lodash/fp";

const propsFilter = omit(["onSelect"]);

export default function selectable(onSelect, isSelected) {
    return (component) => {
        const wrappedName = component.displayName || component.name || "Component";
        const displayName = `Selectable(${wrappedName})`;
        const onClick = () => onSelect && onSelect(!isSelected);

        class SelectableWrapper extends Component {
            render() {
                return <component onClick={ onClick } { ...propsFilter(this.props) } />;
            }
        }

        SelectableWrapper.displayName = displayName;
        SelectableWrapper.propTypes = Object.assign({
            onSelect: PropTypes.func,
            isSelected: PropTypes.bool,
        }, component.propTypes);

        return SelectableWrapper;
    };
}

测试

/* eslint-env mocha */

"use strict";

import React from "react";
import { expect } from "chai";
import { spy } from "sinon";

import { mount } from "enzyme";

import selectable from "../../../src/js/components/tables/selectable";

describe("<SelectableHOC />", () => {
    let onSelect, isSelected;

    const TestElement = () => <p className="test">Hi</p>;

    const el = () => selectable(onSelect, isSelected)(TestElement);
    beforeEach("setup spy", () => onSelect = new spy());

    it("renders the wrapped component, passing through props", () => {
        const hoc = el();
        const wrapper = mount(<hoc name="foo" />);
        expect(wrapper).to.contain("p.test");
    });

    it("doesn't pass through onSelect");
    it("sets onClick on the child component, which triggers onSelect");
});

当我在测试中尝试wrapper.debug() 时，我只得到<hoc data-reactroot="" name="foo"></hoc>。

测试的输出（失败）是：

  1) <SelectableHOC /> renders the wrapped component, passing through props:
     AssertionError: expected <HTMLUnknownElement /> to contain p.test

     HTML:

     <hoc data-reactroot="" name="foo"></hoc>
      at Context.<anonymous> (test/components/tables/selectable.spec.js:43:39)

【问题讨论】：

您应该将组件名称从component 大写为Component。检查此question。实际上，将其重命名为更好的名称，Component 将与 React 的 Component 发生冲突。
啊哈，好像是这样。我忘记了 React 将小写组件视为 HTML 标记。如果您将其添加为正确答案，我会将其标记为正确答案。
作为答案添加。 :)

标签： reactjs enzyme higher-order-components

【解决方案1】：

你的组件的名字是小写的，在 JSX 中以小写名字开头的名字被认为是 HTML 标签，而不是自定义组件。因此，您需要将组件名称大写。

另外，我建议您将组件的名称更改为更有意义的名称，以避免与React.Component 发生冲突。

您可以在官方react docs 和this 问题中了解更多信息。

【讨论】：

【解决方案2】：

您必须找到被包装的组件并检查其上的道具

const elWrapper = wrapper.find('TestElement');
expect(elWrapper.prop('onClick').to.not.equal(null);
expect(elWrapper.prop('onSelect').to.equal(undefined);

【讨论】：