gpt4 book ai didi

reactjs - jest + enzyme,使用 mount(),document.getElementById() 在 _method 调用后出现的组件上返回 null

转载 作者:行者123 更新时间:2023-11-28 19:40:06 26 4
gpt4 key购买 nike

我的 jest+enzyme mount() 测试遇到了问题。我正在测试一个功能,它可以切换显示组件。

在组件之间切换:当 state.infoDisplayContent = 'mission' 挂载了一个 missionControl 组件时,当 state.infoDisplayContent = 'profile' - 其他组件步骤:

_modifyAgentStatus () {
const { currentAgentProfile, agentsDatabase } = this.state;
const agentToMod = currentAgentProfile;

if (agentToMod.status === 'Free') {
this.setState({
infoDisplayContent: 'mission'
});
agentToMod.status = 'Waiting';
} else if (agentToMod.status === 'Waiting') {
const locationSelect = document.getElementById('missionLocationSelect');

agentToMod.location = locationSelect[locationSelect.selectedIndex].innerText;
agentToMod.status = 'On Mission';
this.setState({
infoDisplayContent: 'profile'
});
}
}

当我触发这个函数时,一切看起来都很好,这个测试运行良好并且测试成功通过了所需的组件:

import React from 'react';
import { mount } from 'enzyme';
import App from '../containers/App';

const result = mount(
<App />
)

test('change mission controls', () => {
expect(result.state().currentAgentProfile.status).toBe('Free');
result.find('#statusController').simulate('click');
expect(result.find('#missionControls')).toHaveLength(1);
expect(result.find('#missionLocationSelect')).toHaveLength(1);
expect(result.state().currentAgentProfile.status).toBe('Waiting');
});

But when I simulate onClick two times:

test('change mission controls', () => {
expect(result.state().currentAgentProfile.status).toBe('Free');
result.find('#statusController').simulate('click');
expect(result.find('#missionControls')).toHaveLength(1);
expect(result.find('#missionLocationSelect')).toHaveLength(1);
expect(result.state().currentAgentProfile.status).toBe('Waiting');
result.find('#statusController').simulate('click');
expect(result.state().currentAgentProfile.status).toBe('On Mission');
});

我得到这个断言:

    TypeError: Cannot read property 'selectedIndex' of null

at App._modifyAgentStatus (development/containers/App/index.js:251:68)
at Object.invokeGuardedCallback [as invokeGuardedCallbackWithCatch] (node_modules/react-dom/lib/ReactErrorUtils.js:26:5)
at executeDispatch (node_modules/react-dom/lib/EventPluginUtils.js:83:21)
at Object.executeDispatchesInOrder (node_modules/react-dom/lib/EventPluginUtils.js:108:5)
at executeDispatchesAndRelease (node_modules/react-dom/lib/EventPluginHub.js:43:22)
at executeDispatchesAndReleaseSimulated (node_modules/react-dom/lib/EventPluginHub.js:51:10)
at forEachAccumulated (node_modules/react-dom/lib/forEachAccumulated.js:26:8)
at Object.processEventQueue (node_modules/react-dom/lib/EventPluginHub.js:255:7)
at node_modules/react-dom/lib/ReactTestUtils.js:350:22
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at node_modules/react-dom/lib/ReactTestUtils.js:348:18
at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:776:11)
at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1421:25)
at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:769:14)
at Object.<anonymous> (development/tests/AgentProfile.test.js:26:38)
at process._tickCallback (internal/process/next_tick.js:109:7)

很明显:

document.getElementById('missionLocationSelect');

返回 null,但我不明白为什么。正如我提到的,Element 通过了测试。

expect(result.find('#missionLocationSelect')).toHaveLength(1);

但无法用document.getElementById()获取。

请帮我解决这个问题并运行测试。

最佳答案

感谢 https://stackoverflow.com/users/853560/lewis-chung 找到了解决方案和谷歌的神:

  1. 通过 attachTo 参数将我的组件附加到 DOM:

    const result = mount(
    <App />, { attachTo: document.body }
    );
  2. 将我的方法中的错误字符串更改为可与元素对象一起使用的字符串

agentToMod.location = locationSelect.options[locationSelect.selectedIndex].text;` : 

_modifyAgentStatus () {

const { currentAgentProfile, agentsDatabase } = this.state;
const agentToMod = currentAgentProfile;

if (agentToMod.status === 'Free') {
this.setState({
infoDisplayContent: 'mission'
});
agentToMod.status = 'Waiting';
} else if (agentToMod.status === 'Waiting') {
const locationSelect = document.getElementById('missionLocationSelect');

agentToMod.location = agentToMod.location = locationSelect.options[locationSelect.selectedIndex].text;
agentToMod.status = 'On Mission';
this.setState({
infoDisplayContent: 'profile'
});
}
}

关于reactjs - jest + enzyme,使用 mount(),document.getElementById() 在 _method 调用后出现的组件上返回 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43694975/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com