如何从react-router-dom用Mocha测试`NavLink`

Question

我想测试一下我的NavLink是否具有特定的URL：

Splash.js

import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../shared/logo/index';
import * as styles from './style.css';

class Splash extends React.Component {
  render(){
    return (
      <div className={styles.indexAppContent}>
        <NavLink to="/home"  className={styles.index}>
          <Logo />
        </NavLink>
      </div>
    );
  }
}

export default Splash;

测试

/* eslint-disable object-property-newline */
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'
import { expect } from 'chai';
import { NavLink } from 'react-router-dom'
import { shallow } from 'enzyme';


describe('<Splash />', () => {

  it('Logo links to home', () => {
    expect(wrapperNavLink.prop('to'))
      .equals('/home');
  })

});

如何测试呈现的href的值以做出反应？

Answer 1

有两种方法可以测试传递道具是否正确到达组件。

1.隔离测试组件-

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import { NavLink } from 'react-router-dom';

describe("<NavLink  />", () => {
    it("1.contains correct passed prop", () => {
        const comp = (
            <NavLink to="/home"  className={"test"}>
                NaveLink Test
            </NavLink>
        );
        const wrapper = shallow( comp );
        expect(wrapper.instance().props.to).to.equal("/home");
    });
});

2.测试组件整体，例如您的组件<Splash /> 。

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import { NavLink } from 'react-router-dom';
import Splash from './splash'; // <----------- import the component you want to test

describe("<Splash  />", () => {
    it("2.contains correct passed prop", () => {
        const comp = (
            <Splash />
        );
        const wrapper = shallow( comp );

        expect(wrapper.find(NavLink).first().props().to).to.equal("/home");
    });
});