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上下文传递给react组件？提前致谢

Answer 1

首先，要遵守Mantra规范，您应该像这样重写Footer组件：

public void setPersonId(String personId){
  this.personId = new Identity<Person>(personId);
}

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

import React from 'react';

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

export default footer;

要使页脚反复重新呈现为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); }) })更改，您需要创建一个Mantra container来包装它。要测试容器，您可以像这样模拟FlowRouter：

FlowRouter.current()

由于Mantra直接使用来自NPM的it('should do something', () => { const FlowRouter = { current: () => ({ route: { name: 'foo' } }) }; const container = footerContainer({ FlowRouter }, otherArguments); ... })包而不是mocha或类似的Meteor包来运行测试，所以你不能（据我所知）加载Meteor包，例如practicalmeteor:mocha你的考试。

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

1 个答案: