Conflicts with other tests, Possibly React Router v6

[muhammedmoussa1]

it works but changes the window globally which causes crashes at another test, so can be used to modify the window inside every single test spirality without reflection on other files?

[evelynhathaway]

Hi @muhammedmoussa1! 👋

Conflict

Conflicts shouldn't be common with this mock so that's unexpected! I'm happy to see if there's something I can do to improve the mock here. Could you create a minimal reproduction of the conflict? Using a tool like Codesandbox (you can add the mock import in setupTests.js if you're using the React templates, for example) or including the related files here helps me out. I am curious to know the cause as the mock is nearly identical to the object in a browser.

Using Jest Location Mock In a Single File or Test

Jest Location Mock is intended to be used across an entire project so that the assumptions of the location object don't change from test to test.

That said, it's worth a try to import it only in each test file you want to have a mocked location and then remove the import from the Jest config setup file.

import "jest-location-mock";

// [tests...]

While not recommended, you can also manually execute the replace hook if all else fails. This may unblock you while we figure out the root of the conflict. Below is an example idea of what this would look like, but I wrote it on my phone from memory, so it may need some adjusting.

// Pull in the location mock setup hook
import {replaceLocation} from "jest-location-mock/lib/hooks";
// Extend the expect matchers for use with the mocked location
// - `expect(window.location).toBeAt("/test");`
import "jest-location-mock/lib/extend-expect";

describe("native location", () => {
  test("should use native location", () => {
    // [expectations...]
  });
});

describe("mocked location", () => {
  // Store the native location stub
  let originalLocation;
  beforeAll(() => {
    originalLocation = Object.getOwnPropertyDescriptor(window, "location");
  });
  // Replace the location property with a clean mock for every each in this describe block
  beforeEach(replaceLocation);
  // Reset the location object back to the native stub after all tests complete
  afterAll(() => {
    Object.defineProperty(window, "location", originalLocation);
  });
  test("should use mocked location", () => {
    // [expectations...]
  });
});

[meatwallace]

for what it's worth, i just encountered an issue when using it with react-router-dom v6 - using it seemed to break react router's ability to update window.location.href, so i imported this package in the specific test suites where we were interacting with the location state directly and avoided the issue entirely.

no specific errors were reported, so i didn't deem it worth time to dig deeper 🤷