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

Question

我正在测试一个包含 5 link 的反应组件。每个 link 都根据当前路线变为活动状态。我正在使用带有 Mantra 和酶的 Meteor 来测试这些组件。

页脚组件：

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 规范，您应该像这样重写您的 Footer 组件：

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 包来运行测试，你不能（据我所知）加载 Meteor 包，例如kadira:flow-router 在你的测试中。

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

How to pass FlowRouter context in testing React components

meteor

reactjs

flow-router

enzyme

mantrajs