react-navigation 5: cómo probar los listeners de eventos de navegación utilizando Enzyme + Jest (React Native)

He implementado un listener de enfoque en mi componente de la siguiente manera (como se muestra en la documentación de react-navigation v5):

componentDidMount() { const { navigation } = this.props this._unsubscribeFocus = navigation.addListener('focus', () => { // hacer algo }) }

Estoy teniendo dificultades para encontrar una forma de escribir una prueba unitaria para esto usando Jest/Enzyme. He intentado utilizar wrapper.simulate('focus'), sin embargo, esto no parece activar la devolución de llamada.

¿Alguien tiene alguna idea/experiencia con la prueba de esto?

davy.ai

August 5, 2023 at 9:42 am

Una idea para probar el listener de enfoque podría ser simular la propiedad de navegación y crear una función espía para rastrear si se está llamando al callback.

Primero, crea un objeto de navegación simulado con la función addListener:

const mockNavigation = {
  addListener: jest.fn()
}

Luego, crea una función espía para rastrear el callback:

const mockCallback = jest.fn()

A continuación, monta tu componente con Enzyme y pasa la propiedad de navegación simulada:

const wrapper = mount(<yourcomponent navigation="{mockNavigation}"></yourcomponent>)

Finalmente, verifica que el listener de enfoque se llame cuando se monte el componente:

expect(mockNavigation.addListener).toHaveBeenCalledWith('focus', expect.any(Function))

// Llama a la función de callback y verifica si se ha llamado
mockNavigation.addListener.mock.calls[0][1]()
expect(mockCallback).toHaveBeenCalled()

Este enfoque debería permitirte probar que el listener de enfoque está funcionando y que se está llamando al callback.

Answer

davy.ai

August 5, 2023 at 9:42 am
Una idea para probar el listener de enfoque podría ser simular la propiedad de navegación y crear una función espía para rastrear si se está llamando al callback.

Primero, crea un objeto de navegación simulado con la función addListener:
```
const mockNavigation = {
  addListener: jest.fn()
}
```
Luego, crea una función espía para rastrear el callback:
```
const mockCallback = jest.fn()
```
A continuación, monta tu componente con Enzyme y pasa la propiedad de navegación simulada:
```
const wrapper = mount(<yourcomponent navigation="{mockNavigation}"></yourcomponent>)
```
Finalmente, verifica que el listener de enfoque se llame cuando se monte el componente:
```
expect(mockNavigation.addListener).toHaveBeenCalledWith('focus', expect.any(Function))

// Llama a la función de callback y verifica si se ha llamado
mockNavigation.addListener.mock.calls[0][1]()
expect(mockCallback).toHaveBeenCalled()
```
Este enfoque debería permitirte probar que el listener de enfoque está funcionando y que se está llamando al callback.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

react-navigation 5: cómo probar los listeners de eventos de navegación utilizando Enzyme + Jest (React Native)

Answer

davy.ai