測試反應括在withRouter（優選使用笑話/酶）成分

我有一個陣營部件被封裝高階元器件withRouter內如下：測試反應括在withRouter（優選使用笑話/酶）成分

module.exports = withRouter(ManageProfilePage);

我的航線如下：

<Route path="/" component={AdrApp}> 
    <IndexRoute component={Login}/> 
    <Route component={CheckLoginStatus}> 
     <Route path="manage-profiles/:profileId" component= 
     {ManageProfilesPage}/> 
    </Route> 
    <Route path="*" component={notFoundPage}/> 
</Route>

我需要的路由器生命週期方法一次使用，這就是爲什麼我需要withRouter：

class ManageProfilePage extends React.Component { 
    componentDidMount() { 
    this.props.router.setRouteLeaveHook(this.props.route,() => { 
     ... 
    }) 
    render(){ 
    ... 
    } 
}

我需要測試用玩笑/酶此組件，我寫了下面的測試案例：

describe('manage profile page test suite',() => { 


    it('snapshot test',() => { 

     const setRouteLeaveHook =jest.fn(); 

     let wrapper = shallow(
      <ManageProfilePage params={{id : 25, router: 
     setRouteLeaveHook}}/> 
     ); 
     expect(wrapper).toMatchSnapshot(); 
    }) 
    })

的問題是它不是一個渲染級深。我下面粘貼的快照：

exports[`manage drug term page test suites snapshot test 1`] = ` 
<ManageProfilePage 
    params={ 
    Object { 
     "id": 25, 
     "router": [Function], 
    } 
    } 
/> 
`;

有沒有什麼不同的方式使我能夠渲染ManageProfilePage ATLEAST 1級深，我可以寫我的測試案例？它無法渲染，因爲它被封閉在WithRouter中？我們如何測試這些類型的組件？

來源

2017-05-26 Amol Aggarwal

通常情況下，如果我們嘗試測試這些組件，我們將無法將它渲染爲包含在WithRouter中（WithRouter是一個組件的包裝，它提供了像直接使用匹配，路由和歷史記錄一樣的路由器支持在組件內）。 module.exports = withRouter（ManageProfilePage）;

爲了渲染這樣的組件，我們必須明確地告訴它使用WrappedComponent關鍵字來渲染包裝組件。例如：我們將使用下面的代碼快照測試：

describe('manage profile page test suite',() => { 


    it('snapshot test',() => { 

     const setRouteLeaveHook =jest.fn(); 

     let wrapper = shallow(
      <ManageProfilePage.WrappedComponent params={{id : 25, router: 
     setRouteLeaveHook}}/> 
     ); 
     expect(wrapper).toMatchSnapshot(); 
    }) 
    })

這將告訴酶做淺渲染（渲染淺只呈現特定的組件，並跳過子組件）包ManageProfilePage其包裹內WithRouter組件。

來源

2017-05-30 15:31:23

淺渲染將只渲染一個級別，這是它的規範的一部分。

你可以使用Mount來渲染整個樹，但是我不認爲你可以限制渲染的深度級別。在任何情況下，當使用高階組件時，我通常只是導出基本組件（在包裝它之前），這樣我就可以在沒有包裝的情況下執行所有測試，並且只需傳遞所需提供程序的模擬。

同樣的事情與Connect組件與REDX，你導出你的常規組件，並測試不同的道具上，而不是連接的一個。

還注意到一些with...包裝不公開內部實例（有些是做的，但有些不是），所以在你自己的組件上而不是在包裝上測試也可以幫助你。

來源

2017-05-26 16:07:30 Patrick

問題是淺渲染未呈現，甚至沒有1級深在我的情況 –

我覺得是，你不知道這是怎麼回事在withRouter究竟裏面 - 這是'被渲染IS'，它只是沒有想到你我還是建議你測試自己的組件，而不是包裝 – Patrick

我的意思是不是在組件級渲染 - 當然它會在withRouter水平呈現什麼。 –

我所做的這解決了這一問題：

在「this.props.match.params。ID」使用後組件

在測試用例

 
const miniProps = { 
    otherProps, 
    match:{params:{id:'112'}} 
}; 

const wrapper = shallow();

來源

2017-09-06 07:47:15 Frank

測試反應括在withRouter（優選使用笑話/酶）成分

回答

相關問題