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?
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:
¿Quizás tienes algunos errores tipográficos?
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() }) }) }) })