Estoy tratando de probar un componente que envuelve un componente conectado. Así que tengo (simplificado):
const InnerComponent = () => { return ( <p>Hi!</p> ) } const InnerComponentWrapper = connect()(InnerComponent) const OuterComponent = () => { return ( <div> <InnerComponentWrapper> </div> ) }(Obviamente, hay más en estos componentes, incluidas las cosas relacionadas con el estado)
Ahora estoy tratando de probar simplemente que InnerComponent (o InnerComponentWrapper) está en OuterComponent. Estoy usando broma + enzima. Cuando renderizo OuterComponent (superficial o montado), todo lo que puedo encontrar en OuterComponent es un elemento con la etiqueta 'Conectar' que no tiene nada que pueda encontrar que me diga qué elemento está envolviendo.
Lo que probé:
const enzymeWrapper = shallow(<OuterComponent />) expect(enzymeWrapper.find('Connect').length).toBe(1) // pass expect(enzymeWrapper.find('Connect(InnerComponentWrapper)').length).toBe(1) // fail expect(enzymeWrapper.find('InnerComponentWrapper').length).toBe(1) // fail expect(enzymeWrapper.find('InnerComponent').length).toBe(1) // fail¡Gracias!
Para mí, esto funciona (su segundo intento, marcado como no funcionado... ¿quizás se equivocó en algún detalle o las cosas se arreglaron en una versión más nueva?).
const enzymeWrapper = shallow(<OuterComponent />) expect(enzymeWrapper.find('Connect(InnerComponentWrapper)')Además, el rastreador de errores de Enzyme apunta a esta solución.
Encontré una solución, definitivamente podría haber una mejor, pero esta hacky servirá por ahora:
const enzymeWrapper = shallow(<OuterComponent />) expect(enzymeWrapper.find('Connect').node.type.WrappedComponent({})).toEqual(InnerComponent({}))