酵素は、APIの問題をマウント：TypeError例外：プロパティを読み取ることができません「検索」未定義

Question

の私は私のコンポーネントをテストしようとしていますが、私はこのエラーを得続ける： はTypeError：プロパティを読み取ることができません「検索」未定義

のが私のテスト私のコンポーネントをステートレスコンポーネントに変換する前に正常に動作していました。私の理解から、機能的なステートレスコンポーネントもテストできます。ここで間違っていることは私には分かりません。

私のテストファイル

import * as React from 'react'; 
import { LeftNavigation } from "../src/components/LeftNavigation"; 
import { mount } from 'enzyme'; 

describe("<LeftNavigation />",() => { 
    const wrapper; 

    beforeEach(() => { 
     wrapper = mount(
      <LeftNavigation title="Protocol Vantage Points" path="/hello"/> 
     ); 
    }); 

    it("renders the title",() => { 
     expect(wrapper.find(".uk-h3 span").text()).toBe("Protocol Vantage Points"); 
    }); 

    it("renders first menu item 'On demand tests'",() => { 
     expect(wrapper.find("#synth-left-nav .uk-nav li a").at(0).text()).toBe("On demand tests"); 
    }); 

    it("renders second menu item 'Feel status'",() => { 
     expect(wrapper.find("#synth-left-nav .uk-nav li a").at(1).text()).toBe("Fleet status"); 
    }); 
}); 

マイコンポーネント

import * as React from "react"; 
import { NavLink, Link } from 'react-router-dom'; 

export interface LeftNavigationProps { 
    title: string; 
    path: string; 
} 

export class LeftNavigationItem { 
    title: string; 
    path: string; 

    constructor(title: string, path: string) { 
     this.title = title; 
     this.path = path; 
    } 
} 

export const LeftNavigation: React.StatelessComponent<LeftNavigationProps> = (props: LeftNavigationProps) => { 

    const items: Array<LeftNavigationItem> = [ 
     new LeftNavigationItem('On demand tests', '/ondemandtests'), 
     new LeftNavigationItem('Fleet status', '/fleetstatus') 
    ]; 

    return (
     <div id="synth-left-nav" className="uk-margin-bottom"> 
      <h1 className="uk-h3"> 
       <span><Link id="synth-left-nav-title" to={props.path}>{props.title}</Link></span> 
      </h1> 
      <hr className="uk-width-1-1" /> 
      <ul className="uk-nav uk-margin-remove"> { 
       items.map(function (m, index) { 
        return (
         <li key={m.path}> 
          <NavLink activeClassName="uk-text-bold uk-active" 
             to={props.path + m.path} replace>{m.title}</NavLink> 
         </li> 
        ); 
       }) 
      } 
      </ul> 
     </div> 
    ); 
}; 

Answer 1

私はこの問題を考え出しました。 <Link>または<Route>をレンダリングするコンポーネントをテストすると、コンテキストに関するエラーと警告が発生する可能性があります。テストを<StaticRouter>または<MemoryRouter>にラップすることをお勧めします。参考のためにこれをチェックしてください：ここでhttps://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/testing.md

は私のソリューションです：

import * as React from 'react'; 
import { LeftNavigation } from "../src/components/LeftNavigation"; 
import { mount } from 'enzyme'; 
import { MemoryRouter } from 'react-router-dom' 

describe("<LeftNavigation />",() => { 
    const wrapper; 
    // Testing components that renders a <Link> or a <Route>, may cause 
    // errors and warnings about context. It is recommended to wrap your 
    // tests in a <StaticRouter> or <MemoryRouter> 

    beforeEach(() => { 
     wrapper = mount(
      <MemoryRouter><LeftNavigation title="Protocol Vantage Points" path="/hello"/></MemoryRouter> 
     ); 
    }); 

    it("renders the title",() => { 
     expect(wrapper.find(".uk-h3 span").text()).toBe("Protocol Vantage Points"); 
    }); 

    it("renders first menu item 'On demand tests'",() => { 
     expect(wrapper.find("#synth-left-nav .uk-nav li a").at(0).text()).toEqual("On demand tests"); 
    }); 

    it("renders second menu item 'Feel status'",() => { 
     expect(wrapper.find("#synth-left-nav .uk-nav li a").at(1).text()).toBe("Fleet status"); 
    }); 
});