due to another problem we try to update our jsdom to 26.0.0

We have some tests that rely on spying onto window.location. jsdom made that non-configurable in jsdom 21.0.0

Our test class:

export const getSearchParam = (name: string): string | boolean | undefined => {
  const params = new URLSearchParams(window.location.search);

  const value = params.get(name)?.trim();
  if (!value) {
    return undefined;
  }

  const lowerValue = value.toLowerCase();
  if (lowerValue === 'true') {
    return true;
  }
  if (lowerValue === 'false') {
    return false;
  }

  return value;
};

describe('getSearchParam', () => {
  beforeEach(() => {
    jest.spyOn(window, 'location', 'get').mockReturnValue({ search: '?testParam=value123&flag=true' } as Location);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('should return the correct search parameter value', () => {
    expect(getSearchParam('testParam')).toBe('value123');
  });
});

our package.json

"jest": {
  "preset": "jest-preset-angular",
  "testEnvironment": "jest-preset-angular/environments/jest-jsdom-env",
  "setupFilesAfterEnv": [
    "<rootDir>/src/setup.jest.ts"
  ],
  "testPathIgnorePatterns": [
    "<rootDir>/node_modules/",
    "<rootDir>/dist/",
    "e2e-tests"
  ],
  "reporters": [
    "default"
  ],
  "clearMocks": true
}

I have a sample project where you can see here that we do a spyOn window location.

Once I update this jsdom version to 21.0.0 I get the error

Property `location` is not declared configurable

The release notes of jsdom reflect this change as well.

How can I change my test to be able to update jsdom, but still be able to test my function?

due to another problem we try to update our jsdom to 26.0.0

We have some tests that rely on spying onto window.location. jsdom made that non-configurable in jsdom 21.0.0

Our test class:

export const getSearchParam = (name: string): string | boolean | undefined => {
  const params = new URLSearchParams(window.location.search);

  const value = params.get(name)?.trim();
  if (!value) {
    return undefined;
  }

  const lowerValue = value.toLowerCase();
  if (lowerValue === 'true') {
    return true;
  }
  if (lowerValue === 'false') {
    return false;
  }

  return value;
};

describe('getSearchParam', () => {
  beforeEach(() => {
    jest.spyOn(window, 'location', 'get').mockReturnValue({ search: '?testParam=value123&flag=true' } as Location);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('should return the correct search parameter value', () => {
    expect(getSearchParam('testParam')).toBe('value123');
  });
});

our package.json

"jest": {
  "preset": "jest-preset-angular",
  "testEnvironment": "jest-preset-angular/environments/jest-jsdom-env",
  "setupFilesAfterEnv": [
    "<rootDir>/src/setup.jest.ts"
  ],
  "testPathIgnorePatterns": [
    "<rootDir>/node_modules/",
    "<rootDir>/dist/",
    "e2e-tests"
  ],
  "reporters": [
    "default"
  ],
  "clearMocks": true
}

I have a sample project where you can see here that we do a spyOn window location.

Once I update this jsdom version to 21.0.0 I get the error

Property `location` is not declared configurable

The release notes of jsdom reflect this change as well.

How can I change my test to be able to update jsdom, but still be able to test my function?

• jestjs
• jsdom

• Please include your code as text and not a link to it. It would help if it was also a minimal reproducible example. – ewokx Commented Mar 13 at 9:49
• hi, I added the code – Ruth Commented Mar 13 at 11:26
• I also tried to create a stackblitz link but it ends in a 404.stackblitz/~/github/huehnerlady/jest-test – Ruth Commented Mar 13 at 11:27

1 Answer 1

As our only solution we now stop mocking the window all together and just do a pushState before everything:

    beforeEach(() => {
      window.history.pushState({}, '', '/?testParam=value123&flag=true');
    });

So the whole code then is:

export const getSearchParam = (name: string): string | boolean | undefined => {
  const params = new URLSearchParams(window.location.search);

  const value = params.get(name)?.trim();
  if (!value) {
    return undefined;
  }

  const lowerValue = value.toLowerCase();
  if (lowerValue === 'true') {
    return true;
  }
  if (lowerValue === 'false') {
    return false;
  }

  return value;
};

describe('getSearchParam', () => {
    beforeEach(() => {
      window.history.pushState({}, '', '/?testParam=value123&flag=true');
    });


  it('should return the correct search parameter value', () => {
    expect(getSearchParam('testParam')).toBe('value123');
  });
});

And if we want a different state in a test case, we then have another window.history.pushState({}, '', '/something'); in our test