Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

182
Visualizações
Unit Testing Links With Only Jest

I was wondering if there was a way to unit test links with jest alone to make sure they go to the correct place. All other resources I have looked up have used enzyme or additional applications.

For example: Ensuring <Link to '/homepage> or <NavLink to '/homepage'> actually goes to the homepage.

Any additional resources to read would also be helpful and appreciated.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You can test the Link component with jestjs, react-dom, and history packages. We spy on the history.push() method before user click the Link, the Link component will call history.push() underly when user click it.

E.g.

index.tsx:

import React from 'react';
import { Link } from 'react-router-dom';

export function About() {
  return <Link to="/home">home</Link>;
}

index.test.tsx:

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act, Simulate } from 'react-dom/test-utils';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { About } from './';

describe('70535778', () => {
  let container: HTMLDivElement | null = null;
  let memoryHistory, pushSpy, replaceSpy;
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
    memoryHistory = createMemoryHistory();
    pushSpy = jest.spyOn(memoryHistory, 'push');
    replaceSpy = jest.spyOn(memoryHistory, 'push');
  });

  afterEach(() => {
    unmountComponentAtNode(container!);
    container!.remove();
    container = null;
    pushSpy.mockRestore();
    replaceSpy.mockRestore();
  });

  test('should pass', () => {
    act(() => {
      render(
        <Router history={memoryHistory}>
          <About />
        </Router>,
        container
      );
    });
    const a = container!.querySelector('a')!;
    Simulate.click(a, { defaultPrevented: false, button: 0 });
    expect(pushSpy).toBeCalledWith('/home');
  });
});

Test result:

 PASS  examples/70535778/index.test.tsx (12.11 s)
  70535778
    ✓ should pass (31 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.443 s
Ran all test suites related to changed files.

package versions:

"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda