开玩笑+酶,使用mount(),document.getElementById()在_method调用后出现的组件上返回null
我的酵素+酶mount()
测试遇到问题.我正在测试一个功能,该功能可以切换显示组件.
I faced a problem with my jest+enzyme mount()
testing. I am testing a function, which switches displaying components.
在组件之间切换:当安装state.infoDisplayContent = 'mission'
一个missionControl
组件时,当state.infoDisplayContent = 'profile'
-其他组件进入以下位置时:
Switch between components: when state.infoDisplayContent = 'mission'
a missionControl
component is mounted, when state.infoDisplayContent = 'profile'
- other component steps in:
_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'
});
}
}
当我触发此功能时,一切看上去都很好,该测试运行良好,并且测试成功通过了必需的组件:
When I trigger this function everything looks Ok, this test runs well and test successfully pass with required component:
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,但我不明白为什么.正如我提到的那样,元素通过了测试.
return null, but I can not get why. Element passes tests, as I mention.
expect(result.find('#missionLocationSelect')).toHaveLength(1);
但是无法用document.getElementById()
捕获.
请帮我解决此问题并运行测试.
Please, help me to fix this problem and run tests.
感谢 https://stackoverflow,找到了解决方案. com/users/853560/lewis-chung 和Google之神:
Found the solution thanks to https://stackoverflow.com/users/853560/lewis-chung and gods of Google:
-
通过
attachTo
参数将我的组件附加到DOM:
Attached my component to DOM via
attachTo
param:
const result = mount(
<App />, { attachTo: document.body }
);
const result = mount(
<App />, { attachTo: document.body }
);
将我的方法中的越野车字符串更改为与元素Object agentToMod.location = locationSelect.options[locationSelect.selectedIndex].text;
兼容的字符串:
Changed buggy string in my method to string which works with element Object agentToMod.location = locationSelect.options[locationSelect.selectedIndex].text;
:
_modifyAgentStatus(){
_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'
});
}
}