jest + feré, используя mount(), document.getElementById() возвращает значение null для компонента, который появляется после вызова метода

Я столкнулся с проблемой со своим тестированием jest + farme mount(). Я тестирую функцию, которая переключает отображение компонентов.

Переключение между компонентами: когда state.infoDisplayContent = 'mission' missionControl компонент missionControl, когда state.infoDisplayContent = 'profile' - другие шаги компонента:

Когда я запускаю эту функцию, все выглядит нормально, этот тест проходит хорошо, и тест успешно проходит с требуемым компонентом:

return null, но я не могу понять почему. Как я уже упоминал, Элемент проходит тесты.

Но его невозможно захватить с помощью document.getElementById().

Пожалуйста, помогите мне решить эту проблему и запустить тесты.

Ответы

Ответ 1

Нашел решение благодаря https://stackoverflow.com/users/853560/lewis-chung и богам Google:

Прикрепленный мой компонент к DOM с помощью attachTo param:

const result = mount(<App/>, { attachTo: document.body } );
Изменена строка багги в моем методе для строки, которая работает с элементом Object 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'
        });
    }
}

Ответ 2

Присоедините свой компонент к DOM с помощью `attachTo` param.

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

зачем нам это нужно?

mount только компонент рендеринга, чтобы элемент div не привязывал его к дереву DOM.

// 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);
      },
    };
  }

Ответ 3

attachTo: document.body выдаст предупреждение:

Предупреждение: render(): рендеринг компонентов напрямую в document.body не рекомендуется, так как его дочерние элементы часто манипулируются сторонними скриптами и расширениями браузера. Это может привести к тонким проблемам примирения. Попробуйте выполнить рендеринг в элемент контейнера, созданный для вашего приложения.

Так что просто присоедините элемент контейнера вместо document.body, и нет необходимости добавлять его в глобальный объект Window

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