从 React 组件中按文本选择 DOM 元素答案

【问题标题】：Select DOM element by text from React component从 React 组件中按文本选择 DOM 元素
【发布时间】：2016-06-07 20:16:52
【问题描述】：

我正在测试一个 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();
  }
}

【问题讨论】：

你可以编写一个使用 .innerHTML() 的函数
谢谢@ChrisWissmach。知道如何使用.innerHTML() 选择该元素吗？

标签： javascript jquery testing reactjs jasmine

【解决方案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;
}

【讨论】：