Lo que tengo es la página simple donde tengo el botón "Restablecer contraseña" y el botón "Confirmar" por defecto. Si presiona "Restablecer contraseña", se obtendrá del servidor y se mostrará donde estaba este botón en "TextInput". También el botón "Confirmar" se activará después de eso. Aquí está mi componente.
export default function App({ profileId, onClose }) { const [ resetPasswordIsPressed, setResetPasswordIsPressed ] = useState(false); const [ temporaryPassword, setTemporaryPassword ] = useState(null); const [ isButtonDisabled, setIsButtonDisabled ] = true; const handleUserUpdate = () => { handleChangePassword(false); onClose() } const handleChangePassword = async isPressed => { const tempPassword = await fetchPassword(isPressed, profileId); setTemporaryPassword(tempPassword); setResetPasswordIsPressed(isPressed); setIsButtonDisabled(false); } return ( <div className="App"> { resetPasswordIsPressed ? ( <TextInput isDisabled testId='passwordInput' value={temporaryPassword} /> ) : ( <PasswrodResetButton onClick={() => handleChangePassword(true)} text='PasswordReset' /> ) } <ConfirmButton isDisabled={isButtonDisabled} onClick={handleUserUpdate}/> </div> ); }y aquí está la función de búsqueda que se importa de un archivo separado
const fetchPassword = async (isPressed, profileId) => { const getPassword = httpPost(userService, userendPoint); try { const {data} = await getPassword({ data: { profileId } }); const { tempPassword } = data; return tempPassword; } catch (e) { console.log(e.message) } }Lo que necesito es probar que después de hacer clic en "Restablecer contraseña" se llamó al controlador, después de eso, el botón "Restablecer contraseña" ya no está en la página, el "TextInput" con la contraseña recuperada ESTÁ en la página, y el botón de confirmación se activa . Esto es lo que estoy tratando de hacer.
describe('User handlers', () => { it('Should trigger reset password handler', async () => { const mockCallBack = jest.fn(); const action = shallow(<PasswordResetButton onClick={mockCallBack}/>); action.simulate('click'); await screen.findByTestId('passwordInput') }) })Pero obtuve 'No se pudo encontrar un elemento por: [data-testid="passwordInput"]'
Está representando su 'acción' por separado de su componente de aplicación, lo que lo hace completamente independiente.
No puedo ver en su código qué es 'pantalla', pero lo más probable es que sea su componente de la App renderizado superficialmente, y aquí es exactamente donde necesita encontrar su <PasswordResetButton /> y hacer clic en él.
Si agregara a su <PasswordResetButton /> un testid como lo hizo con <TextInput /> , podría hacer algo como esto:
it('Should trigger reset password handler', async () => { const action = await screen.findByTestId('#passwordResetButton'); action.simulate('click'); const passwordInput = await screen.findByTestId('passwordInput'); expect(passwordInput).toHaveLength(1); }) Pero nuevamente, no estoy seguro de cuál es su variable screen y qué hace y devuelve exactamente screen.findByTestId .