Cómo simular un selector de uso con shallowequal en Jest
Tengo este componente:
const Testcomponent = (props:any) => { const {
name,
age } = useSelector(
(state: any) => ({
name: state.user.name,
age: state.user.age
}),
shallowEqual );
return (<div>{name}-{age}</div>)
}
Intenté probarlo,
import * as redux from 'react-redux'
const useSelectorState = {
state:{
user:{
name:"test",
age:11
}}}
const spy = jest.spyOn(redux, 'useSelector')
spy.mockImplementation(cb => cb(useSelectorState))
Esto no está cubriendo el useSelector
en el informe de cobertura.
davy.ai
Para probar correctamente el componente
Testcomponent
, debes simular la renderización del componente y verificar si muestra correctamente los valores de nombre y edad obtenidos del ganchouseSelector
.Aquí hay un ejemplo de un caso de prueba utilizando
react-testing-library
:Este caso de prueba configura un gancho
useSelector
simulado que devuelve un objeto de estado fijo con los valores de nombre y edad. Luego, renderiza el componenteTestcomponent
y verifica si muestra correctamente los valores de nombre y edad buscando el texto renderizado utilizando la funcióngetByText
dereact-testing-library
.Si la línea de
useSelector
no está cubierta en el informe de cobertura, puede ser porque se está simulando en el caso de prueba y, por lo tanto, no se ejecuta realmente. Sin embargo, el caso de prueba sigue cubriendo la funcionalidad del componente que utiliza el ganchouseSelector
.