reactjs - 使用 enzyme.mount 测试 React HoC 似乎无法正确输出子组件

Question

我正在构建一个 HoC，以便轻松创建可选择的表行。我正在尝试编写测试以确保它使用正确传递的 Prop 来渲染包装的组件。不幸的是，我无法让我的测试发挥作用，因为 enzyme 似乎没有将所有组件渲染出来(或者，更有可能的是，我正在做一些有点愚蠢的事情)。

高级层次

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)

Answer 1

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

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

您可以在官方 react docs 中阅读更多相关信息和this问题。