酶安裝API問題：類型錯誤：無法讀取的不確定

Question

我想測試我的組件屬性「發現」，但我總是收到此錯誤： 類型錯誤：未定義

我的測試不能讀取屬性「發現」在將我的組件轉變爲無狀態組件之前工作正常。根據我的理解，您也可以測試功能無狀態組件。我沒有看到我在這裏做錯了什麼。

我的測試文件

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