this.props.location.query最终在我的组件中未定义

Question

在我的单元测试（jest）中偶尔会出现这个问题。以下输出是this.props.location的样子：

this.props.location: Object {
  pathname: '/logs',
  search: '?hello=kitty',
  hash: '',
  state: null,
  action: 'POP',
  key: 'zn54se',
  query: undefined } <<< NOTE that i's undefined <<<<<

我不确定是什么造成的。以下是组件的设置方式：

// Logs.jsx:
...
renderToolbar() {
  var generateClassName = (destObj) =>
  {
    console.log("this.props.location:", this.props.location);
  }
  ...

  return <Button to="/logs" className={generateClassName({kind: 'all'})}>All</Button>;
}

render() {
  return <Grid toolbar={this.renderToolbar} />;
}

// Grid.jsx:
...
renderToolbar() {
  return this.props.toolbar ? this.props.toolbar() : '';
},

render() {
  return <div> { this.renderToolbar(); } </div>;
}

这是路线设置（在我的测试中）：

describe('Logs', function() {
  var ts = (new Date()).valueOf();
  var node;
  beforeEach(function(){

    jest.setMock('myapp/lib/api/request', {});
    node = document.createElement('div');
    path = "/logs?hello=kitty";
    history = createHistory(path);
    routes = <Router history={history}><Route path="/logs" component={Logs} /></Router>;
  });

  it('should render one log entry', function() {
    LogStore.getLogs = jest.genMockFunction().mockReturnValue(
      [ {key: 0, kind: 'transfer', timestamp: ts, conn1name: 'Connector', conn2name: 'Connector2'} ]
    );

    var handler = ReactDOM.render(routes, node);

    expect(TestUtils.scryRenderedDOMComponentsWithClass(handler, 'log-entry').length).toBe(1);
  });
});

Answer 1

事实证明，jest正在嘲笑qs模块，这是react-router用于生成查询对象的依赖。这就是它最终未定义的原因。

要修复它，我将/qs添加到jest中的package.json设置中：

"jest": {
    "unmockedModulePathPatterns": [
        "/qs",
        ...
    ]
 }

Answer 2

以下是我在单元测试中的结果

<Router basename="">
        <Switch>
          <Route history={history} path="/">
            <MyApp/>
          </Route>
        </Switch> 
</Router>

历史定义如下

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory({
  basename: '/'
});