Jsdom: 브라우저 기록 pushState/onpopstate/window.location이 잘 관리되지 않음

에 만든 2016년 07월 17일 · 4코멘트 · 출처: jsdom/jsdom

안녕하세요,

역사 관리가 완전하지 않다고 말하고 싶습니다.
내 측의 이 테스트는 jsdom 버전 9.4.1에서 실패합니다.

    describe('jsdom history management', () => {
        before(() => {
        // Init DOM with a fake document
        // <base> and uri (initial uri) allow to do pushState in jsdom
            jsdom.env({
                html: `
                 <html>
                     <head>
                         <base href="http://localhost:8080/"></base>
                     </head>
                  </html>
                `,
                url: 'http://localhost:8080/',
                done(err, window) {
                    global.window = window;
                    global.document = window.document;
                    window.console = global.console;
                }
            });
        });

        it('location not updated', () => {
            window.history.pushState({}, 'route1', '/route1');
            assert(window.location.pathname === '/route1'); // this test is OK
            window.history.back();
            assert(window.location.pathname === '/'); // this test fails pathname still with value '/route1'
        });

        it('onpopstate not called', () => {
            window.onpopstate = () => { };
            const spy_onpopstate = sinon.spy(window, 'onpopstate');
            window.history.pushState({}, 'route1', '/route1');
            window.history.back();
            window.history.forward();
            assert(spy_onpopstate.called);// this test fails as well
        });
    });

출처

camelaissani

👍9

가장 유용한 댓글

이 게시물을 찾고 테스트를 작동시키려는 사람을 위한 해결 방법은 Sinon spy 를 사용하고 history.pushState 또는 history.replaceState 메서드를 조롱하는 것입니다.

crobinson42 에 2017년 04월 28일

👍7

모든 4 댓글

네. jsdom은 완전히 새로운 창 객체 생성을 포함하기 때문에 아직 일반적으로 탐색을 지원하지 않습니다. 이것은 우리가 해결에 대해 생각하기 시작하지 않은 어려운 장기 문제입니다.

domenic 에 2016년 07월 17일

crobinson42 에 2017년 04월 28일

👍7

@crobinson42 내가 당신을 이해하는지 확실하지 않지만 window.onpopstate에 조롱도 도움이 될까요?

gaurav5430 에 2017년 12월 18일

다음은 내가 사용하는 해결 방법입니다(TypeScript).

function firePopstateOnRoute(window: DOMWindow): void {
  const { history } = window;
  const originalBack = history.back;
  const originalForwards = history.forward;

  (history as unknown as {__proto__: History})['__proto__'].back = function patchedBack(this: History, ...args: Parameters<History['back']>): void {
    originalBack.apply(this, args);

    window.dispatchEvent(new PopStateEvent('popstate'));
  };

  (history as unknown as {__proto__: History}).__proto__.forward = function patchedForward(this: History, ...args: Parameters<History['forward']>): void {
    originalForwards.apply(this, args);

    window.dispatchEvent(new PopStateEvent('popstate'));
  };
}

export function mockBrowser(): void {
  const jsdom = new JSDOM('');
  const { window } = jsdom;

  firePopstateOnRoute(window);
}

jsdevtom 에 2020년 09월 18일

👍2 😄1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Jsdom: 브라우저 기록 pushState/onpopstate/window.location이 잘 관리되지 않음

가장 유용한 댓글

모든 4 댓글

관련 문제