reactjs - 组件方法代码中的 .innerText 在 enzyme 测试中无法正常工作。使用 Jest+Enzyme(mount()) 测试 react 组件

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

当我尝试在 enzyme 中运行此方法进行测试时，event.target.innerHTML 返回 undefined。由于项目需要，将 innerText 更改为 innerHTML 是 Not Acceptable 。是否可以让 enzyme 从我的代码中理解 innerText？

这是我的 enzyme 代码:

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
        : '';