Para probar el primer componente, tenemos que suministrar una función de prueba que devuelva una promesa. Usaremos jest.fn para crear dos burlas: una que resuelve la promesa a un resultado y otra que rechaza la promesa de probar la condición de error. El código para estas burlas se ve así:
123const successResult ="Algunos datos";const getSuccess = jest.fn(()= >Promise.resolve(successResult));const getFail = jest.fn(()=>Promise.reject(newError()))
javascript
Para probar el componente usando la Biblioteca de Pruebas de Reacción usamos la función render, pasando una de las funciones de simulación como el get prop y usamos la desestructuración de objetos para obtener las funciones getByLabelText y queryByLabelText a partir del valor de retorno. En primer lugar, usamos queryByLabelText para tratar de obtener el div utilizado para mostrar los resultados; esto debería ser nulo por el momento ya que el estado de visualización aún no se ha establecido:
123const{ getByLabelText, queryByLabelText }=render(<DisplayDataget={getSuccess}/>);const labelBeforeGet =queryByLabelText(/display/i);expect(labelBeforeGet).toBeNull();javascript
Luego disparamos un evento de clic en el botón para llamar a la función de obtener. Esto eventualmente establecerá el estado de visualización y actualizará el div; sin embargo, si tratamos de obtener ese div de inmediato seguirá siendo nulo ya que el código está esperando que el get prometa regresar. Para esperar esto podemos usar la función waitForElement que, como su nombre indica, espera hasta que el elemento exista en el DOM antes de volver; de hecho espera hasta cuatro segundos y, si el elemento todavía no existe, entonces lanza un error. Una vez que el elemento existe podemos entonces probar si contiene los resultados o el mensaje de error, dependiendo del simulacro que se haya pasado:
12345botónconst =getByLabelText(/obtener datos/i);fireEvent.click(button);const labelAfterGet =awaitwaitForElement(()=>queryByLabelText(/display/i));expect(labelAfterGet.textContent).toEqual(successResult);
javascript
El código para estas pruebas está aquí.
La prueba de este componente con la enzima es similar; la única diferencia real es que no existe un equivalente a la función de espera del elemento, lo que significa que tenemos que hacer algo diferente cuando esperamos a que el componente se actualice.
En primer lugar, utilizamos una representación superficial para representar el componente, de nuevo utilizando una de las dos burlas como el puntal de get:
1const wrapper =shallow(<DisplayDataget={getSuccess}/>);javascript
Al igual que en el ejemplo anterior, verificamos que el div de la pantalla no existe antes de que el botón haga clic:
12const displayDivBeforeClick = wrapper.find(".display");expect(displayDivBeforeClick.exists()).toBe(false);javascript
El simulacro de un clic de botón:
12const getButton = wrapper.find("botón");getButton.simulate("clic");javascript
Como ya se ha dicho, la enzima no tiene forma de esperar a que se añada un elemento. Así que, para hacer que la promesa regrese, podemos usar la función setImmediate y luego podemos probar el componente después de que regrese:
123456returnnewPromise(resolve====setImmediate(resolve)).then(()= > {const displayDivAfterClick = wrapper.find(".display");expect(displayDivAfterClick.exists()).toBe(true);expect(displayDivAfterClick.text()).toEqual(successResult);});javascript
El código para estas pruebas está aquí.