如何使用来自 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.Test 孤立的组件 -

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.Test 组件作为一个整体，例如您的组件 <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");
    });
});

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

How to test `NavLink` with Mocha from react-router-dom

javascript

testing

mocha.js

reactjs

enzyme