<element>.innerText 组件方法代码在酶测试中无法正常工作。使用 Jest+Enzyme(mount()) 测试反应组件

Question

使用 React+Enzyme+Jest

您好，我使用 .innerText 属性来获取特定元素的值，请参阅我的代码的第 5 行：

_modifyProfileField (event) {
    const { currentAgentProfile, agentsDatabase } = this.state;
    const eventTarget = event.target;
    const agentToMod = currentAgentProfile;
    const valueToSave = event.target.innerHTML !=='<br>'
        ? eventTarget.innerText
        : '';

    if (agentToMod[eventTarget.id] !== valueToSave) {
        const style = eventTarget.id === 'name'
            ? Styles.nameSaving
            : Styles.saving;

        eventTarget.classList.add(style);
        const hideSaver = setTimeout(() => {
            eventTarget.classList.remove(style);
            clearTimeout(hideSaver);
        }, 300);

        agentToMod[eventTarget.id] = valueToSave;

        const newData = agentsDatabase.map((agent) => {
            return agent.id === agentToMod.id
                ? agentToMod
                : agent;
        });

        this.setState({
            agentsDatabase:      newData,
            currentAgentProfile: agentToMod
        });

        document.activeElement.blur();
        window.getSelection().removeAllRanges();
    }
}

当我尝试运行这种酶测试方法时，event.target.innerHTMLreturnsundefined。由于项目需要，将 innerText 更改为 innerHTML 是不可接受的。是否可以让酶从我的代码中理解 innerText？

这是我的酶代码：

expect(result
    .state()
    .currentAgentProfile.Country)
    .toBe(country);

for (const location of locations) {
    result.find('#Country').node.innerHTML = location.city;

    expect(result.find('#Country').text()).toBe(location.city);

    result.find('#Country').simulate('keydown', { key: 'Enter', keyCode: 13, which: 13 });

    result.find('#Country').simulate('blur');

    expect(result
        .state()
        .currentAgentProfile.Country)
        .toBe(location.city);
}

blur() 模拟触发了我的方法。

Answer 1

查看此答案：

innerText vs textContent - getting some errors on Firefox

简而言之： var text = elem.textContent || elem.innerText;

所以你可以这样做:

const valueToSave = event.target.innerHTML !=='<br>'
        ? eventTarget.innerText || eventTarget.textContent
        : '';

<element>.innerText 组件方法代码在酶测试中无法正常工作。使用 Jest+Enzyme(mount()) 测试反应组件

<element>.innerText in component method code does not work properly in enzyme testing. Testing react component with Jest+Enzyme(mount())

reactjs

testing

mount

enzyme

innertext