Tests de tests d'intégration enzymatique avec routeur de réaction - Mise à jour des composants de test avec des liens

Question

Je voudrais tester que le fait de cliquer sur un lien met à jour les composants dans mon application.

Voici mon application, lorsque vous cliquez sur ce sujet rend le propos composant

import React, { Component } from 'react'; 
import './App.css'; 
import { 
    MemoryRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 


const Home =() => <h1>home</h1> 
const About =() => <h1>about</h1> 

class App extends Component { 
    render() { 
    return (
     <Router> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/">Home</Link></li> 
     </ul> 
     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     </Router> 
    ); 
    } 
} 

export default App; 

Et voici mon test:

import React from 'react'; 
import Adapter from 'enzyme-adapter-react-16'; 
import Enzyme from 'enzyme'; 
import { mount } from "enzyme"; 
import { MemoryRouter} from 'react-router-dom' 
import App from './App'; 

Enzyme.configure({ adapter: new Adapter() }); 


// this test passes as expected 
it('renders intitial heading as home',() => { 
    const wrapper = mount(
    <App /> 
); 

    const pageHeading = wrapper.find("h1").first().text() 
    expect(pageHeading).toEqual('home'); 
}); 

it('renders about heading when we navigate to about',() => { 
    const wrapper = mount(
    <App /> 
); 

    const link = wrapper.find("Link").first(); 
    link.simulate('click'); 

    const pageHeading = wrapper.find("h1").first().text() 
    expect(pageHeading).toEqual('about'); 
}); 

Le second test échoue:

FAIL src/App.test.js 
    ● renders about heading when we navigate to about 

    expect(received).toEqual(expected) 

    Expected value to equal: 
     "about" 
    Received: 
     "home" 

I utiliser le routeur de réaction v4, réagir 16 et l'enzyme 3.1

Est-il possible de tester de cette manière en utilisant React Router et l'enzyme?

Answer 1

Le numéro render function de Link vérifiera event.button === 0. C'est pourquoi la vérification échoue avec l'enzyme si vous appelez simulate sans paramètres appropriés.

Essayez link.simulate('click', { button: 0 });

Bonne chance.