web-dev-qa-db-ja.com

Jestを使用してテストファイルのwindow.location.pathnameを取得するにはどうすればよいですか？

テスト用のjestと酵素を使用してcreate-react-appで作成された反応アプリがあります

では、テストファイル内でwindow.location.pathnameの値を取得するにはどうすればよいですか？

これは私のスペックです

import React from 'react';
import MovieDetailsBox from '../../src/components/movie_single/MovieDetailsBox';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { movie_details } from '../../src/data/movies_details'
import { empty_user } from '../../src/helper/sessionHelper';

jest.mock('react-router');

describe('Test <MovieDetailsBox /> Component', () => {

    let movie_details_props = {
        movie: {...movie_details}
    }

    let user_props = {

    }

    const context = { router: { isActive: (a, b) => true } }

    const wrapper = shallow(
        <MovieDetailsBox movie={movie_details_props}
                         user={user_props}
                         currentPath={'/movie/68'}/>, { context }
    )

    const movie_data_check = movie_details_props.movie;

    it('MovieDetailsBox call correct function on rating box', () => {
        wrapper.find('.hidden-xs .rate-movie-action-box button').simulate('click')

        if(!empty_user(user_props)){
            expect(window.location.pathname).to.equal('/login')
        } else {
            console.log('have user wow')
        }
    })
})

しかし、私はこれを私のコンソールのエラーとして受け取りました

AssertionError: expected 'blank' to equal '/login'

現在のURLパス名の代わりにwindow.location.pathnameが空白を返すようです。

それで、これをどのように修正できますか、またはsetupTests.jsファイル内で他に何かをセットアップする必要がありますか？

ありがとう！

reactjsjestjsenzymecreate-react-app
6
Varis Darasirikul

TestURLを構成ファイルに追加します。例（package.json）：

"jest": {
 ....
    "testURL": "http://test.com/login"
 ....
 }

デフォルトでは、jestはwindow.location.hrefを「about：blank」に設定します。 testURLを設定した後、jestはそれをテスト環境のURLとして使用し、location.hrefはその値を受け取ります。

あなたはそれについて読むことができます： https://facebook.github.io/jest/docs/en/configuration.html#testurl-string

7
Sergey Avanesyan

最終的に解決策を見つけました！

package.jsonのJest configセクションでベースURLを設定できます

"jest": {
 ....
    "testURL": "http://test.com/login"
 ....
 }

単体テストでは、次のようにしてwindow.location.pathnameを変更できます。

window.history.pushState({}, 'Page Title', '/any/url/you/like?with=params&enjoy=true');
4
Mustafa J

コンポーネントのロジックを取得できるかどうかはわかりませんが、window.locationではなく、react-routerのメソッドを使用することをお勧めします。ユーザーを特定のページにプッシュするには：

browserHistory.Push('/login');

結果として、テストは非常に簡単に記述できます。Sinon.jsのspy（）またはJestのspyを使用してください https://facebook.github.io/jest/docs/mock-functions.html

スパイの例：

it('should redirect user to pathname=/delegation if pathname=/play', () => {
    const spyBrowserHistory = spy();
    mobileDelegationRewireAPI.__Rewire__('browserHistory', {
        Push: spyBrowserHistory
    });
    const wrapper = shallow(<MobileDelegation {...location} />);
    wrapper.instance().componentDidMount();
    expect(spyBrowserHistory.calledOnce).to.be.true;
    expect(spyBrowserHistory.calledWith(`/delegation${location.search}`)).to.be.true;
});

したがって、アイデアは、場所を変更する必要があるメソッドが正しいパラメーターで呼び出されるかどうかをテストすることです。

0
Aksana Tolstoguzova

使用してみてください：expect(location.pathname).to.equal('/login')。

私のテストでは、locationはグローバル変数であり、window.locationであるかのように取得できます。フルパスが必要な場合は、location.hrefを試してください。

0
Hugo Nasciutti