jestjs - spyOn window location with jsdom>=21.0.0 results in error - Stack Overflow

admin管理员组

文章数量:1398831

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

Share Improve this question Follow edited Mar 13 at 11:26 Ruth asked Mar 13 at 9:29 RuthRuth 1,11855 gold badges1616 silver badges3131 bronze badges 3

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： jestjsspyOn window location with jsdomgt2100 results in errorStack Overflow