如何使用Jest和/或Enzyme獲取嵌套在React組件中的元素屬性？

Question

我想測試一下圖片是否已經正確加載到React應用中。我決定檢查嵌套在React組件中的img元素的src屬性。我想使用Jest測試框架，如果需要，還可以使用酶測試工具。

通過一個淺淺的陣營測試組件的Object.keys挖，我能想出以下解決方案。我不確定的線條用星號表示。

import React  from 'react'; 
import {shallow} from 'enzyme'; 
import App  from './App'; 

it('should have the logo image',() => { 
    const app = shallow(<App />); 
    const img = app.find('img'); 
    const src = img.node.props.src; // ****** 
    expect(src).toBe('logo.svg'); 
}); 

該解決方案確實工作，但似乎有點令人費解（它需要包裝的屬性的屬性的屬性），似乎有點模糊（我不能很容易地找到這個網上明確指示）。那麼，這是做到這一點的正確/最簡單的方法嗎？

• 如果是這樣，這裏是文檔？
• 如果不是，我該怎麼做/我該做些什麼？例如酶中是否有一些現成的getAttribute或retrieveProp方法等？有沒有更好的方法來使用別的東西來代替酶，例如react-addons-test-utils？

This question大約陣營元素屬性似乎並不十分回答對我來說，即使有海報也指具有很難找到關於斷言渲染屬性值的文檔。其他一些問題（例如here,here和here）涉及React/Jest/Enzyme，但不涉及檢索屬性值。

Answer 1

經過一番挖掘，我發現了以下內容。在問題的指示的行：

const src = img.node.props.src; 

可以簡化爲以下：

const src = img.prop('src'); 

的文檔可以發現here。

如果有人知道的這樣的非酶的方式，我仍然有興趣聽一下吧。

Answer 2

與之反應Test Utilities：

it('should have the logo image',() => 
    const app = TestUtils.renderIntoDocument(<App/>); 
    var image = TestUtils.findRenderedDOMComponentWithTag(app, 'img'); 
    expect(image.getDOMNode().getAttribute('src')).toEqual('logo.svg'); 
}); 

酶試驗看起來清爽多了。