0
289
VisualizaçõesPruebe el estado cambiado después de que se haya ejecutado useEffect
Uso ReactJs, jest y la biblioteca de pruebas de reacción. tengo este codigo:
const App = ({data}) => { const [state, setState] = useState(); // after useEffect runs state should be false console.log('test state', state) useEffect(() => { setState(!data) }, []) return <p>'data is' {data},<p/> } <App data={12} /> Después de que useEffect se ejecute, el estado debe ser false . Ahora quiero probar el componente usando la biblioteca de prueba de broma y reacción.
describe('App', () => { beforeEach(() => { const setValue = jest.fn(x => {}); React.useState = jest.fn() .mockImplementationOnce(x => [x, setValue]) }) test('It should render the correct value', async() => { const v = utils.queryByText(12) expect(v).toBeInTheDocument() }) }) }) Cuando ejecuto la prueba en console.log('test state', state) obtengo por primera vez console.log('test state', undefined) y luego console.log('test state', false) , pero necesita obtener solo el valor false , porque debido al hecho de que por primera vez el valor no está undefined , la prueba falla. ¿Como hacer esto?
2 Respostas
Responde à pergunta0
Obtiene dos registros de consola porque esta línea inicializa su estado ( undefined ):
const [state, setState] = useState(); Después de eso, el useEffect se ejecuta onComponentDidMount y cambia el estado, lo que hace que el componente se vuelva a procesar (segunda declaración de registro).
Podría usar algo como esto, si desea iniciar el estado desde los props :
const [state, setState] = useState(!data);Actualizar:
Esto funciona en mi máquina: 
¿Quizás tienes algunos errores tipográficos?
0
Debe esperar hasta que el componente se monte y luego ejecutar su expectativa. En la biblioteca de pruebas de reacción, hay un método especial para ello. waitFor .
de la documentación de la biblioteca de pruebas React:
Cuando necesite esperar un período de tiempo, puede usar waitFor para esperar a que pasen sus expectativas.
import {waitFor} from '@testing-library/react' describe('App', () => { // rest of the codes ... test('It should render the correct value', async() => { const v = utils.queryByText(12) await waitFor(() => { expect(v).toBeInTheDocument() }) }) }) })