Wie `NavLink` mit Mocha zu testen, von reagieren-Router-dom

Question

ich testen möchte, ist NavLink eine bestimmte URL hat:

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; 

-Test

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

}); 

Wie kann ich den Wert von gerenderten HREFs für die Reaktion testen?

Answer 1

Es gibt zwei Möglichkeiten, wie Sie testen können, ob Passstützen Ihre Komponente korrekt erreichen.

1.Test Komponente in Isolation -

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 Komponente als Ganzes beispiel Komponente <Splash /> in Ihrem Fall.

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