31

私はかなり単純な反応コンポーネントを持っています(ルートがアクティブな場合に「アクティブ」クラスを追加するリンクラッパー):

import React, { PropTypes } from 'react';
import { Link } from 'react-router';

const NavLink = (props, context) => {
  const isActive = context.router.isActive(props.to, true);
  const activeClass = isActive ? 'active' : '';

  return (
    <li className={activeClass}>
      <Link {...props}>{props.children}</Link>
    </li>
  );
}

NavLink.contextTypes = {
  router: PropTypes.object,
};

NavLink.propTypes = {
  children: PropTypes.node,
  to: PropTypes.string,
};

export default NavLink;

どのようにテストすればよいですか？私の唯一の試みは：

import NavLink from '../index';

import expect from 'expect';
import { mount } from 'enzyme';
import React from 'react';

describe('<NavLink />', () => {
  it('should add active class', () => {
    const renderedComponent = mount(<NavLink to="/home" />, { router: { pathname: '/home' } });
    expect(renderedComponent.hasClass('active')).toEqual(true);
  });
});

動作せず、戻りますTypeError: Cannot read property 'isActive' of undefined。確かにルーターのモックが必要ですが、書き方がわかりません。

4

4 に答える 4

24

@Elon Szopos さん、回答ありがとうございます。

import NavLink from '../index';

import expect from 'expect';
import { shallow } from 'enzyme';
import React from 'react';

describe('<NavLink />', () => {
  it('should add active class', () => {
    const context = { router: { isActive: (a, b) => true } };
    const renderedComponent = shallow(<NavLink to="/home" />, { context });
    expect(renderedComponent.hasClass('active')).toEqual(true);
  });
});

評価しないように変更mountする必要があるため、 react-router に関連するエラーが発生します。shallowLinkTypeError: router.createHref is not a function

単なるオブジェクトよりも「本物の」react-routerが欲しいのですが、作成方法がわかりません。

于 2016-06-30T11:59:13.083 に答える
21

反応ルーター v4 の場合は、<MemoryRouter>. AVA と酵素の例:

import React from 'react';
import PropTypes from 'prop-types';
import test from 'ava';
import { mount } from 'enzyme';
import sinon from 'sinon';
import { MemoryRouter as Router } from 'react-router-dom';

const mountWithRouter = node => mount(<Router>{node}</Router>);

test('submits form directly', t => {
  const onSubmit = sinon.spy();
  const wrapper = mountWithRouter(<LogInForm onSubmit={onSubmit} />);
  const form = wrapper.find('form');
  form.simulate('submit');

  t.true(onSubmit.calledOnce);
});
于 2017-04-13T20:34:32.123 に答える
4

その正確な目的のためにhttps://github.com/pshrmn/react-router-test-contextを使用できます

「React Router の context.router 構造を複製する疑似コンテキスト オブジェクトを作成します。これは、Enzyme を使用した浅い単体テストに役立ちます。」

インストール後、次のようなことができるようになります

describe('my test', () => {
  it('renders', () => {
    const context = createRouterContext()
    const wrapper = shallow(<MyComponent />, { context })
  })
})
于 2017-04-04T21:49:17.577 に答える