-1

Estou usando:

  • formik
  • testing-library
  • materialUI (TextField)
  • @testing-library/jest-dom

Eu tentei mudar o valor do TExtFIeld do MaterialUI durante o tempo de execução do teste de diferentes formas mas nenhuma funcionou

Meu form:

Deixei só o campo de email, pq só estou querendo testar ele

<FormikProvider value={formik}>
  <Form autoComplete="off" noValidate onSubmit={handleSubmit} style={formStyles}>
    <TextField 
      fullWidth
      autoComplete="email"
      type="email"
      label="Email"
      variant="filled"
      color='primary'
      data-testid="email"
      sx={{
        background: palette.primary.lighter,
      }}
      inputProps={{'data-testid': 'emailInput'}}
      error={Boolean(touched.email && errors.email)}
      helperText={touched.email && errors.email}
    />
  </Form>
</FormikProvider>

Meu teste:

const mockedOnSubmit = (values: ISignupValues, actions: FormikHelpers<ISignupValues>) => jest.fn()
const setup = () => render(mockUsingDefaultWrappers(<SignupForm handleSubmitProp={mockedOnSubmit} />))
const getBtnSignup = (screen: any) => screen.getByRole('button', {name: /cadastrar/i})

it('should show an error message if the user does not type the email properly', async () => {
  await act(async () => {
    setup()
    const btnSignup = getBtnSignup(screen)
    const emailInput = screen.getByTestId('emailInput')
    screen.debug(emailInput)
    userEvent.type(emailInput, 'asd')
    fireEvent.change(emailInput, {target: {value: 'asd'}});
    (emailInput as HTMLInputElement).value = 'asd'
    screen.debug(emailInput)
    fireEvent.click(btnSignup)
    await waitFor(async () => {
      await screen.findByText(/Nome completo obrigatório/i)
      console.log('clicked', !!screen.queryByText(/Nome completo obrigatório/i))
      console.log('invalid:', !!screen.queryByText(/Endereço de e-mail inválido/i))
      console.log('null:', !!screen.queryByText(/E-mail obrigatorio/i))
    })
  })
  // expect(await waitFor(() => screen.getByText(/Endereço de e-mail inválido/i))).toBeVisible()
})

Os console.logs fazem o seguinte:

  • "clicked" verifica se o botao de cadastro foi clicado
  • "invalid" verifica se o input de email foi preenchido com um email invalido
  • "null" verifica se o input de email está vazio

O objetivo é conseguir mudar o value do TextField simulando um usuário real tentando se cadastrar

debug results:

antes de mudar o value do TextField:

<input
  aria-invalid="false"
  autocomplete="email"
  class="MuiFilledInput-input MuiInputBase-input css-1eujsfn-MuiInputBase-input-MuiFilledInput-input"
  data-testid="emailInput"
  type="email"
  value=""
/>

depois de mudar o TextField:

<input
  aria-invalid="false"
  autocomplete="email"
  class="MuiFilledInput-input MuiInputBase-input css-1eujsfn-MuiInputBase-input-MuiFilledInput-input"
  data-testid="emailInput"
  type="email"
  value=""
/>

console.log responses:

  • clicked: true
  • invalid: false
  • null: true

console.log responses esperadas:

  • clicked: true
  • invalid: true
  • null: false

1 Resposta 1

0

Aparentemente existe um delay ao atualizar o value do TextField usando formik para resolver bastas usar waitFor() do jest

Também é recomendado usar eventFire.submit() ao envés de eventFire.click() no botão de ação do formuçário

it('should show an error message if the user does not type the email properly', async () => {
  await act(async () => {
    setup()
    const btnSignup = getBtnSignup(screen)
    const emailInput = screen.getByTestId('emailInput')
    
    await waitFor(() => {
      fireEvent.change(emailInput, {target: {value: 'asd'}})
    })

    fireEvent.submit(btnSignup)
  })
  expect(await waitFor(() => screen.getByText(/Endereço de e-mail inválido/i))).toBeVisible() //passes now
})
1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    26/10/2021 às 13:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .