Estoy usando react hooks y use Use State para los estados de los componentes. Mientras pruebo el componente en broma, veo que no puedo acceder al valor del estado y tampoco puedo burlarme de él.
Hay muchos códigos que buscan diferentes valores en el estado. Dado que el estado no es accesible, no pude cubrir la cobertura completa del código.
Ayúdenme a escribir un caso de prueba para el siguiente código.
const MyComponent = props => {
const [counterSecond, setCounterSecond] = React.useState(8);
const [counterFirst, setCounterFirst] = React.useState(0);
const handleIncrement = () => {
setCounterSecond(counterSecond + 1);
};
const handleDecrement = () => {
setCounterSecond(counterSecond - 1);
};
React.useEffect(() => {
if (counterSecond === 10) {
setCounterSecond(0);
setCounterFirst(1);
}
if (counterSecond === 3) {
setCounterSecond(1);
setCounterFirst(0);
}
if (counterSecond ===9) {
setCounterSecond(2);
setCounterFirst(1);
}
}, [counterSecond]);
return (
<div>
<div onClick={handleIncrement} >Increment</div>
<div onClick={handleDecrement} >Decrement</div>
</div>
);
};
export default MyComponent;
Como puede ver, el código tiene useEffect, que se ocupa del cambio en el valor de counterSecond. Pero las condiciones internas solo se cubrirán cuando el valor del estado coincida con 8 o 3 o 9.
¿Podría guiarme al escribir el caso de prueba de Jest para cubrir las condiciones internas en UserEffect?
1) Y cómo burlarse de cualquier valor de estado
2) cómo verificar el valor de estado en Jest mientras se usan Hooks
Supongamos que su componente se renderiza counterFirsty, de lo counterSecondcontrario, su existencia simplemente no tiene ningún sentido. Algo como
....
return (
<div>
<span test-id="counter">{`${counterFirst}:${counterSecond}`}</span>
<div onClick={handleIncrement} id="inc">Increment</div>
<div onClick={handleDecrement} id="dec">Decrement</div>
</div>
);
Entonces nos gustaría probar nuestro componente. Creo firmemente que no necesitamos burlarse o hacer valer contra el estado o cualquier parte interna. En su lugar, necesitamos comunicarnos propsy verificar el resultado del renderizado para verificar si el componente se comporta como esperamos.
Por lo tanto, la prueba del estado inicial puede verse así:
function getCounter(wrapper) {
return wrapper.find("['test-id'='counter']").text();
}
it('renders 0:8 by default', () => {
const wrapper = mount(<MyComponent />);
expect(getCounter(wrapper)).toEqual('0:8');
});
Pero, ¿qué hacer con ese código useEffect? Si tiene una versión de enzima lo suficientemente reciente, debería funcionar. Yo creo. Si no es así, compruebe qué versión utiliza.
Y volviendo a probar. Hasta su código de muestra, el contador debería reaccionar en incrementos y decrementos de una manera ligeramente atípica. Diga para inc: 0:8 -> 1:2 -> 1:0 -> 1:1 -> 1:2 -> 1:0(porque para 0:9y 1:3hay una lógica apropiada en useEffecteso causa el re-renderizado). Entonces probaremos eso:
function doInc(wrapper) {
wrapper.find("inc").props().onClick();
}
it('jumps from 0:8 to 1:2 on inc', () => {
const wrapper = mount(<MyComponent />); // 0:8
doInc(wrapper);
expect(getCounter(wrapper)).toEqual('1:2');
});
En realidad, aquí la lógica debería crear valores ciclados ( 1:2 -> 1:0 -> 1:1 -> 1:2 -> 1:0), por lo que probaría eso en un solo caso de prueba. Pero tal vez en su componente real no se repita.
Quizás se pregunte cómo podría configurar el estado inicial para algún caso en particular. De la misma forma: llamando propspara imitar clics y otras comunicaciones.
function doDec(wrapper) {
wrapper.find("dec").props().onClick();
}
it('increments from 0:5 to 0:6', () => {
const wrapper = mount(<MyComponent />); // 0:8
doDec(wrapper); // 0:7
doDec(wrapper); // 0:6
doDec(wrapper); // 0:5
doInc(wrapper);
expect(getCounter(wrapper)).toEqual('0:6');
});
Tal vez sea una buena idea hacer que funcione algún ayudante.
Pero, ¿sería más rápido establecer el estado directamente? Sí, lo sería. Pero eso también haría que las pruebas no fueran confiables. Digamos que su código de muestra nunca alcanza '0: 9'. Y eso puede ser un error más bien un gol. Y esperamos que las pruebas nos ayuden a darnos cuenta de eso. Al establecer el estado directamente, nunca sabríamos que existe un problema.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras