How can I test that url search changed with react testing library?

user_3530767 0
Viewed 10281

I have a component which reacts to url search changes, and a button that changes the url search. I want to test that when I click the button, the component reacts accordingly. Here's a codesandbox: https://codesandbox.io/s/react-testing-library-url-change-test-b5zq1.

App.js

export default function App() {
  const [urlChanged, setUrlChanged] = useState(false);
  const handleURLSearchChange = () => {
    window.location.search = new URLSearchParams({ foo: "bar" });
  };
  useEffect(() => {
    if (window.location.search.length !== 0) {
      setUrlChanged(true);
    }
  }, []);
  return (
    <div>
      <button aria-label="change" onClick={handleURLSearchChange}>
        Change URL search
      </button>
      <p aria-label="URL Status">{urlChanged ? "Changed!" : "Not yet"}</p>
    </div>
  );
}

App.spec.js

describe("App", () => {
  it("Reacts to url changes when touching the button", async () => {
    render(<App />);
    const button = await screen.findByLabelText("change");
    userEvent.click(button);
    const label = await screen.findByLabelText("URL Status");
    await waitFor(() => expect(label).toHaveTextContent("Changed!"));
  });
});

The problem is I'm getting:

    Error: Not implemented: navigation (except hash changes)

Note: I'm only able to see this error if I donwload the sandbox, and run npm install and npm test.

Do I have to mock the window.location object with both setters and getters? What's the better way to do it?

jsdom react-testing-library jestjs reactjs mocking
1 Answers

There are some problems with your component code implementation.

If the second argument is an empty array, useEffect will only execute once, so changing the value of window.location.search in the event handler handleURLSearchChange will not trigger useEffect again. You need to check location.search in the event handler to decide if set the value of urlChanged.

As @jonrsharpe's comment said, JSDOM doesn't support navigation. We need to mock it using Object.defineProperty().

Besides, the instance of the URLSearchParams class can NOT be assigned to window.location.search. Use .toString() to convert it to string.

E.g.

App.tsx:

import React from 'react';
import { useEffect, useState } from 'react';

export default function App() {
  const [urlChanged, setUrlChanged] = useState(false);
  const handleURLSearchChange = () => {
    window.location.search = '?' + new URLSearchParams({ foo: 'bar' }).toString();
    if (window.location.search.length !== 0) {
      setUrlChanged(true);
    }
  };

  return (
    <div>
      <button aria-label="change" onClick={handleURLSearchChange}>
        Change URL search
      </button>
      <p aria-label="URL Status">{urlChanged ? 'Changed!' : 'Not yet'}</p>
    </div>
  );
}

App.test.tsx:

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import React from 'react';
import App from './App';

describe('App', () => {
  it('Reacts to url changes when touching the button', async () => {
    Object.defineProperty(window, 'location', {
      value: {
        search: '',
      },
    });
    render(<App />);
    const button = await screen.findByLabelText('change');
    let label = await screen.findByLabelText('URL Status');
    await waitFor(() => expect(label).toHaveTextContent('Not yet'));
    userEvent.click(button);
    label = await screen.findByLabelText('URL Status');
    await waitFor(() => expect(label).toHaveTextContent('Changed!'));
  });
});

test result:

 PASS  examples/67572637/App.test.tsx (8.34 s)
  App
    ✓ Reacts to url changes when touching the button (48 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |       75 |     100 |     100 |                   
 App.tsx  |     100 |       75 |     100 |     100 | 8                 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.906 s
user_64635580
Related