2
respostas

Erro ao rodar teste de useNavigate

Meu teste está assim:

const navigationMock = jest.fn();
jest.mock('react-router-dom', () => {
  return {
    useNavigate: () => navigationMock,
  }
});

describe('Footer behavior when there are participants', () => {
  beforeEach(() => {
    (useParticipantsList as jest.Mock).mockReturnValue(['Anna', 'Markus', 'John']);
  });

  test('Raffle can be started', () => {
    render(
      <RecoilRoot>
        <Footer />
      </RecoilRoot>
    );

    const button = screen.getByRole('button');
    expect(button).not.toBeDisabled();
  });

  test('Navigate to raffle page', () => {
    render(
      <RecoilRoot>
        <Footer />
      </RecoilRoot>
    );

    const button = screen.getByRole('button');
    fireEvent.click(button);
    expect(navigationMock).toHaveBeenCalledTimes(1);
  });
});

Footer.tsx

export default function Footer() {
  const participants = useParticipantsList();
  const navigate = useNavigate();

  const startRaffle = () =>  {
    navigate('/sorteio');
  }

  return (
    <footer>
      <button disabled={participants.length < 3} onClick={startRaffle}>Iniciar brincadeira</button>
    </footer>
  );
}

E estou recebendo o seguinte erro:

The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: navigationMock

       9 | jest.mock('react-router-dom', () => {
      10 |   return {
    > 11 |     useNavigate: () => navigationMock,
         |                        ^^^^^^^^^^^^^^
      12 |   }
      13 | });
      14 |
2 respostas

Consegue compartilhar o repositório do seu projeto, Henrique? Assim consigo rodar os seus testes na minha máquina exatamente como você fez.

Claro, aqui está: https://github.com/henriquepaulalima/alura-react-with-typescript/tree/master/sorteador-de-amigo-secreto