Jest Returning False bei Erwartung True

Question

Ich versuche eine Komponente in React mit Jest und Enzyme zu testen.

Ich möchte, dass meine Navigationskomponente NavItems ausgibt.

Test:

import React from 'react'; 
import { shallow } from 'enzyme'; 

import Navigation from '../src/components/navigation/Navigation'; 
import NavItem from '../src/components/navigation/NavItem'; 

describe('.Navigation Component',() => { 
    it('should contain NavItem',() => { 
    const wrapper = shallow(<Navigation />); 
    console.log(wrapper.debug()); 
    expect(wrapper.contains(<NavItem {...mockNavitem} />)).toEqual(true); 
    }); 
}); 

const mockNavitem = { href: 'foo', text: 'bar', activeClass: 'boo' }; 

Navigation Komponente:

import React from 'react'; 
import NavItem from './NavItem'; 

const navItems = [ 
    { 
    id: 0, 
    href: '/', 
    text: 'Home', 
    activeClass: '', 
    }, 
    { 
    id: 1, 
    href: '/page-two', 
    text: 'Page Two', 
    activeClass: '', 
    }, 
]; 

const Navigation =() => (
    <ul> 
    {navItems.map(item => (
     <li key={item.id}> 
     <NavItem {...item} /> 
     </li> 
    ))} 
    </ul> 
); 

export default Navigation; 

NavItems Komponente:

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { NavLink } from 'react-router-dom'; 

const NavItem = ({ href, text, activeClass }) => (
    <NavLink to={href} activeClassName={activeClass}> 
    {text} 
    </NavLink> 
); 

NavItem.propTypes = { 
    href: PropTypes.string.isRequired, 
    text: PropTypes.string.isRequired, 
    activeClass: PropTypes.string.isRequired, 
}; 

export default NavItem; 

Der Ausgang aus dem Testläufer ist wie folgt:

Ich habe eine Konsolenprotokollanweisung hinzugefügt, um die Komponente auszugeben, ich kann es in den Ergebnissen sehen, aber es scheint kein gültiger Test zu sein.

Ich bin sehr neu zu reagieren/scherzen, also mache ich wahrscheinlich einen sehr n00b Fehler.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Versuchen Sie, die Navigation Komponente zu durchlaufen, um NavItem zu finden.

expect(wrapper.find(NavItem)).toHaveLength(1);