Javascript 如何使用react路由器dom中的Mocha测试“NavLink”

我想测试一下我的

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;

从“React”导入React；
从“react router dom”导入{NavLink}
从“../shared/Logo/index”导入徽标；
从“./style.css”导入*作为样式；
类Splash扩展了React.Component{
render（）{
返回(
);
}
}
导出默认飞溅；

测试

/* 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');
  })

});

/*eslint禁用对象属性换行符*/
从“React”导入React；
从“react dom/test utils”导入ReactTestUtils
从“chai”导入{expect}；
从“react router dom”导入{NavLink}
从“酶”导入{shall}；
描述（“”，（）=>{
它（'Logo链接到主页'，（）=>{
expect（wrapperNavLink.prop（'to'））
.等于（'/home'）；
})
});

---

如何测试react的渲染href值？

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

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

从“React”导入React；
从“chai”导入{expect}；
从“酶”导入{shall，mount，render}；
从'react router dom'导入{NavLink}；
描述（“，（）=>{
它（“1.包含正确的传递道具”，（）=>{
常数comp=(
导航试验
);
常数包装=浅（comp）；
expect（wrapper.instance（）.props.to）.to.equal（“/home”）；
});
});

2.将组件作为一个整体进行测试，例如组件

。

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”导入React；
从“chai”导入{expect}；
从“酶”导入{shall，mount，render}；
从'react router dom'导入{NavLink}；
从“/Splash”导入飞溅；//{
它（“2.0包含正确的传递道具”，（）=>{
常数comp=(
);
常数包装=浅（comp）；
expect（wrapper.find（NavLink.first（）.props（）.to）.to.equal（“/home”）；
});
});

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

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

从“React”导入React；
从“chai”导入{expect}；
从“酶”导入{shall，mount，render}；
从'react router dom'导入{NavLink}；
描述（“，（）=>{
它（“1.包含正确的传递道具”，（）=>{
常数comp=(
导航试验
);
常数包装=浅（comp）；
expect（wrapper.instance（）.props.to）.to.equal（“/home”）；
});
});

2.将组件作为一个整体进行测试，例如组件

。

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”导入React；
从“chai”导入{expect}；
从“酶”导入{shall，mount，render}；
从'react router dom'导入{NavLink}；
从“/Splash”导入飞溅；//{
它（“2.0包含正确的传递道具”，（）=>{
常数comp=(
);
常数包装=浅（comp）；
expect（wrapper.find（NavLink.first（）.props（）.to）.to.equal（“/home”）；
});
});

谢谢你，伙计，我花了一段时间才回到这里：）很有趣

wrapper.find（NavLink）.first（）.props（）.to

因此您可以通过传递实际的

组件来使用find。有没有我遗漏的关于这件事的明确文件？@JamieHutber，欢迎光临。我想你可以看看airbnb的酶文档，谢谢，伙计，我花了一段时间才回到这里：）很有趣
wrapper.find（NavLink）.first（）.props（）.to
因此您可以通过传递实际的
组件来使用find。有没有我遗漏的关于这件事的明确文件？@JamieHutber，欢迎光临。我想你可以看看airbnb的文件，