Question

167

How can I test React Router with Jest

rated 0 times [ 173] [ 6] / answers: 1 / hits: 24656 / 3 Years ago, mon, november 8, 2021, 12:00:00

I'm new to testing with jest and I want to test the following code.

import React from "react";

import "./ButtonLogin.css";

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



function ButtonLogin() {

    return (

        <Link to="/login"> <button className="button-login">Iniciar sesión</button></Link>

    )

}



export default ButtonLogin;

import { MemoryRouter } from 'react-router-dom';

import { render, fireEvent, Link } from '@testing-library/react';

import { ButtonLogin } from './ButtonLogin';



it('routes to a new route', async () => {



  ButtonLogin = jest.fn();



  const { getByText } = render(

    <MemoryRouter ButtonLogin={ButtonLogin}>

      <Link to="/login">Iniciar sesión</Link>

    </MemoryRouter>

  );



  fireEvent.click(getByText('Iniciar sesión'));



  expect(ButtonLogin).toHaveBeenCalledWith('/login');

});

I have performed the following test but it fails and I get the following error in line 9.
routes to a new route

"ButtonLogin" is read-only.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 3 Years ago coleman · Accepted Answer

You can use the createMemoryHistory function and Router component to test it. Create a memory history with initial entries to simulate the current location, this way we don't rely on the real browser environment. After firing the click event, assert the pathname is changed correctly or not.

ButtonLogin.tsx:

import React from 'react';

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



function ButtonLogin() {

  return (

    <Link to="/login">

      <button className="button-login">Iniciar sesión</button>

    </Link>

  );

}



export default ButtonLogin;

ButtonLogin.test.tsx:

import { fireEvent, render } from '@testing-library/react';

import React from 'react';

import { Router } from 'react-router-dom';

import ButtonLogin from './ButtonLogin';

import { createMemoryHistory } from 'history';

describe('ButtonLogin', () => {

  test('should pass', () => {

    const history = createMemoryHistory({ initialEntries: ['/home'] });

    const { getByText } = render(

      <Router history={history}>

        <ButtonLogin />

      </Router>

    );

    expect(history.location.pathname).toBe('/home');

    fireEvent.click(getByText('Iniciar sesión'));

    expect(history.location.pathname).toBe('/login');

  });

});

test result:

 PASS  examples/69878146/ButtonLogin.test.tsx (10.675 s)

  ButtonLogin

    ✓ should pass (41 ms)



-----------------|---------|----------|---------|---------|-------------------

File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 

-----------------|---------|----------|---------|---------|-------------------

All files        |     100 |      100 |     100 |     100 |                   

 ButtonLogin.tsx |     100 |      100 |     100 |     100 |                   

-----------------|---------|----------|---------|---------|-------------------

Test Suites: 1 passed, 1 total

Tests:       1 passed, 1 total

Snapshots:   0 total

Time:        11.722 s, estimated 12 s

package version: "react-router-dom": "^5.2.0"