Jest Trueを期待するときにFalseを返す

Question

JestとEnzymeを使用してReactでコンポーネントをテストしようとしています。

NavigationコンポーネントがNavItemをレンダリングしていることを確認したいと思います。

試験：

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' }; 

ナビゲーションコンポーネント：

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コンポーネント：

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; 

次のようにテストランナーから出力される。

FAIL __tests__/Navigation.test.jsx 
    ● Console 

    console.log __tests__/Navigation.test.jsx:10 
     <ul> 
     <li> 
      <NavItem id={0} href="/" text="Home" activeClass="" /> 
     </li> 
     <li> 
      <NavItem id={1} href="/page-two" text="Page Two" activeClass="" /> 
     </li> 
     </ul> 

    ● .Navigation Component › should contain NavItem 

    expect(received).toEqual(expected) 

    Expected value to equal: 
     true 
    Received: 
     false 

コンポーネントを出力するためにコンソールログステートメントを追加しましたが、結果に表示されますが、有効なテストではありません。

私は非常に反応しやすいので、おそらく非常にn00bの間違いです。

ご協力いただければ幸いです。

Answer 1

NavigationコンポーネントをトラバースしてNavItemを探してみてください。

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