Estoy creando un HoC para facilitar la creación de filas de tablas seleccionables. Estoy tratando de escribir pruebas para asegurarme de que represente el componente envuelto con los accesorios correctamente pasados. Desafortunadamente, no puedo hacer que mis pruebas funcionen ya que no parece que la enzima esté procesando todos los componentes (o, más probablemente, estoy haciendo algo un poco tonto).
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"); }); Cuando pruebo wrapper.debug() en la prueba, obtengo <hoc data-reactroot="" name="foo"></hoc> .
El resultado de la prueba (que falla) es:
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)El nombre de su componente está en minúsculas y en JSX el nombre que comienza con un nombre en minúsculas se considera etiquetas HTML, no componentes personalizados. Por lo tanto, deberá escribir en mayúscula el nombre de su componente.
Además, le recomiendo que cambie el nombre de su componente a algo más significativo para evitar conflictos con React.Component .
Puede leer más sobre esto en los documentos oficiales de reacción y esta pregunta.
Tienes que encontrar el componente envuelto y verificar los accesorios en eso
const elWrapper = wrapper.find('TestElement'); expect(elWrapper.prop('onClick').to.not.equal(null); expect(elWrapper.prop('onSelect').to.equal(undefined);