Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

180
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!