2016-06-07 64 views
3

我正在測試反應組件,並需要模擬組件內特定元素的單擊。我不想僅僅爲了測試而添加id,有沒有辦法通過文本選擇這個元素?通過來自React組件的文本選擇DOM元素

const ReactTestUtils = require('react-test-utils'); 
const Sidebar = require('components/sidebar'); 

describe('clicking on More button', function() { 
    it('triggers analytics event', function() { 
    const component = renderComponent(<Sidebar policyPreferences={ this.policyPreferences } />); 

    const moreButton = component.getDOMElementByText('More'); // <- I need something like this 
    ReactTestUtils.Simulate.click(moreButton); 

    expect(analytics.track).toHaveBeenCalled(); 
    } 
} 
+0

你可以寫一個使用.innerHTML() –

+0

感謝@ChrisWissmach功能。任何想法如何使用'.innerHTML()'選擇該元素? –

回答

4

通過所有元素以下功能重複,直到它找到一個與匹配的文本:

function getElementByText(text){ 
    var all = document.getElementsByTagName("*"); 

    for (var i=0, max=all.length; i < max; i++) { 
     if (all[i].innerHTML == text){ 
      return all[i]; 
     } 
    } 
    return null; 
}