Jest: window.location.hrefはテストでは変更できません。

あなたは正しいです、これは確かにjsdomの問題です。 Facebookでは、これを回避するためにこれを使用しています。

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

これは私たちにとってはうまくいきますが、私たちはまだ内部的にjsdom7を使用しています。

Object.definePropertyのやり方で問題ないと思うので、これを閉じます。 jsdom 8でそれがうまくいかない場合は、再開させていただきます。

かっこいい、ありがとうこれを試してみます。

@cpojer 、この問題を再開するために何をクリックする必要があるのか​​理解できないようです...

https://github.com/tmpvar/jsdom#changing -the-url-of-an-existing-jsdom-で説明されているように、 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に感謝します。 カッコいい！

ところで@cpojer私は5月1日にFBで開始します....; P

良い！

テストをMocha + Chai + Sinon.jsからJestに移行しようとしていますが、特定のテストの場所を変更する方法がわかりません。
Jest 19.xは、 Object.definePropertyトリックを使用して場所を変更できないJSDom9.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-daltonhttps：//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
});

Jest22.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

@SimenBJestがこれを修正する必要があるとは確信していません。 JSDOMは、 window.location.assign()が意図したとおりに機能し、 window.location.hrefなどの出力を再構成できるようにする必要があります。

jsdomのベースURLのデフォルトはabout:blank $であるため、 TypeError: Could not parse "/upgrades/userlogin?hardwareSku=sku1351000490stgvha" as a URLを取得しました

ベースURLをjsdomに割り当てようとしましたが、成功せずに4時間費やしました（方法はわかっています。 <base href='your_base_url' />をdomに挿入するだけですが、domは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ではないことを示す例外をスローします

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

それは私がしたことです;-)
私はjsdom.reconfigureを使用して、テストで別の初期urlsを設定しました。コードで（テストではなく）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を使用してモックする必要があります。

他のチケットに投稿しましたが、ここに投稿します：

Jest21.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通知、更新されたコメントに感謝します。

これを投稿するのをやめてください、それはjestでは機能しません "：" ^ 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);
  }
};

リダイレクト関数を作成し、代わりにそれを使用します。 したがって、envのテストでは、jsdom.reconfigureurlに依存して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 configで「testURL」：「 http：// localhost / 」を設定して修正しました（最新バージョンを使用しています）。 デフォルトでは「 about：blank 」であり、JSDOMエラーが発生していました（「about：blank」のURLを別のものに変更することはできません）。

資力：
http://jestjs.io/docs/en/configuration#testurl -string
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 You rock！ それは完全に機能したので、とても簡単です。 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';
}

次に、jestテストでは、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とjestを使用してユニットテストケースを作成しています。条件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/");

これはノード6.13以降で機能し（ URLクラスのドキュメントを参照）、Jest24を使用していたことに注意してください。

また、これは相対URLでは機能しないことに注意してください。https： //url.spec.whatwg.org/#example-url-parsingを参照してください。

このTypeScriptは、 Jest24.0.0とNode10.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

ねえ、男）素晴らしいutil！

私の場合、 src/setupTests.test.tsで少し冗長にテストします。これは、src /testUtils.test.tsでmockWindow utilをすでに完全にテストしているためです。 したがって、 src/setupTests.tsのテストでは、正しい引数を使用してmockWindowを呼び出すだけで十分です。

ありがとう）

@ tzvipm @jup-👍に感謝します。 @jedmao/storageと@jedmao/locationをリリースしましたが、どちらもJestに完全に依存していません。 npmパッケージは完全にテストされているため、追加のテストを記述しなくても、適切なメソッドをspyOn実行できるはずです。

Vueの使用中にこのエラーが発生した場合は、 this.$router.go({...}) this.$router.push({...})を使用してください

以下のコードを1行目に配置します。
delete global.window.location;
global.window.location = "";

window.locationを変更しているクリックイベントをキャプチャできるようになりました。

"jest"： "^ 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'
});

これは私たちにとってはうまくいきますが、私たちはまだ内部的にjsdom7を使用しています。

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'
});

これは私たちにとってはうまくいきますが、私たちはまだ内部的にjsdom7を使用しています。
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構成をオーバーライドすることなく、テストのパスを変更できます。 このソリューションをどのスレッドで見つけたかはわかりませんが、それを投稿した開発者に感謝します！」

優れたソリューション!!! どうもありがとうございました！ @ Mike-Tran
私はこのような短くて侵襲的でない解決策が欲しかったのです！

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を削除します。
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を使用して同様のことを試みていますが、これはもう機能していないようです。

これはjest24.9.0で私のために働きます

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

これはjest24.9.0で私のために働きます

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

これを機能させるには、promise内でコードを実行していたため、コードを非同期にする必要がありました。

だから今働いています😃

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)
})