如何使用来自 react-router-dom 的 Mocha 测试“NavLink”

Question

我想测试一下我的NavLink是否有某个网址：

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