如何使用酶測試反應路由器鏈接？

我看到很多類似的問題，但都顯得過時或令人難以置信地令人費解。如何使用酶測試反應路由器鏈接？

我有一個陣營成分含有陣營路由器Link組件，就像這樣：

export default class Home extends Component {          
    render() {                  
    return (                  
     <div className="Home"> 
     <Link to="/mission">Begin</Link>           
     </div>            
    );                    
    }                     
}

然後，我想很簡單，就是Home組件包含具有to=/mission屬性Link組件測試，使用Jest。所以，按照Testing React Router docs，我試過的測試許多變化，但是這個代碼最簡潔地說明了什麼，我想實現（例如爲了簡潔使用jest-enzyme）：

it('includes link to Mission scene',() => {          
    const home = shallow(<MemoryRouter><Home /></MemoryRouter>);                
    expect(home).toContainReact(<Link to="/mission">Begin</Link>)      
});

顯然，代碼中有幾個問題，不其中最重要的是錯誤：

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.

但是請注意鍵位：我想淺渲染（如果可能）Home組件以測試該組件隔離。同時，我正試圖將其包裝在MemoryRouter中，或者以某種方式獲取上下文，以便我可以測試Link組件。

精明的潛在應答者會發現，這個問題實際上是要阻止該組件的所有隔離測試（不只是測試反應路由器相關的），因爲我可以不淺呈現組件在所有。

來源

2017-08-06 fildred13

可以使用酶的find方法：

import { Link } from 'react-router'; 

it('includes link to Mission scene',() => {          
    const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>); 
    expect(wrapper.find(Link).props().to).toBe('/mission'); 
});

來源

2017-10-10 17:57:45

我需要回到這個代碼來檢查這個答案，但我的直覺說，這是行不通的。我相信這個錯誤是在淺層渲染期間產生的，而不是在預期期間。 – fildred13

如何使用酶測試反應路由器鏈接？

回答

相關問題