从React组件中通过文本选择DOM元素

Question

我正在测试一个React组件，并需要模拟单击组件内特定元素。 我不想仅为测试而添加id，是否有一种通过文本选择此元素的方法？

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

- Petr Gazarov

---

你可以编写一个使用 .innerHTML() 的函数。 - Chris Wissmach

谢谢@ChrisWissmach。你有什么办法可以使用.innerHTML()选择那个元素吗？ - Petr Gazarov

Answer 1

下面的函数会遍历所有元素，直到找到与匹配文本相符的元素：

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

- Chris Wissmach