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

Question

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

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)

Answer 1

你必须找到包装的组件并检查它的道具

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

Answer 2

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

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

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

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

testing a react HoC with enzyme.mount doesn't seem to properly output child component

reactjs

enzyme

higher-order-components

HoC

测试