如何在测试 React 组件时传递 FlowRouter 上下文

Question

我正在测试一个有 5 个链接的反应组件。每个链接都根据当前路由激活。我正在使用 Meteor 和 Mantra 和酶来测试这些组件。

页脚组件：

import React from 'react';

class Footer extends React.Component{

    render(){
       let route = FlowRouter.current().route.name;

       return(
          <a className={route == 'hub page' ? 'some-class active' : 'some-class'}> . . . (x5)
       )
    }

}

测试

describe {shallow} from 'enzyme';
import Footer from '../core/components/footer';

describe('footer',() => {
    it('should have 5 links', () => {
       const fooWrapper = shallow(<Footer/>);
       expect(fooWrapper.find('a')).to.have.length(5);
    })
})

但是当我运行npm test 时，它说FlowRouter is not defined. 如何在测试中将FlowRouter 上下文传递给反应组件？提前致谢

Answer 1

首先，为了符合 Mantra 规范，您应该像这样重写您的页脚组件：

import React from 'react';

const Footer = ({ route }) => (
  <a className={
    route == 'hub page' ? 'some-class active' : 'some-class'
  }> ... (x5)
);

export default footer;

现在要测试您的页脚，您现在根本不需要 FlowRouter：

import { shallow } from 'enzyme';
import Footer from '../core/components/footer';

describe('footer', () => {
  it('should have 5 links', () => {
    const fooWrapper = shallow(<Footer route={'foo'}/>);
    expect(fooWrapper.find('a')).to.have.length(5);
  })
})

要使页脚在FlowRouter.current() 更改时响应式重新呈现，您需要创建一个Mantra container 来将其包裹起来。要测试容器，您可以像这样模拟FlowRouter：

it('should do something', () => {
  const FlowRouter = { current: () => ({ route: { name: 'foo' } }) };

  const container = footerContainer({ FlowRouter }, otherArguments);
  ...
})

由于 Mantra 直接从 NPM 使用 mocha 包而不是 practicalmeteor:mocha 或类似的 Meteor 包来运行测试，因此（据我所知）您不能在测试中加载诸如 kadira:flow-router 之类的 Meteor 包。