Jest: window.location.href는 테스트에서 변경할 수 없습니다.

당신이 맞습니다. 이것은 실제로 jsdom 문제입니다. Facebook에서 이 문제를 해결하기 위해 수행한 작업은 다음과 같습니다.

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

이것은 우리에게 효과적이지만 내부적으로는 여전히 jsdom 7을 사용하고 있습니다.

Object.defineProperty 작업 방식이 괜찮다고 생각하므로 이 작업을 닫겠습니다. jsdom 8에서 작동하지 않는다면 기꺼이 다시 열겠습니다.

쿨, 감사합니다. 시도해 보겠습니다.

@cpojer , 이 문제를 다시 열려면 무엇을 클릭해야 하는지 알 수 없는 것 같습니다...

어쨌든 jest 환경에 여기에 설명된 대로 jsdom.changeUrl(window, url) 를 호출할 수 있습니까? [email protected] 의 창 인스턴스?

오래된 티켓이지만 여전히 이 문제가 있는 사람들을 위해 대신 window.location.assign() 를 사용하기 시작했습니다. 그래서 테스트에서 assign 함수를 다음과 같이 조롱할 수 있습니다.

it('will redirect with a bad route', () => {
    window.location.assign = jest.fn();
    const redirection = shallow(<Redirection />, {
      context: {
        router: {
          location: {
            pathname: '/wubbalubbadubdub',
          },
        },
      },
    });
    expect(window.location.assign).toBeCalledWith(`${CONFIG.APP_LEGACY_ROOT}`);
  });

@th3fallen 감사합니다. 멋지다!

Btw @cpojer 저는 5월 1일 FB에서 시작합니다.... ;P

멋진!

Mocha+Chai+Sinon.js에서 Jest로 테스트를 마이그레이션하려고 하는데 특정 테스트의 위치를 ​​변경하는 방법을 알 수 없습니다.
Jest 19.x 는 Object.defineProperty 트릭을 사용하여 위치를 변경할 수 없는 JSDom 9.12 를 사용합니다. 또한 tmpvar/jsdom#1700에 설명된 이유 때문에 jsdom.changeURL() 를 사용할 수 없습니다.
@cpojer Jest에서 jsdom.changeURL() 에 대한 일부 프록시 메서드를 구현하는 것은 어떻습니까?

@okovpashko 우리는 jsdom을 환경에 노출할 계획입니다: https://github.com/facebook/jest/issues/2460

Object.defineProperty 는 FB에서 우리를 위해 일합니다.

@thymikee 나는 그 문제를 보았지만 그 제안이 거부되었다고 생각했습니다.
@cpojer 나는 당신의 예를 잘못 읽었고 사람들이 Object.defineProperty(window, 'location', {value: 'url'}); 를 사용하도록 제안한 이 문제와 관련된 다른 것과 혼합했습니다. 감사합니다!

href 뿐만 아니라 변경해야 하므로 이 스레드를 읽을 누군가에게 유용할 수 있는 간단한 방법을 작성했습니다.

const setURL = (url) => {
  const parser = document.createElement('a');
  parser.href = url;
  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(prop => {
    Object.defineProperty(window.location, prop, {
      value: parser[prop],
      writable: true,
    });
  });
};

이 스레드를 더 끌어서 죄송하지만 제안된 대로 푸시 기능을 조롱하려고 했습니다...

reactRouterReduxMock.push = (url) => {
   Object.defineProperty(window.location, 'href', {
    writable: true,
    value: url
       })
})

하지만 여전히 라운드할 수 없는 jsdom 오류가 발생합니다.

       TypeError: Cannot read property '_location' of null
       at Window.location (/Users/user/projects/app/client/node_modules/jsdom/lib/jsdom/browser/Window.js:148:79)
       at value (/Users/user/projects/app/client/test/integration-tests/initialSetup.js:122:32) //this is the defineProperty line above

나는 이것이 jsdom 오류라는 것을 알고 있지만 이 문제를 해결한 사람들을 위해 이 문제를 해결할 수 있도록 공유할 수 있는 설정 컨텍스트가 더 있습니까?

감사 해요

@matt-dalton https://github.com/facebook/jest/issues/890#issuecomment -295939071에서 내 제안을 시도해보십시오.

@matt-dalton 귀하의 URL은 무엇입니까? jest-config.json 에 testURL이 설정되어 있습니까 아니면 about:blank 로 초기화합니까?

@ianlyons 예, package.json에서 이에 대해 "https://test.com/" 값을 설정했는데 blank 로 표시되는 경로가 없습니다.

@th3fallen 내가 당신을 올바르게 이해한다면 이것이 내 사용 사례에 적합하지 않다고 생각합니다. 할당이 트리거되도록 하는 컨텍스트 값으로 URL을 전달하고 있습니까? 기본적인 통합 테스트를 함께 하려고 하므로 라우터가 초기 데이터 로드에 어떻게 응답하는지 확인하고 싶습니다. API 응답을 조롱한 다음 앱 로직을 사용하여 URL을 변경해야 합니다(즉, 외부에서 직접 트리거하고 싶지 않습니다).

Object.defineProperty 는 예를 들어 window.location.search 에 의존하는 기능을 테스트하는 트릭을 수행하는 것 같습니다. 즉, window.location.search 를 변경하므로 다른 테스트가 영향을 받을 수 있습니다. Object.defineProperty window.location.search 에 대한 변경 사항을 "실행 취소"하는 방법이 있습니까? 마치 농담 모의 함수에 mockReset 기능이 있는 것과 같습니다.

@msholty-fd 이 접근 방식을 시도할 수 있습니다.

const origLocation = document.location.href;
let location = origLocation;

beforeAll(() => {
  const parser = document.createElement('a');
  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(prop => {
    Object.defineProperty(window.location, prop, {
      get: function() {
        parser.href = location;
        return parser[prop];
      }
    });
  });
});

afterEach(() => {
  location = origLocation;
});

test('location 1', () => {
  location = "https://www.google.com/";
  console.log(document.location.href); // https://www.google.com/
});

test('location 2', () => {
  console.log(document.location.href); // about:blank
});

Jest 22.0.1에서 작동이 중지되었습니다.

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

에러 메시지:

TypeError: Cannot redefine property: href
        at Function.defineProperty (<anonymous>)

흠, 어떻게든 사람들이 reconfigure 을 호출하도록 허용해야 할 수도 있습니다. https://github.com/tmpvar/jsdom/blob/05a6deb6b91b4e02c53ce240116146e59f7e14d7/README.md#reconfiguring -the-jsdom-with-reconfiguresettings

이 문제가 종료되었으므로 이와 관련된 새 문제를 열었습니다. #5124

@SimenB Jest가 이 문제를 해결해야 한다고 확신하지 않습니다. JSDOM은 window.location.assign() 가 의도한 대로 작동하도록 허용하고 window.location.href 등의 출력을 재구성해야 합니다.

jsdom에 기본 URL이 about:blank 로 기본 설정되어 있기 때문에 TypeError: Could not parse "/upgrades/userlogin?hardwareSku=sku1351000490stgvha" as a URL 를 얻었습니다.

jsdom <base href='your_base_url' /> jest URL을 할당하려고 시도 했지만 성공하지 못한 채 4시간을 보냈습니다. jest , 내가 아니므로 포기했습니다.

Object.defineProperty 솔루션은 jsdom jsdom 이전 버전에서만 작동합니다.
jsdom ver > 10을 사용하는 경우 @th3fallen 이 언급한 것처럼 올바른 솔루션입니다.
window.location.assign 를 사용하는 것이 올바른 방법입니다.

about:blank 이외의 다른 URL을 원하면 testURL 구성을 사용할 수 있습니다.

@SimenB님 답변 감사합니다.

아니요, 저는 url base url 에 대해 이야기하고 있었습니다. window.location.href="/login" 를 수행할 코드가 있고 jest 실행할 때 jsdom /login 가 유효한 URL이 아니라는 예외를 throw합니다.

TypeError: Could not parse "/login" as a URL

jsdom 의 소스 코드를 확인하고 이것이 기본 URL 설정이 없기 때문이라는 것을 깨달았습니다(기본 주소 없이 브라우저 URL 표시줄에 "/login"을 입력하는 것과 같습니다).

jsdom 를 사용하면 일반적으로 다음을 통해 기본 URL을 설정할 수 있습니다.

global.jsdom = new JSDOM('<html><head> <base href="base_url" /></head></html>')

하지만 jest 가 jsdom $ 를 설정했기 때문에 우리가 통제할 수 없습니다.
--- 업데이트: jsdom 를 종속성으로 명시적으로 추가하고 jsdom 수동으로 구성할 수 있다고 가정합니다.

그런 다음 window.location.href= 를 window.location.assign 로 대체하고 assign 기능을 모의하는 솔루션을 찾았습니다.

@bochen2014 이 문제에는 최신 버전의 jsdom을 사용하는 방법에 대한 자세한 정보가 있습니다. #5124

tl;dr: window.location.assign() 을 조롱하거나 jest-environment-jsdom-global 를 사용하여 비행 중에 jsdom을 재구성할 수 있습니다.

@simon360 감사합니다

그게 내가 한 일이야 ;-)
테스트에서 다른 초기 urls jsdom.reconfigure 를 사용했고, 테스트가 아닌 코드에서 url을 변경해야 할 때마다 window.location.assign 를 사용하여 조롱했습니다. 나를 위해 일한.

jsdom에 대한 URL을 설정하기 위해 동일한 문제가 발생할 수 있거나 발생할 수 있는 사람들을 위해

// jest.config.js
 module.exorts={ 
  testURL: 'http://localhost:3000',
  // or : 
  testEnvironmentOptions: {
     url: "http://localhost:3000/",
    referrer: "https://example.com/",
  }
}

이것은 모든 테스트에 대한 URL을 설정합니다.
특정 테스트에서 다른 URL을 원하면 jsdom.reconfigure api를 사용하십시오.
단위 테스트 코드(예: 프로덕션 코드) 외부에서 즉석에서 url을 변경해야 하는 경우 window.location.assign 를 사용하고 이를 조롱해야 합니다.

다른 티켓에 게시했지만 여기에 게시합니다.

Jest 21.2.1에 대한 좋은 솔루션을 찾았습니다.

좋아, 지금까지 이것에 대한 가장 쉬운 해결책은 다음과 같습니다.
Jest 설정으로 이동합니다(예: package.json 사용).

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

이제 창 개체에 액세스할 수 있으며 테스트 중에 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);
});

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

@petar-prog91 도움이 되었습니다. 하지만 오타가 있습니다. $# TestURL testURL 여야 합니다.

@BarthesSimpson 통지, 업데이트된 의견 감사합니다.

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

안녕,
나는 이것을 테스트에서 사용했고 전역 상태를 삭제하고 jsdom을 사용하여 새 상태를 만듭니다... :

   describe('componentDidMount', () => {
    delete global.window
    const window = (new JSDOM(``, {url: 'https://example.org/'})).window
    global.window = window
    describe('When window is defined', () => {
      const spy = jest.spyOn(Utils, 'extractTokenFromUrl')
      it('should call extract token function with window location', () => {
        mount(<Header />)
        expect(spy).toHaveBeenCalledWith('https://example.org/')
      })
    })
  })

@UserNT 확인 — TypeError: Cannot redefine property: href 를 제공합니다.

@annemarie35 가 작동하지 않습니다 — ReferenceError: JSDOM is not defined

이것이 누군가에게 도움이 될지 모르겠지만 이것이 제가 현재 하고 있는 일입니다.

const redirectTo = (url: string): void => {
  if (process.env.NODE_ENV === "test") {
    global.jsdom.reconfigure({ url: `${getBaseUrl()}${url}` });
  } else {
    window.location.replace(url);
  }
};

리디렉션 기능을 작성하고 대신 사용하십시오. 따라서 환경 테스트에서 jsdom.reconfigure url에 의존하여 url 부분을 변경합니다.

나는 이것을 이렇게 사용한다

export const clientFetchData = (
  history: Object,
  routes: Object,
  store: Object
) => {
  const callback = location =>
    match({ routes, location }, (error, redirectLocation, renderProps) => {
      if (error) {
        redirectTo("/500.html");
      } else if (redirectLocation) {
        redirectTo(redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        if (!isEmpty(window.prerenderData)) {
          // Delete initial data so that subsequent data fetches can occur
          window.prerenderData = undefined;
        } else {
          // Fetch mandatory data dependencies for 2nd route change onwards
          trigger(
            FETCH_DATA_HOOK,
            renderProps.components,
            getDefaultParams(store, renderProps)
          );
        }

        trigger(
          UPDATE_HEADER_HOOK,
          renderProps.components,
          getDefaultParams(store, renderProps)
        );
      } else {
        redirectTo("/404.html");
      }
    });

  history.listen(callback);
  callback(history.getCurrentLocation());
};

그 후 테스트에서 다음과 같이 될 수 있습니다.

    describe("# match route", () => {
      it("should navigate to error page", () => {
        fetchData.clientFetchData(history, components, store);
        reactRouter.match.mock.calls[0][1](true);
        expect(window.location.href).toEqual(`${SERVER_URL}/500.html`);
      });

      it("should redirect to /hello-world.html page", () => {
        fetchData.clientFetchData(history, components, store);
        reactRouter.match.mock.calls[0][1](undefined, {
          pathname: "/hello-world.html",
          search: ""
        });
        expect(window.location.href).toEqual(`${SERVER_URL}/hello-world.html`);
      });
...

나는 효과가 있는 이 일을 끝내었다.

global.window = new jsdom.JSDOM('', {
  url: 'http://www.test.com/test?foo=1&bar=2&fizz=3'
}).window;

JSDOM 설정 파일 상단에 다음이 있습니다.

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
  url: "http://test.com"
});
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
  Object.defineProperties(target, props);
}

global.document = window.document;
global.window = window;
global.navigator = {
  userAgent: 'node.js',
};

global.HTMLElement = window.HTMLElement;

Jest 구성에서 "testURL": " http://localhost/ "를 설정하여 수정했습니다(최신 버전을 사용 중입니다). 기본적으로 " about:blank "이고 JSDOM 오류를 발생시켰습니다("about:blank" URL을 다른 것으로 변경할 수 없음).

자원:
http://jestjs.io/docs/en/configuration#testurl -문자열
https://github.com/jsdom/jsdom/issues/1372

이 게시물이 매우 유용하다는 것을 알았습니다: https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking

"Jest 구성에서 다음을 설정해야 합니다.

"testURL": "https://www.somthing.com/test.html"

그런 다음 테스트를 위한 beforeEach() 섹션에서 다음을 사용하여 필요에 따라 경로를 변경합니다.
history.pushState().

window.history.pushState({}, 'Test Title', '/test.html?query=true');

짜잔! 이제 위에서 언급한 스레드에서 다른 사람들이 제안한 것처럼 jsdom 구성을 재정의할 필요 없이 모든 테스트에 대한 경로를 변경합니다. 어느 스레드에서 이 솔루션을 찾았는지 확실하지 않지만 게시한 개발자에게 감사를 표합니다!"

@Mike-Tran 당신은 락! 그것은 완전히 효과가 있었고 매우 간단했습니다. testURL 설정을 사용할 필요조차 없었습니다.

@Mike-Tran 작동합니다! 감사 해요! 그러나 testURL 또는 beforeEach 필요하지 않았습니다. 난 그냥했다:

window.history.pushState({}, 'Test Title', '/test.html?query=true');

그리고 이제 더 이상 Object.defineProperty 를 사용할 필요가 없습니다 😅

@jcmcneal 감사합니다! (농담 23.0.0)

목표가 window 개체를 조롱하는 것이라면 다음은 내 (그렇게 우아하지는 않지만 작동하는) 솔루션입니다.

인터페이스(인터페이스가 올바른 단어인지 확실하지 않지만 요점을 이해하기를 바랍니다) 클래스를 만듭니다.

// window.js
export const { location } = window;

실제 코드에서 window 를 인터페이스 메소드로 바꾸십시오(예: win ).

// myFile.js
import * as win from './window';

export function doSomethingThatRedirectsPage() {
  win.location.href = 'google.com';
}

그런 다음 농담 테스트에서 jsdom이 불평하지 않도록 조롱합니다. 다음과 같이 주장할 수도 있습니다.

// myFile.test.js
import * as myFile from './myFile';
import * as win from './window';

it('should redirect', () => {
  win.location = { href: 'original-url' };

  expect(win.location.href).toBe('original-url');

  myFile.doSomethingThatRedirectsPage();

  expect(win.location.href).toBe('google.com');
});

@Mike-Tran, @jcmcneal 감사합니다! 모든 것은 측면으로 작동합니다!

클래스 SSOtestComponent는 React.Component를 확장합니다. {

componentDidMount() {
    let isSuccess = this.props.location.pathname === '/sso/test/success' ? true : false

    window.opener.postMessage({ type: "sso_test", isSuccess,...this.props.location.query}, window.location.origin)
}

onSsoAuthenticate() {

}

componentWillUnmount() {
}

render() {
    return (<Loader />);
}

}

module.exports = SSOtestComponent;

나는 enjyme을 사용하여 단위 테스트 케이스를 작성하고 조건 window.location을 작성하는 방법을 농담합니다. ...pls는 답변을 제공합니다

이것은 나를 위해 일했습니다

    const location = JSON.stringify(window.location);
    delete window.location;

    Object.defineProperty(window, 'location', {
      value: JSON.parse(location)
    });

    Object.defineProperty(global.location, 'href', {
      value: 'http://localhost/newURL',
      configurable: true
    });

jest 버전 23.6.0에서

이것은 나를 위해 일했습니다.

delete global.window.location
global.window.location = { href: 'https://test-domain.com.br', ...anyOptions }

@FelipeBohnertPaetzold 감사합니다

@FelipeBohnertPaetzold 감사합니다. 내 코드에서 location.host 를 사용하고 있었기 때문에 전체 위치 개체가 필요했기 때문에 각 위치 속성을 수동으로 전달하는 것보다 다음이 더 효과적이었습니다.

delete global.window.location;
global.window.location = new URL("https://www.ediblecode.com/");

참고로 이것은 Node 6.13+( URL 클래스 문서 참조)에서 작동하며 저는 Jest 24를 사용하고 있었습니다.

또한 이것은 상대 URL에서는 작동하지 않습니다. https://url.spec.whatwg.org/#example -url-parsing을 참조하세요.

이 TypeScript 는 Jest 24.0.0 및 Node 10.15.0 에서 작동합니다.

src/setupTests.ts

import { mockWindow } from './testUtils';
mockWindow(window, 'http://localhost');

src/setupTests.test.ts

describe('setup tests', () => {

    describe('window.location', () => {
        const saveLocation = window.location;

        afterAll(() => {
            delete window.location;
            window.location = saveLocation;
        });

        it('location.assign assigns a location', () => {
            window.location.assign('http://foo.com');

            expect(window.location.href).toBe('http://foo.com/');

            (window.location.assign as jest.Mock<void, [string]>).mockClear();
        });

        it('location.replace replaces a location', () => {
            window.location.replace('http://bar.com');

            expect(window.location.href).toBe('http://bar.com/');

            (window.location.replace as jest.Mock<void, [string]>).mockClear();
        });

        it('location.reload is a spy', () => {
            window.location.reload();

            expect(window.location.reload).toHaveBeenCalledTimes(1);

            (window.location.reload as jest.Mock).mockClear();
        });
    });
});

src/testUtils.ts

interface MockedLocation extends Location {
    assign: jest.Mock<void, [string]>;
    reload: jest.Mock;
    replace: jest.Mock<void, [string]>;
}

interface MockedWindow extends Window {
    location: MockedLocation;
}

export function mockWindow(win: Window = window, href = win.location.href) {
    const locationMocks: Partial<MockedLocation> = {
        assign: jest.fn().mockImplementation(replaceLocation),
        reload: jest.fn(),
        replace: jest.fn().mockImplementation(replaceLocation),
    };

    return replaceLocation(href);

    function replaceLocation(url: string) {
        delete win.location;
        // tslint:disable-next-line:no-any
        win.location = Object.assign(new URL(url), locationMocks) as any;
        return win as MockedWindow;
    }
}

src/testUtils.test.ts

import { mockWindow } from './testUtils';

describe('test utils', () => {

    describe('mockWindow', () => {
        const saveLocation = window.location;

        afterAll(() => {
            delete window.location;
            window.location = saveLocation;
        });

        it('location.assign assigns a location', () => {
            const { assign } = mockWindow().location;
            assign('http://foo.com');

            expect(window.location.href).toBe('http://foo.com/');

            assign.mockClear();
        });

        it('location.replace replaces a location', () => {
            const { replace } = mockWindow().location;
            replace('http://bar.com');

            expect(window.location.href).toBe('http://bar.com/');

            replace.mockClear();
        });

        it('location.reload is a spy', () => {
            const { reload } = mockWindow().location;
            reload();

            expect(window.location.reload).toHaveBeenCalledTimes(1);

            reload.mockClear();
        });
    });
});

@jedmao

이봐, 친구) 좋은 유틸리티!

src/setupTests.test.ts 에 대한 테스트는 약간 중복되므로 src/testUtils.test.ts에서 mockWindow util을 이미 완전히 테스트했기 때문입니다. 따라서 src/setupTests.ts 에 대한 테스트에서는 올바른 인수를 사용하여 mockWindow 를 호출하는 것으로 충분합니다.

감사합니다)

@tzvipm @jup-iter 👍 감사합니다. 방금 @jedmao/storage 및 @jedmao/location 를 출시했는데 둘 다 Jest에 대해 완전히 불가지론적입니다. npm 패키지가 완전히 테스트되기 때문에 추가 테스트를 작성하지 않고도 적절한 메소드를 spyOn 할 수 있어야 합니다.

Vue를 사용할 때 이 오류가 발생하는 경우 $ this.$router.go({...}) this.$router.push({...}) 를 사용하세요.

1행에 아래 코드를 배치합니다.
delete global.window.location;
global.window.location = "";

window.location을 변경하는 클릭 이벤트를 캡처할 수 있습니다.

"농담": "^23.6.0"
v10.15.0
6.5.0

이것은 작동합니다:

delete window.location;
window.location = Object.assign({}, window.location);
const url = Object.assign({}, new URL('http://google.com'));
Object.keys(url).forEach(prop => (window.location[prop] = url[prop]));

아니면 더 나은 아직 ...

delete (global as any).window;
(global as any).window = new JSDOM(undefined, { url: 'http://google.com' }).window;

당신이 맞습니다. 이것은 실제로 jsdom 문제입니다. Facebook에서 이 문제를 해결하기 위해 수행한 작업은 다음과 같습니다.

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

이것은 우리에게 효과적이지만 내부적으로는 여전히 jsdom 7을 사용하고 있습니다.

Object.defineProperty 작업 방식이 괜찮다고 생각하므로 이 작업을 닫겠습니다. jsdom 8에서 작동하지 않는다면 기꺼이 다시 열겠습니다.

예, location.search 및 location.hash 을 처리하는 몇 가지 함수가 있으며 언급한 대로 defineProperty 로 테스트하고 싶습니다. 작동하지 않습니다!

jest Error: Not implemented: navigation (except hash changes) 를 찾았습니다.

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: navigation (except hash changes)
        at module.exports (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at navigateFetch (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)
        at exports.navigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:52:3)
        at LocationImpl._locationObjectNavigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:29:5)
        at LocationImpl.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:213:10)
        at Location.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/generated/Location.js:93:25)
        at Object.assign (/home/ghlandy/projects/wdph-utils/src/__tests__/url.test.js:6:14)
        at Object.asyncJestLifecycle (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>) undefined

이제 내 기능을 테스트하는 방법에 대해 전혀 모릅니다.

누구나 테스트를 변경할 수 있는 방법이 있습니다. url

당신이 맞습니다. 이것은 실제로 jsdom 문제입니다. Facebook에서 이 문제를 해결하기 위해 수행한 작업은 다음과 같습니다.

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

이것은 우리에게 효과적이지만 내부적으로는 여전히 jsdom 7을 사용하고 있습니다.
Object.defineProperty 작업 방식이 괜찮다고 생각하므로 이 작업을 닫겠습니다. jsdom 8에서 작동하지 않는다면 기꺼이 다시 열겠습니다.

예, location.search 및 location.hash 을 처리하는 몇 가지 함수가 있으며 언급한 대로 defineProperty 로 테스트하고 싶습니다. 작동하지 않습니다!

jest Error: Not implemented: navigation (except hash changes) 를 찾았습니다.

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: navigation (except hash changes)
        at module.exports (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at navigateFetch (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)
        at exports.navigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:52:3)
        at LocationImpl._locationObjectNavigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:29:5)
        at LocationImpl.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:213:10)
        at Location.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/generated/Location.js:93:25)
        at Object.assign (/home/ghlandy/projects/wdph-utils/src/__tests__/url.test.js:6:14)
        at Object.asyncJestLifecycle (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>) undefined

이제 내 기능을 테스트하는 방법에 대해 전혀 모릅니다.

누구나 테스트를 변경할 수 있는 방법이 있습니다. url

그리고 제 상황에서는 jest.config.js 파일의 testURL 필드가 작동할 수 있습니다. 그러나 각 테스트 전에 testURL을 변경하려면 어떻게 해야 할까요?

이 게시물이 매우 유용하다는 것을 알았습니다: https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking

"Jest 구성에서 다음을 설정해야 합니다.

"testURL": "https://www.somthing.com/test.html"

그런 다음 테스트를 위한 beforeEach() 섹션에서 다음을 사용하여 필요에 따라 경로를 변경합니다.
history.pushState().

window.history.pushState({}, 'Test Title', '/test.html?query=true');

짜잔! 이제 위에서 언급한 스레드에서 다른 사람들이 제안한 것처럼 jsdom 구성을 재정의할 필요 없이 모든 테스트에 대한 경로를 변경합니다. 어느 스레드에서 이 솔루션을 찾았는지 확실하지 않지만 게시한 개발자에게 감사를 표합니다!"

탁월한 솔루션!!! 매우 감사합니다! @마이크트란
나는 이와 같이 짧고 침습적이지 않은 솔루션을 원했습니다!

2019년 6월부터 이 작업을 수행하려면 다음을 수행해야 했습니다.

    delete global.window.location;
    global.window = Object.create(window);
    global.window.location = {
      port: '123',
      protocol: 'http:',
      hostname: 'localhost',
    };

나는 이것을 사용한다....

window.history.pushState({}, '', `${url}/`);

아마도 내 JSDOMTestWrapper의 일부가 누군가를 도울 수 있습니다.

    /** <strong i="6">@type</strong> {Window} */
    this.testWindowObject = Object.create(window);
    const wnd = this.testWindowObject;
    this.testWindowObject.history = {
      state: null,
      prev: { /** <strong i="7">@todo</strong> immutable stack with the go(step) method emulation */
        state: null,
        pathname: null,
        search: null,
      },
      go(step) {
        logger.special('history go called', step);
        logger.warn('history go has not supported yet');
      },
      back() {
        this.state = this.prev.state;
        wnd.location.pathname = this.prev.pathname;
        wnd.location.search = this.prev.search;
        const eventData = this.state ? { url: this.state.displayURL, newState: this.state, type: 'push' } : null;
        wnd.sm.eventsService.triggerEvent(ROUTER_EVENTS.ROUTE_PUSH, eventData);
        wnd.sm.urlService.simpleRouteTo(`${ wnd.location.pathname || '' }${ wnd.location.search || '' }`);
        logger.special('history back emulated');
      },
      pushState(state, title, url) {
        this.prev.state = Object.assign({}, this.state);
        this.prev.pathname = '' + wnd.location.pathname;
        this.prev.search = '' + wnd.location.search;
        this.state = state;
        if (title) wnd.document.title = title;
        const [p, s] = url.split('?');
        wnd.location.pathname = p;
        wnd.location.search = s ? `?${ s }` : '';
        logger.special('push state emulated', { state, title, url });
      },
      replaceState(state, title, url) {
        this.prev.state = Object.assign({}, this.state);
        this.prev.pathname = '' + wnd.location.pathname;
        this.prev.search = '' + wnd.location.search;
        this.state = state;
        if (title) wnd.document.title = title;
        const [p, s] = url.split('?');
        wnd.location.pathname = p;
        wnd.location.search = s ? `?${ s }` : '';
        logger.special('replace state emulated', { state, title, url });
        logger.special('test: urlService.getPathName()', wnd.sm.urlService.getPathName());
      },
    };
    this.testWindowObject.innerWidth = WND_WIDTH;
    this.testWindowObject.innerHeight = WND_HEIGHT;
    this.testWindowObject.fetch = fetchFn;
    this.testWindowObject.localStorage = lstMock;
    this.testWindowObject.scrollTo = (x, y) => {
      /** not implemented yet https://github.com/jsdom/jsdom/issues/1422 */
      if (typeof x !== 'number' && (x.left || x.top)) {
        y = x.top;
        x = x.left;
      }
      // logger.info(`window.scrollTo(${ x }, ${ y })`);
    };

    if (fetchFn === JSDOMTestWrapper.FETCH_FN.DEV_MOCK) {
      global.Request = RequestMock;
      this.testWindowObject.Request = RequestMock;
    }

    if (href) {
      this.testWindowObject.location = Object.assign({}, this.testWindowObject.location, urlapi.parse(href));
    }
    else {
      this.testWindowObject.location = Object.assign({}, this.testWindowObject.location);
    }

    (function(ELEMENT) {
      ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
      ELEMENT.closest = ELEMENT.closest || function closest(selector) {
          if (!this) return null;
          if (this.matches(selector)) return this;
          if (!this.parentElement) {return null}
          else return this.parentElement.closest(selector)
        };
      ELEMENT.getBoundingClientRect = ELEMENT.getBoundingClientRect || (() =>
        ({ bottom: WND_HEIGHT, height: WND_HEIGHT, left: 0, right: WND_WIDTH, top: 0, width: WND_WIDTH, x: 0, y: 0 }));
    }(Element.prototype));

    this.testWindowObject.getBoundingClientRect = () =>
      ({ bottom: WND_HEIGHT, height: WND_HEIGHT, left: 0, right: WND_WIDTH, top: 0, width: WND_WIDTH, x: 0, y: 0 });

    this.testWindowObject.__resizeListeners__ = [];
    this.testWindowObject.__resizeTriggers__ = {};
    this.testWindowObject._detectElementResize = {
      removeResizeListener: () => {},
    };

    this.testWindowObject.matchMedia = jest.fn().mockImplementation(query => {
      return {
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      };
    });

    this.rftpr = () => {};
    this.mode = mode;
    this.renderFirstTimePromise = new Promise((resolve) => {
      this.rftpr = resolve;
    });

    this.marpr = () => {};
    this.mobileAppReadyPromise = new Promise((resolve) => {
      this.marpr = resolve;
    });

    if (mode === JSDOMTestWrapper.MODE.MOBILE_APP) {
      this.testWindowObject.navigator = Object.assign({}, this.testWindowObject.navigator, {
        language: storeKey,
        appVersion: '5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Mobile Safari/537.36',
        userAgent: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Mobile Safari/537.36',
        vendor: 'Google Inc.',
      });

      global.intercom = {
        registerUnidentifiedUser: jest.fn(),
        registerForPush: jest.fn(),
      };
    }

    const XApp = mode ? MobileApp : App;
    const app = <XApp window={ this.testWindowObject } rftResolve={ this.rftpr } storeKey={ storeKey } apiHost={ apiVersion } forceMobileDetection={ mode } />;
    render(app, this.testWindowObject.document.body);

    if (mode === JSDOMTestWrapper.MODE.MOBILE_APP) {
      setTimeout(() => {
        this.testWindowObject.sm.deviceService.appRestorePathHasInit = this.marpr;
        this.testWindowObject.sm.deviceService.fireEvent(this.testWindowObject.document, 'deviceready');
      }, 200);
    }

이 접근 방식은 2019년 9월 27일부터 작동합니다. https://stackoverflow.com/a/54034379/1344144

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, "location", {
    value: {
       href: url
    },
    writable: true
});

다른 솔루션은 현재 jsdom 작성하지 않고 저에게 효과적입니다.

1. 값에 관계없이 jest.config.js testURL 를 설정했는지 확인하십시오.

// jest.config.js
'testURL': 'https://someurl.com'

테스트 파일에서:

window.history.pushState({}, 'Mocked page title', 'www.yoururl.com');

https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking에서 배웠습니다. 라이언에게 감사합니다!

나를 위해 작동하지 않습니다:

TypeError: 엄격 모드에서는 읽기 전용 속성에 할당할 수 없습니다.

it("should save hash when history is not found", () => {
    const historyBkp = global.window.history;

    delete global.window.history;
    global.window.history = false;

    externalLoader.savePageURL(urlTraining);

    expect(window.location.hash).to.be.equal(`#page=${urlTraining}`);

    global.window.history = historyBkp;
    window.location.hash = "";
});

나를 위해 작동하지 않습니다:

TypeError: 엄격 모드에서는 읽기 전용 속성에 할당할 수 없습니다.

it("should save hash when history is not found", () => {
  const historyBkp = global.window.history;

  delete global.window.history;
  global.window.history = false;

  externalLoader.savePageURL(urlTraining);

  expect(window.location.hash).to.be.equal(`#page=${urlTraining}`);

  global.window.history = historyBkp;
  window.location.hash = "";
});

이것을 전역 파일에 추가하십시오.

global.window.location 삭제;
전역.창.위치 = "";

이 접근 방식은 2019년 9월 27일부터 작동합니다. https://stackoverflow.com/a/54034379/1344144

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, "location", {
    value: {
       href: url
    },
    writable: true
});

location.assign을 사용하여 비슷한 것을 시도하고 있지만 더 이상 작동하지 않는 것 같습니다.

이것은 jest 24.9.0에서 나를 위해 작동합니다.

 window.history.replaceState({}, 'Test Title', '/test?userName=James&userNumber=007');

이것은 jest 24.9.0에서 나를 위해 작동합니다.

 window.history.replaceState({}, 'Test Title', '/test?userName=James&userNumber=007');

프라미스 내에서 코드를 실행하고 있었기 때문에 이 작업을 수행하려면 코드를 비동기식으로 만들어야 했습니다.

그래서 지금 일하고 있습니다 😃

vuex 작업에서 chenge 위치를 테스트하는 방법은 무엇입니까?

async setForm({ rootState, state, commit, dispatch }, formData) {
          ....
          switch (answ.result.type) {
            ....
            case 'redirect':
              console.log(answ.data.url);
              window.location = answ.data.url;
              console.log({ location: window.location.href });
              break;
            default:
              break;

it('setForm - success, redirect', async done => {
      expect(window.location.href).toBe('https://www.google.ru/');

오류가 있습니다.

    expect(received).toBe(expected) // Object.is equality

    Expected: "https://www.google.ru/"
    Received: "http://localhost/"

이것은 나를 위해 일했습니다

    const location = JSON.stringify(window.location);
    delete window.location;

    Object.defineProperty(window, 'location', {
      value: JSON.parse(location)
    });

    Object.defineProperty(global.location, 'href', {
      value: 'http://localhost/newURL',
      configurable: true
    });

jest 버전 23.6.0에서

글로벌이 뭐야?

전역 정의는 어디에 있습니까?

이것은 나를 위해 일했습니다.

delete global.window.location
global.window.location = { href: 'https://test-domain.com.br', ...anyOptions }

이것은 모든 원래 기능을 가진 위치를 생성하지만 조롱할 수 있습니다.

beforeAll(() => {
  const location = window.location
  delete global.window.location
  global.window.location = Object.assign({}, location)
})