Я столкнулся с проблемой со своим тестированием jest + farme mount()
. Я тестирую функцию, которая переключает отображение компонентов.
Переключение между компонентами: когда state.infoDisplayContent = 'mission'
missionControl
компонент 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');
return null, но я не могу понять почему. Как я уже упоминал, Элемент проходит тесты.
expect(result.find('#missionLocationSelect')).toHaveLength(1);
Но его невозможно захватить с помощью document.getElementById()
.
Пожалуйста, помогите мне решить эту проблему и запустить тесты.