javascript - react - ¿Cómo probar el método componente infantil con enzima?

react router reactjs

Question

Tengo un componente así:

<Parent>
  <Child/>
</Parent>

y el componente <Child/> tiene un método foo . Quiero probar el método foo pero no sé cómo acceder a él. Lo intenté:

mount(<Parent><Child/></Parent>).props().children.foo

o

mount(<Parent><Child/></Parent>).children().foo

Pero ambos están undefined . No puedo usar .instance() porque no es root. No puedo montar <Child/> solo porque <Parent> agrega algo (react-router context.router ) en el context y los necesito cuando inicie <Child/> . ¿Alguna idea con esto?

Answer 1

Consideraría escribir pruebas solo para su clase principal y luego un archivo de prueba separado para evaluar solo a su hijo.

Una vez que hayas montado tu componente utilizando:

const component = mount(<Child>); 

entonces tienes acceso a sus métodos usando:

component.instance().methodname

A continuación, puede hacer cosas como anularlo con jest.fn () y realizar una prueba adecuada.

Answer 2

Creo que su problema es muy diferente de cómo probar los componentes secundarios.

Mi primera pregunta es: ¿Por qué está comprobando si un componente secundario tiene un método específico en las pruebas de componentes de los padres?

En mi humilde opinión, debe tener una prueba específica para este componente y, luego, en esta prueba, verifique si existe el método.

Solo para no irte sin la respuesta, ¿intentaste .find(Child).instance().foo ?

Answer 3

Esto funcionó para mí:

mount(<Parent><Child/></Parent>).find(Child).instance().foo

Answer 4

Me enfrenté a un problema similar y mount API de mount . En mi caso de uso, el componente de mi hijo (CommonStoresReactions) está envuelto con mobx inject .

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

Quiero probar el método CommonStoresReactions en CommonStoresReactions . Debajo del fragmento funcionó para mí.

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()

Answer 5

Tuve la oportunidad de manejar una función secundaria como la siguiente, estaba buscando al primer hijo para activar la función:

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()

Answer 6

Tuve un problema similar al intentar simular una función en un componente interno dentro de un MemoryRouter:

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);     

Terminé siendo capaz de burlarme de la función así:

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;

Answer 7

Yo prefiero el montaje superficial sobre el montaje completo de la enzima.

Junto con proxyquire para resolver el componente secundario (que desea probar) lo hago

wrapper.find(''Child1'').props().propName

Y probarlo.

O uso superficial

mount wrapper.dive()