如何使用 Jest 在我的测试文件中获取 window.location.pathname？

Posted 2023-03-08

【中文标题】如何使用 Jest 在我的测试文件中获取 window.location.pathname？

【英文标题】：How can i get window.location.pathname on my test file using Jest?

【发布时间】：2017-09-19 23:35:15

【问题描述】：

我的 react 应用是由 create-react-app 使用 jest 和酶进行测试制作的

那么我怎样才能在我的测试文件中获取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'

似乎window.location.pathname 返回空白而不是当前的 url 路径名。

那么我该如何解决这个问题，或者我需要在 setupTests.js 文件中设置什么？

谢谢！

【问题讨论】：

你能分享一下 MovieDetailsBox 的代码吗？

它只是来自class MovieDetailsBox extends Component的普通反应组件

【参考方案1】：

我不确定我是否了解您的组件的逻辑，但我建议使用 react-router 的方法，而不是 window.location。 将用户推送到特定页面使用：

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

因此，我们的想法是测试是否使用正确的参数调用了必须更改位置的方法。

【参考方案2】：

尝试使用：expect(location.pathname).to.equal('/login')。

在我的测试中，location 是一个全局变量，您可以将其视为window.location，如果您需要完整路径，请尝试：location.href。

【参考方案3】：

将 testURL 添加到您的配置文件中。 例如（package.json）：

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

默认情况下，将 window.location.href 设置为“about:blank”。设置 testURL 后，将其用作测试环境 url，location.href 接收该值。

您可以阅读： https://facebook.github.io/jest/docs/en/configuration.html#testurl-string

【讨论】：

我已经尝试了几乎所有我能找到的和我能想到的其他方法，而且它是如此简单......我猜是 RTFM。

全局设置这个不太理想。

【参考方案4】：

终于找到解决办法了！

因此您可以在 package.json 的 Jest 配置部分中设置基本 URL

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

对于单元测试，您可以通过以下方式更改 window.location.pathname：

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