Jest: Object.defineProperty를 사용하여 window.location을 변경할 수 없습니다.

비슷한 문제가 있습니다. 자신만의 JSDOMEnvironment를 만들고 jsdom 객체를 이와 같이 전역에 노출할 수 있습니다.

const JSDOMEnvironment = require('jest-environment-jsdom');

module.exports = class CustomizedJSDomEnvironment extends JSDOMEnvironment {
  constructor(config) {
    super(config);
    this.global.jsdom = this.dom;
  }

  teardown() {
    this.global.jsdom = null;
    return super.teardown();
  }
};

그런 다음 원하는 대로 테스트 케이스에서 jsdom.reconfigure를 호출할 수 있습니다.

좋은 해결 방법입니다. 공유해 주셔서 감사합니다!

약속이므로 super.teardown(); 를 반환해야 합니다. btw

완벽합니다. @oliverzy - 시도해 보겠습니다. 감사 해요!

이를 문서화할 적절한 장소가 있습니까? 꽤 자주 나오는 질문인 것 같습니다. 바라건대, 이것이 문서에 통합된다면 미래의 문제를 줄일 수 있습니까?

이 솔루션은 매우 작동하지 않았다.

테스트 파일 내에서 global 가 JSDom의 window 개체로 설정된 것 같습니다.

즉, 테스트 스위트 내에서 global 는 window 와 동일하지만 JSDOMEnvironment 를 확장하는 클래스 내에서 global 는 Node 환경에서 가져옵니다.

결과적으로 다음과 같습니다.

describe("test suite", () => {
  it("should not fail", () => {
    global.jsdom.reconfigure({
      url: "https://www.example.com/"
    });
  });
});

global.jsdom 이 정의되지 않았기 때문에 실패합니다.

나는 이것을 함으로써 그것을 해결했지만 그것에 대해 별로 소란스럽지는 않다.

const JSDOMEnvironment = require("jest-environment-jsdom");

module.exports = class JSDOMEnvironmentGlobal extends JSDOMEnvironment {
  constructor(config) {
    super(config);

    this.dom.window.jsdom = this.dom;
  }
};

이 환경에서 테스트 스위트 내의 global.jsdom 는 this.dom 와 같고 위의 테스트 스위트가 작동합니다.

나에게 jsdom 를 자체 window 객체의 속성으로 설정하는 것은 결국 무너질 수밖에 없는 것처럼 느껴집니다. 더 깨끗한 방법이 있습니까?

테스트에서 global.jsdom 가 아닌 jsdom 를 써야 합니다.

@oliverzy 이렇게?

describe("test suite", () => {
  it("should not fail", () => {
    jsdom.reconfigure({
      url: "https://www.example.com/"
    });
  });
});

그러면 jsdom is not defined 가 발생하지만 제가 잘못 해석하고 있을 수 있습니다.

@ simon360 구성하십시오 testEnvironment @oliverzy의 코드를 참조 https://facebook.github.io/jest/docs/en/configuration.html#testenvironment -String

@danielbayerlein 내 Jest 구성에는 다음이 있습니다.

"testEnvironment": "@wel-ui/jest-environment-jsdom-global"

여기서 @wel-ui/jest-environment-jsdom-global 는 모노레포에 있는 패키지의 이름입니다. 그러나 jsdom 에 window jsdom 를 설정하는 솔루션이 예상대로 작동하기 때문에 환경이 올바르게 사용되고 있습니다.

BTW, 원래 솔루션이 새 버전에서 작동하지 않는 이유를 아는 사람이 있습니까?
이 하나:

Object.defineProperty(location, "hostname", {
  value: "example.com",
  writable: true
});

@modestfake 우리는 JSDOM@9 에서 JSDOM@11 로 업그레이드했습니다. 제 추측으로는 변수 정의 방법이 변경되었다는 것입니다.

@SimenB 알겠습니다. jsdom reconfigure 메소드에 대한 설명 을 찾았습니다.

창의 맨 위 속성은 사양에서 [위조 불가능]으로 표시되어 있습니다. 즉, 구성할 수 없는 자체 속성이므로 Object.defineProperty를 사용하더라도 jsdom 내부에서 실행되는 일반 코드로 덮어쓰거나 숨길 수 없습니다.

이 동작을 보여주기 위해 새 저장소를 추가했습니다. 로컬에서 복제하여 복제할 수 있는 사람이 있습니까?

https://github.com/simon360/test-environment-for-jest

@simon360 재현

@ simon360 찾았습니다. global.jsdom 정의할 때 this 키워드를 놓쳤습니다.

const JSDOMEnvironment = require("jest-environment-jsdom");

module.exports = class JSDOMEnvironmentGlobal extends JSDOMEnvironment {
  constructor(config) {
    super(config);

    this.global.jsdom = this.dom;
  }

  teardown() {
    this.global.jsdom = null;

    return super.teardown();
  }
};

location.search 어떻습니까? 그것에 대한 언급을 찾지 못했습니다. https://github.com/tmpvar/jsdom/blob/05a6deb6b91b4e02c53ce240116146e59f7e14d7/README.md#reconfiguring -the-jsdom-with-reconfiguresettings

@andrewBalekha 이건 어때?

jsdom.reconfigure({
  url: 'https://www.example.com/endpoint?queryparam1=15&queryparam2=test'
});

@modestfake 감사

알겠습니다. 이제 Jest 환경 개체의 this.global 가 Jest 테스트 파일에서 global 로 설정됩니다. 이해가 됩니다. 도와주셔서 감사합니다! 관심이 충분하다면 해당 리포지토리의 복구된 버전을 패키징하고 npm 로 jest-environment-jsdom-global npm 에 넣을 수 있습니다.

그러나 앞으로 Jest에서 이를 수행할 수 있는 더 깨끗한 방법이 있기를 바랍니다. 이것은 window.location 를 변경하는 마찰이 적은 방법이 아닙니다.

@jest-environment 와 같은 새 docblock 이 있을 수 있습니까? 예를 들어...

/**
 * @jest-url https://www.example.com/
 */

또는 JSDom이 jest 개체의 특정 부분에 노출될 수 있습니다.

jest.environment.jsdom.reconfigure({
  url: "https://www.example.com/"
});

( window.top 를 변경할 수 있다는 추가 이점이 있음)

이제 #5003을 병합했습니다. 그것을 docblock으로 추가할 수 있다는 것이 의미가 있을지 모르지만 확실하지 않습니다. @cpojer? 새로운 옵션을 통해 제공될 수 있으므로 testUrl 도 더 이상 사용하지 않을 수 있습니다.

관심이 충분하다면 해당 리포지토리의 복구된 버전을 패키징하고 npm 로 jest-environment-jsdom-global npm 에 넣을 수 있습니다.

URL을 설정하는 것 이상을 수행하므로 어떤 경우에도 이것이 의미가 있다고 생각합니다. 전체 JSDOM을 환경에 노출합니다.

@andrewBalekha Object.defineProperty(location, 'search', { ...options }); window.location 와 동일한 오류가 발생합니다. 그래도 제안해 주셔서 감사합니다.

Object.defineProperty(window.location, 'href', {
설정: newValue => { currentUrl = newValue; },
});
이전 버전에서 이것을 가지고 있었고 이제 오류가 발생합니다.
쓰기 가능을 추가하면 true
접근자와 쓰기 가능을 모두 지정할 수 없다는 또 다른 예외가 발생합니다.

나는라는 NPM에 새 패키지를 발표했다 jest-environment-jsdom-global 어떤 사람들은 함께 발생하는 문제에 도움이 될 수있는, Object.defineProperty .

누구든지 { writable: true } 대한 해결 방법이 있습니까?

예를 들어:

Object.defineProperty(window.location, 'href', { writable: true })

...

Object.defineProperty(window.location, 'hash', { writable: true })

...

Object.defineProperty(window.location, 'search', { writable: true })

@danielbayerlein 이 이 스레드를 읽었습니다. 사용자 지정 환경을 만들어야 합니다. 이전 메시지에 예제가 포함된 url이 포함되어 있습니다.

@modestfake 이미 이 스레드를 읽었으며 https://github.com/facebook/jest/issues/5124#issuecomment -352749005가 제대로 작동합니다. 하지만 다른 사용 사례가 있습니다. Jest 21.xx를 사용하여 URL 없이 Object.defineProperty(window.location, 'href', { writable: true }) 를 설정했습니다. { writable: true } 있습니다. URL을 설정하면 테스트가 의미가 없습니다.

@danielbayerlein 쓰기 가능하지만 실제로 재정의하지 않는 사용 사례는 무엇입니까? 이것을 이해하면 해결 방법을 찾는 데 도움이 될 수 있습니다.

URL을 변경하는 기능이 있습니다.

라우팅.js

...

export function redirectToErrorPage () {
  window.location.href = '/error.html'
}

...

라우팅.test.js

test('redirect to the error page', () => {
  ...
  expect(window.location.href).toBe('/error.html')
  ...
})

Jest 21.xx를 사용하여 Object.defineProperty(window.location, 'href', { writable: true })

window.location.assign 전환하는 것이 좋습니다. 그렇게 하면 함수를 모의할 수 있습니다.

@simon360 매력처럼 작동합니다! 감사합니다. 🤝

나는 사용했다

history.pushState({}, "page 2", "/bar.html");

jest 구성에서 testURL 와 함께

위치 부분만이 문제가 아닙니다. jsdom.reconfigureWindow 를 호출하기 위해 jsdom 별도로 가져올 수 없습니다(최신 버전의 jsdom에는 해당 기능이 더 이상 존재하지 않기 때문입니다). window !== top 경우 다르게 실행되는 코드를 테스트하기 위해 이 작업을 수행했습니다. 최신 버전의 jsdom을 사용하는 최신 버전의 jest에서는 더 이상 이를 달성할 수 있는 방법이 없습니다.

@andyearnshaw jsdom.reconfigure 메서드에는 개체에 windowTop 멤버가 있습니다.

위에서 링크한 JSDOM 환경( jest-environment-jsdom-global )을 사용하는 경우 다음을 수행할 수 있습니다.

jsdom.reconfigure({
  windowTop: YOUR_VALUE
});

테스트에서 최고의 가치를 조롱합니다.

나는 그것을 사용하고 잘 작동합니다, 감사합니다!

2018년 1월 30일 화, 13:40 simon360, 알림 @github.com 작성:

@andyearnshaw https://github.com/andyearnshaw jsdom.reconfigure
메서드의 개체에 windowTop 멤버가 있습니다.

JSDOM 환경(jest-environment-jsdom-global)을 사용하는 경우 I
위의 링크에서 다음을 수행할 수 있습니다.

jsdom.reconfigure({
windowTop: YOUR_VALUE
});

테스트에서 최고의 가치를 조롱합니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/facebook/jest/issues/5124#issuecomment-361595999 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/ABvdEzCLlWtzr0udscL0C6KUxpgXHZRhks5tPxvJgaJpZM4RGN7C
.

window.history.pushState 및 testUrl 이 저에게 효과적이었습니다.

https://github.com/facebook/jest/issues/5124#issuecomment -359411593

Jest 측에서 할 일이 없고 해결 방법이 있으므로 이것을 닫을 것입니다(자유롭게 토론을 계속하십시오!)

jsdom v8.5.0에서 v11.6.2로 업그레이드하면 문제가 해결되었습니다. 따라서 내 package.json 에는 다음이 포함됩니다.

"jest": "^21.2.1",
"jest-cli": "^21.2.1",
"jsdom": "^11.6.2",

jest 및 jest-cli를 v22.2.2로 업그레이드하면 중단됩니다.

@andr-3-w package.json에 jsdom이 있는 특별한 이유가 있습니까? Jest와 함께 제공됩니다.

@SimenB는 질문 좋은에 대한 필요가 없습니다 jsdom 우리의 package.json . 감사 해요!

따라서 jsdom을 직접 사용하지 않고 내 물건에 대해 생각해낸 솔루션은 다음과 같습니다.

Jest 21.2.1에서 작동합니다(저는 해당 버전에서 테스트했습니다).

Jest 설정으로 이동합니다(예: package.json 사용).

"jest": { "testURL": "http://localhost" }

이제 window.location 객체를 변경할 수 있으며 테스트 중에 URL을 원하는 대로 설정할 수 있습니다.

it('Should set href url to testURL', () => {
    // Here I set href to my needs, opinionated stuff bellow
    const newUrl = 'http://localhost/editor.html/content/raiweb/it/news/2018/02/altered-carbon-best-cyberpunk-tv-series-ever.html';
    Object.defineProperty(window.location, 'href', {
        writable: true,
        value: newUrl
    });

    console.log(window.location.href);
});

it('Should set pathname url to testURL', () => {
    // Here I set href to my needs, opinionated stuff bellow
    const newUrl = '/editor.html/content/raiweb/it/news/2018/02/altered-carbon-best-cyberpunk-tv-series-ever.html';
    Object.defineProperty(window.location, 'pathname', {
        writable: true,
        value: newUrl
    });

    console.log(window.location.pathname);
});

이것이 누군가를 돕기를 바랍니다.

게시를 중지하십시오. 농담으로는 작동하지 않습니다.": "^22.4.2"

@UserNT 여기에서 작동하는 버전을 언급했으며 프로덕션 테스트 슈트에 광범위하게 사용합니다. 최신 버전에서 작동하지 않으면 죄송합니다. 무작위 공격 대신 자신의 솔루션을 생각해 보세요.

완전성을 위해 솔루션이 이 스레드의 중간에 좌초되어 있기 때문에...

@petar-prog91의 솔루션은 Jest 21에서 작동하지만 업데이트된 jsdom 가 있는 Jest 22에서는 작동하지 않습니다.

같은 최신 농담에서 실행하기 위해, 사용 뭔가 jest-environment-jsdom-global (전체 공개, 이것은 내 패키지)에 노출 jsdom 객체를 사용할 jsdom.reconfigure 있을 것이다, 동일한 (또는 적어도 유사한) 효과.

https://github.com/facebook/jest/issues/5124#issuecomment -359411593은 jest 22에서도 작동합니다.

@simon360 안녕하세요, location.href 의 setter를 해킹해야 하는 경우 어떻게 해야 하나요?
내 이전 테스트에는 이와 같은 테스트가 많았고 지금은 모두 실패했습니다...

const setHrefMockFn = jest.fn();
beforeAll(() => {
  Object.defineProperty(location, "href", {
    get: () => "https://xxxxx",
    set: setHrefMockFn
  });
});
it("xxx", () => {
  //...
  expect(setHrefMockFn.mock.calls[0][0]).toBe(xxx);
});

@simon360 라이브러리에서 아래와 같이 테스트를 업데이트하는 방법의 예를 들어

beforeAll(() => {
  =======

  Object.defineProperty(window.location, 'href', {
    writable: true
  });
});

@abhijeetNmishra 문서 를 보았습니까? 나는 그것이 당신의 질문에 답할 것이라고 믿습니다.

@ simon360 예, 문서에 대한 이해를 바탕으로 약

jsdom.reconfigure({
      url: "https://www.example.com/"
    });

테스트별로가 아니라 전역적으로 URL을 재정의합니다. 도와주세요!

@abhijeetNmishra 이 문제가 토론하기에 가장 좋은 장소인지 잘 모르겠습니다. jest-environment-jsdom-global 리포지토리에서 문제를 해결할 수 있는 문제를 열어주시겠습니까? 감사 해요!

@SimenB 명시된 해결 방법("use jest-environment-jsdom-global ")은 분명히 매우 일반적인 문제에 대한 극도로 차선책처럼 느껴집니다. Jest 22로 업그레이드하는 사람은 이제 해당 타사 패키지에 종속성을 추가하고 (사용자의 관점에서) 테스트 중 일부를 다시 작성해야 합니다. 이것은 Jest의 행동이 퇴행하는 것입니다.

기본 jest-environment-jsdom 구축할 수 있는 이에 대한 솔루션이 있습니까? 당신의 지도와 함께 PR을 하게 되어 기쁩니다.

누군가가 window.location.href를 변경하기 위해 이 많은 고리를 건너뛰어야 하는 것은 매우 불행한 일입니다. 방금 Jest를 사용하기 시작했으며 이 문제를 고려할 때 테스트 프레임워크 선택을 재고하려고 합니다. 위에서 제안한 못생긴 해킹보다 더 나은 솔루션이 정말 없을까요?

@ydogandjiev 는 이 문제를 해결하기 위한 프로젝트에 자유롭게 기여할 수 있습니다. 이것은 오픈 소스이므로 "받아들일 수 없다", "어리석다"와 같은 댓글로 날뛰는 것은 누구에게도 도움이 되지 않는다는 점을 기억하십시오.

@msholty-fd 할 수만 있다면 돕고 싶습니다. 저는 jest와 jsdom을 막 시작하기 때문에 이 경험을 개선하기 위한 최선의 방법이 무엇인지 정확히 알기 위해 이러한 라이브러리에 대해 충분히 깊이 이해하고 있는지 확신할 수 없습니다. 이것은 농담이나 jsdom에서 가장 잘 해결되는 것입니까? 이 라이브러리 중 하나가 Object.defineProperty 접근 방식을 깨는 변경 사항을 적용한 것 같습니다. 농담이나 jsdom에서 변경된 사항입니까?

다음은 window.location을 변경하는 데 필요한 줄 수에 따라 선호하는 모든 옵션입니다. 이들 중 어느 것도 현재 작동하지 않습니다:

1. jsdom에서 "오류: 구현되지 않음: 탐색(해시 변경 제외)" 메시지와 함께 예외가 발생하기 때문에 href를 직접 설정하면 작동하지 않습니다.
   window.location.href = "https://www.example.com";

1. JSDOM이 창의 위치 속성을 [Unforgeable] 로 만들었기 때문에 Object.defineProperty를 사용하면 작동하지 않습니다.

   Object.defineProperty(window.location, "href", {
     value: "https://www.example.com",
     configurable: true
   });
   

2. jest는 쉬운 액세스를 위해 노출되지 않은 자체 인스턴스를 사용하는 것 같기 때문에 jsdom의 인스턴스를 만들고 구성하는 것은 작동하지 않습니다.

   import { JSDOM } from "jsdom";
   ...
   const dom = new JSDOM();
   dom.reconfigure({ url: "https://www.example.com" });
   

옵션 1 또는 2를 작동시키려면 jsdom이 실제 브라우저처럼 행동하려는 현재 목표를 역추적해야 합니다. 따라서 우리가 할 수 있는 유일한 옵션은 jest가 사용하는 jsdom의 인스턴스를 쉽게 재구성할 수 있도록 하는 것입니다. 해당 인스턴스를 전역 jest 객체에 직접 노출하는 것이 의미가 있습니까? 즉, 다음과 같은 것을 허용합니다.

jest.dom.reconfigure({ url: "https://www.example.com" });

나는 여전히 location.assign('some-url') 것이 location.href = 'some-url' 보다 낫다고 생각합니다. 할당보다 함수 호출이 더 명시적이며 함수를 조롱할 수 있습니다.

코드 _set_를 시도하는 경우에 @SimenB location.href , 예 location.assign() 더 좋다. 그러나 location.href _reads_ location.assign() 가 실제로 아무 것도 하지 않기 때문에 location.assign() 가 문제를 해결하지 못합니다.

reconfigure 사용하는 아이디어는 location.href 가 특정 방식으로 형성될 때만 활성화되는 코드 경로를 활성화하는 것입니다. 우리의 경우 현재 도메인에 따라 변경된 일부 코드가 있습니다. 코드는 냄새가 나지만 또한 필요합니다. 냄새 나는 코드를 완화하는 가장 좋은 방법은 동작을 캡처하고 유지되도록 하는 테스트 장치를 사용하는 것입니다. 제자리에.

리디렉션을 테스트하기 위해 Enzyme 및 탑재된 구성 요소와 함께 이것을 사용하는 방법이 있습니까?

Jest를 업그레이드하기 전에 아래 테스트를 통과했습니다.

```
it('경로를 수정하는 경로', () => {

Object.defineProperty(window.location, 'href', {
  writable: true,
  value: 'https://mysuperawesomesite.com/',
});

const component = mount(
  <App {...props} />
);

const link = component.find('.class');

link.simulate('click');

expect(window.location.href).toEqual('https://mysuperawesomesite.com/new');

});

After upgrading Jest and implementing [jest-environment-jsdom-global](https://www.npmjs.com/package/jest-environment-jsdom-global), I tried the following to no avail:

  ```
it('routes to correct route', () => {

    jsdom.reconfigure({
      url: 'https://mysuperawesomesite.com/',
    });

    const component = mount(
      <App {...props} />
    );

    const link = component.find('.class');

    link.simulate('click');

    expect(window.location.href).toEqual('https://mysuperawesomesite.com/new');
  });

(window.location.href는 여전히 ' https://mysuperawesomesite.com/ '과 같으며 ('https://mysuperawesomesite.com/new')로 변경되지 않았습니다.

이 방법을 사용할 때 요소의 클릭 이벤트는 리디렉션되지 않으며 리디렉션은 window.location.href를 설정하여 발생합니다.

이것을 적절하게 테스트하는 방법 또는 이전에 Object.defineProperty를 사용한 테스트가 처음부터 제대로 구성되지 않았는지 불명확합니다. 도움을 주셔서 미리 감사드립니다.

편집: 해결

window.location.href = href 대신 window.location.assign(url)을 사용하여 이 문제를 해결할 수 있었습니다. 이를 통해 assign 메서드를 제거하고 제대로 호출되었는지 테스트할 수 있었습니다. 아래 참조:

it('routes to correct route', () => {
    window.location.assign = jest.fn();

    const component = mount(
      <App {...props} />
    );

    const link = component.find('.class');

    link.simulate('click');

    expect(window.location.assign).toBeCalledWith('https://mysuperawesomesite.com/new');
    window.location.assign.mockRestore();
  });

@SimenB .assign 와 .href 사이에는 큰 차이가 있습니다. MDN에서 읽을 수 있습니다. 첫 번째는 주요 교차 도메인 제한 사항이 있습니다. 내 코드에서 내 코드가 실행 중인 iframe에서 상위 페이지를 리디렉션하고 싶습니다. 그것들은 교차 도메인입니다. 그리고 내가 할 수 있는 유일한 방법은 href 를 변경하는 것입니다.
현재 해결 방법이 표시되지 않고 이 기능에 대한 테스트를 수행하지 않아야 하기 때문에 이 문제가 다시 열리면 좋겠습니다. 분명히 짜증납니다.

@soswow와 같은 배에 있습니다. 이 기능이 복원될 때까지 여러 단위 테스트도 제거하므로 URL을 재정의하는 메커니즘을 제공할 수 있다면 좋을 것입니다.

현재 해결 방법이 표시되지 않고 이 기능에 대한 테스트를 수행하지 않아야 하기 때문에 이 문제가 다시 열리면 좋겠습니다. 분명히 짜증납니다.

우리가 농담의 편에서 할 수 있는 일은 아무것도 없습니다. 나는 jsdom이 그것을 지원하는 PR을 좋아할 것이라고 확신합니다. https://github.com/jsdom/jsdom/issues/2112

다음은 작동하는 간단한 솔루션입니다.

describe('changing location', () => {
  const testURL = location.href;

  beforeEach(() => history.replaceState({}, 'Login', '/login'));
  afterEach(() => history.replaceState({}, 'Home', '/'));

  it('works', () => {
    expect(location.pathname).toBe('/login');
  });
});

@vastus 내가 명시적으로 지적했듯이 문제는 교차 도메인에 있습니다. 내가 기억하는 한 history API는 다른 도메인으로의 전환을 허용하지 않습니다.

location 는 jsdom window 개체에서 직접 재정의할 수 없으므로 한 가지 가능한 접근 방식은 파생 개체에서 재정의하는 것입니다.

global.window = Object.create(window);
Object.defineProperty(window, 'location', {
  value: {
    href: 'http://example.org/'
  }
});

나는 이것을 사용하여 문제를 해결합니다.

const windowLocation = JSON.stringify(window.location);
delete window.location;
Object.defineProperty(window, 'location', {
  value: JSON.parse(windowLocation)
});

@RubenVerborgh 및 얻었습니다 .

@vastus 솔루션을 기반으로 location.search 테스트 예제 추가:

  test('gets passed query param and returns it as a string if it exists', () => {
    history.replaceState({}, 'Test', '/test?customer=123');
    const customerId = getQueryParam('customer');
    expect(customerId).toBe('123');
  });

@RubenVerborgh 매력처럼 작동합니다.

노력하다:

window.history.pushState({}, null, '/pathname?k=v');

@sahalsaad 와 유사한 솔루션:
```자바스크립트
const oldWindow = window.location;
window.location 삭제;
창 위치 = {
... 오래된 창,
// 다음 sinon 스텁과 같은 사용자 정의 덮어쓰기를 포함합니다.
교체: sinon.stub(),
};

// 마법을 걸어라

window.location = 오래된 창;
````

@sahalsaad 감사합니다! 나는 window.location.search를 조롱하기 위해 솔루션의 변형을 사용했습니다.

const location = {
    ...window.location,
    search: queryString,
};
Object.defineProperty(window, 'location', {
    writable: true,
    value: location,
});

아마도 더 나은 솔루션:

import { URL } from 'whatwg-url';

const location = new URL(window.location.href);
location.assign = jest.fn()
location.replace = jest.fn()
location.reload = jest.fn()

delete window.location
window.location = location

@kdelmonte가 제공한 솔루션을 사용하여 내 문제를 해결했습니다. window.location.search 변수를 조롱해야 했습니다. 그래서 나는 사용했다

window.history.pushState({}, null, '?skuId=1234')

location 는 jsdom window 개체에서 직접 재정의할 수 없으므로 한 가지 가능한 접근 방식은 파생 개체에서 재정의하는 것입니다.

global.window = Object.create(window);
Object.defineProperty(window, 'location', {
  value: {
    href: 'http://example.org/'
  }
});

귀하의 답변은 내 상황에 맞는 유일한 답변입니다. 감사합니다!

location 는 jsdom window 개체에서 직접 재정의할 수 없으므로 한 가지 가능한 접근 방식은 파생 개체에서 재정의하는 것입니다.

global.window = Object.create(window);
Object.defineProperty(window, 'location', {
  value: {
    href: 'http://example.org/'
  }
});

귀하의 답변은 내 상황에 맞는 유일한 답변입니다. 감사합니다!

이것은 더 이상 작동하지 않습니다 😢

location 는 jsdom window 개체에서 직접 재정의할 수 없으므로 한 가지 가능한 접근 방식은 파생 개체에서 재정의하는 것입니다.

global.window = Object.create(window);
Object.defineProperty(window, 'location', {
  value: {
    href: 'http://example.org/'
  }
});

귀하의 답변은 내 상황에 맞는 유일한 답변입니다. 감사합니다!

이것은 더 이상 작동하지 않습니다 😢

나에게도 효과가 없다

나는 이것을 해결했다 :

delete window.location
window.location = {
  href: 'http://example.org/,
}

Location 작업을 위한 유틸리티로 다음 모의를 사용하고 있습니다.

export class MockLocation extends URL implements Location {
  ancestorOrigins: any = []
  toString = jest.fn().mockImplementation(() => this.toString())
  assign = jest.fn(href => this.href = href)
  replace = jest.fn(href => this.href = href)
  reload = jest.fn()

  constructor(
    url: string = 'http://mock.localhost',
  ) {
    super(url)
  }

  onWindow(window: Window) {
    Object.defineProperty(window, 'location', { 
      writable: true,
      value: this
    });
    return this
  }
}

그런 다음 내 테스트에서

let location: MockLocation

beforeEach(() => {
    location = new MockLocation(MOCK_PARTNER_URL).onWindow(window)
})

나는 항상 이와 같은 까다로운 객체를 스터빙하고 유연한 도우미 함수를 만들었습니다.

export const safelyStubAndThenCleanup = (target, method, value) => {
  const original = target[method]
  beforeEach(() => {
    Object.defineProperty(target, method, { configurable: true, value })
  })
  afterEach(() => {
    Object.defineProperty(target, method, { configurable: true, value: original })
  })
}

그리고 사용법:

describe('when on /pages', () => {
  safelyStubAndThenCleanup(window, 'location', { pathname: '/pages' })

  it('should do something neat', () => { /* ... */ })
})

그리고 원하는 것을 스텁할 수 있습니다. pathname , href 등... 이렇게 하면 정리의 추가 이점을 얻을 수 있습니다.

핵심은 location 자체를 엉망으로 만들 수 없으므로 location 를 가짜로 바꾸고 테스트가 완료되면 다시 넣으십시오.

디버깅 세션에서 볼 수 있듯이 global.location 는 getter를 통해 구현되지만 단순 속성은 아닙니다. 이렇게 재정의하는 것이 더 안전하지 않을까요?

let originalLocationDescriptor;
beforeAll(() => {
  originalLocationDescriptor = Object.getOwnPropertyDescriptor(global, 'location');
  delete global.location;
  global.location = {};
});
afterAll(() => {
  Object.defineProperty(global, 'location', originalLocationDescriptor);
}):

원래 global.location 를 사용하려는 이유를 상상하기 어렵지만 조금 더 정확해 보입니다.
물론 이 코드는 저에게 잘 맞습니다. 나는 단지 location.pathname 에 접근하지만 이 객체는 필요한 경우 jest.fn() 로 쉽게 확장될 수 있습니다.

이것은 jest 26.5를 사용하여 저에게 효과적이었습니다.

function stubLocation(location) {
  beforeEach(() => {
    jest.spyOn(window, "location", "get").mockReturnValue({
      ...window.location,
      ...location,
    });
  });
}

stubLocation({ pathname: "/facebook/jest/issues/5124" });

test("mocks location prop", () => {
  expect(window.location.pathname).toEqual("/facebook/jest/issues/5124");
});

@vastus 솔루션을 기반으로 location.search 테스트 예제 추가:

  test('gets passed query param and returns it as a string if it exists', () => {
    history.replaceState({}, 'Test', '/test?customer=123');
    const customerId = getQueryParam('customer');
    expect(customerId).toBe('123');
  });

이것은 내가 겪고있는 문제에 정확히 잘 맞았습니다.