programing

jest + 효소, mount(), document.getElementById()를 사용하여 _method 호출 뒤에 표시되는 컴포넌트에서 null을 반환합니다.

javamemo 2023. 3. 16. 21:05
반응형

jest + 효소, mount(), document.getElementById()를 사용하여 _method 호출 뒤에 표시되는 컴포넌트에서 null을 반환합니다.

나는 농담+효소로 문제에 직면했다mount()테스트하고 있습니다.표시 컴포넌트를 전환하는 기능을 테스트하고 있습니다.

컴포넌트 간 전환:state.infoDisplayContent = 'mission' a 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을 반환하는데 이유를 알 수 없습니다.말씀드렸듯이 원소는 테스트를 통과했습니다.

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

하지만 이 사진으로는 포착할 수 없었다.document.getElementById().

이 문제를 해결하고 테스트를 수행할 수 있도록 도와주세요.

https://stackoverflow.com/users/853560/lewis-chung과 구글의 신들 덕분에 해결책을 찾았습니다.

  1. 경유로 컴포넌트를 DOM에 접속.attachTo파라미터:

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

attachTo: document.body는 경고를 생성합니다.

경고: render(): 구성 요소를 문서에 직접 렌더링하고 있습니다.body의 자녀는 서드파티 스크립트와 브라우저 확장에 의해 조작되는 경우가 많기 때문에 body는 권장되지 않습니다.이로 인해 미묘한 화해 문제가 발생할 수 있습니다.앱에 대해 만들어진 컨테이너 요소로 렌더링해 보십시오.

그러니까 그냥 컨테이너 요소에 붙이면 됩니다.document.body글로벌 윈도 오브젝트에 추가할 필요가 없습니다.

before(() => {
  // Avoid `attachTo: document.body` Warning
  const div = document.createElement('div');
  div.setAttribute('id', 'container');
  document.body.appendChild(div);
});

after(() => {
  const div = document.getElementById('container');
  if (div) {
    document.body.removeChild(div);
  }
});

it('should display all contents', () => {
  const wrapper = mount(<YourComponent/>,{ attachTo: document.getElementById('container') });
});

컴포넌트를 DOM에 접속하는 방법attachToPARAM.

import { mount} from 'enzyme';

// Avoid Warning: render(): Rendering components directly into document.body is discouraged.
beforeAll(() => {
  const div = document.createElement('div');
  window.domNode = div;
  document.body.appendChild(div);
})

test("Test component with mount + document query selector",()=>{
  const wrapper = mount(<YourComponent/>,{ attachTo: window.domNode });
});

왜 이런게 필요하죠?

mountDOM 트리에 연결되지 않은 div 요소로 구성 요소만 렌더링합니다. 

// Enzyme code of mount renderer. 

createMountRenderer(options) {
    assertDomAvailable('mount');
    const domNode = options.attachTo || global.document.createElement('div');
    let instance = null;
    return {
      render(el, context, callback) {
        if (instance === null) {
          const ReactWrapperComponent = createMountWrapper(el, options);
          const wrappedEl = React.createElement(ReactWrapperComponent, {
            Component: el.type,
            props: el.props,
            context,
          });
          instance = ReactDOM.render(wrappedEl, domNode);
          if (typeof callback === 'function') {
            callback();
          }
        } else {
          instance.setChildProps(el.props, context, callback);
        }
      },
      unmount() {
        ReactDOM.unmountComponentAtNode(domNode);
        instance = null;
      },
      getNode() {
        return instance ? instanceToTree(instance._reactInternalInstance).rendered : null;
      },
      simulateEvent(node, event, mock) {
        const mappedEvent = mapNativeEventNames(event);
        const eventFn = TestUtils.Simulate[mappedEvent];
        if (!eventFn) {
          throw new TypeError(`ReactWrapper::simulate() event '${event}' does not exist`);
        }
        // eslint-disable-next-line react/no-find-dom-node
        eventFn(ReactDOM.findDOMNode(node.instance), mock);
      },
      batchedUpdates(fn) {
        return ReactDOM.unstable_batchedUpdates(fn);
      },
    };
  }

언급URL : https://stackoverflow.com/questions/43694975/jest-enzyme-using-mount-document-getelementbyid-returns-null-on-componen

반응형

'programing' 카테고리의 다른 글

WooCommerce: 배송 및 청구처 주소의 우편번호를 입수하여 설정  (0) 2023.03.16
TypeScript에 keyof와 유사한 value of이 있습니까?  (0) 2023.03.16
angular UI 라우터| $stateParams가 동작하지 않음  (0) 2023.03.16
인터페이스 org.springframework.data.domain의 기본 또는 기본 생성자를 찾을 수 없습니다.페이지 가능  (0) 2023.03.16
그 이외의 경우 StateProvider에서  (0) 2023.03.16

'programing'의 다른글

  • 현재글jest + 효소, mount(), document.getElementById()를 사용하여 _method 호출 뒤에 표시되는 컴포넌트에서 null을 반환합니다.

관련글

댓글

티스토리툴바