1

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);
    })
})

しかし、 を実行すると、テストで FlowRouter コンテキストを反応コンポーネントに渡すにnpm testはFlowRouter is not defined.どうすればよいですか? と表示されます。前もって感謝します

4

1 に答える 1

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);
  })
})

フッターを変更としてリアクティブに再レンダリングするには、それをラップするMantra コンテナーFlowRouter.current()を作成する必要があります。コンテナーをテストするには、次のように FlowRouter をモックできます。

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

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

MantraはMeteorパッケージまたは同様のパッケージmochaの代わりにNPMからパッケージを直接使用しpracticalmeteor:mochaてテストを実行するため、（私の知る限り）kadira:flow-routerテストのようにMeteorパッケージをロードすることはできません。

于 2016-08-12T10:48:38.170 に答える