1

我正在测试一个有 5 个链接的反应组件。每个链接都根据当前路由变为活动状态。我正在使用带有 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 上下文传递给反应组件？提前致谢

4

1 回答 1

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 容器来包装它。要测试容器，您可以像这样模拟 FlowRouter：

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

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

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

于 2016-08-12T10:48:38.170 回答