Tengo un código de inicio de sesión
<Grid className={classes.container} item xs={12} sm={6}> <TextField data-testid='employeeId' className={classes.input} value={employeeId} onChange={handleChange} label="Employee id" variant="outlined" /> {(employeeId && employeeId.length > 0)? <Button className={classes.button} disableElevation onClick={onSubmit} variant="contained" color="primary">Login</Button>: <Button className={classes.button} disableElevation variant="contained" disabled> Login </Button> } </Grid> </Grid>cuando el usuario ingresa el nombre y hace clic en iniciar sesión, el usuario navega a la página de inicio. Escribí pruebas para verificar que el código de inicio de sesión no debería estar presente después de enviar. La aplicación se comporta como se esperaba, pero fallan las pruebas para verificar si la página de inicio de sesión ha dejado de mostrarse.
render(<App/>); userEvent.type(screen.getByTestId('employeeId'), 'aryan'); userEvent.click(screen.getByText(/login/i)); const linkElement = screen.getByText(/home screen/i); expect(linkElement).toBeInTheDocument(); expect(screen.getByTestId('employeeId')).not.toBeInTheDocument(); });enlace de sandbox de código:https://codesandbox.io/s/tender-glitter-wjpye?file=/src/App.tsx
Al verificar si un elemento no está presente, debe usar queryBy en su lugar. queryBy puede manejar casos nulos, mientras que getBy no puede (por diseño). Así que esto debería hacerlo:
expect(screen.queryByTestId('employeeId')).not.toBeInTheDocument();
Tengo la respuesta. Estaba usando material-ui TextBox para la entrada y poniendo una identificación de prueba en el TextBox. No funcionará porque TextBox es solo un contenedor y debería ser algo como
userEvent.type(screen.getByRole('textbox'), 'aryan');Ahora las pruebas están funcionando bien.