Как проверить, был ли реагирующий компонент визуализирован из состояния переключателя?

Question

У меня есть файл с именем ModalContainer, который рендерит дочерние компоненты с помощью оператора switch на основе реквизита.

render() {
    let visibleElement = null;
    switch (this.props.modal) {
      case constants.SEARCH_AND_HIGHLIGHT_MODAL:
        visibleElement = <SearchAndHighlightModal/>;
        break;
      case constants.SAVE_SNIPPET_MODAL:
        visibleElement = <SaveSnippetModal/>;
        break;
      case constants.SNIPPET_SAVED_MODAL:
        visibleElement = <SnippetSavedModal/>;
        break;
      case constants.SAVE_SEARCH_MODAL:
        visibleElement = <SaveSearchModal/>;
        break;
      default visibleElement = null;

Я монтирую ModalComponent и передаю реквизиты, но когда я пытаюсь консольно записать в журнал вывод, я получаю ReactWrapper {}, который не могу использовать для проверки утверждения.

Вот мой тест

import {expect} from 'chai';
import sinon from 'sinon';
import sinonTest from 'sinon-test';
import {Map} from 'immutable';
import React from 'react';
import {shallow, mount, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {mockStore} from '../test_helper';

//import {constants} from '../src/react/constants/constants.js';

import {ModalContainer} from '../../src/react/ModalContainer/ModalContainer';

configure({adapter: new Adapter()});

describe('Modal Container - Modal Container JSX', () => {

  describe('Render from switch case', () => {

    const fakeStore = mockStore(Map({}));

    it('Render Search And Highlight Modal', () => {

      const props = {
        constants: {
          SEARCH_AND_HIGHLIGHT_MODAL: 'search-and-highlight'
        }
      }

      const wrapper = mount(<ModalContainer store={fakeStore}
                                            visible={false}
                                            modal={false}
                                            metaData={null}
                                            {...props}
      />);
      //const visibleElement = wrapper.find();
      //const myProps = wrapper.props();
      console.log(wrapper.find('SearchAndHighlightModal'));

      //expect(wrapper.find('SearchAndHighlightModal')).to.have.lengthOf(1);

    });

  });

});

Я проверил каждый из дочерних компонентов в отдельных тестовых случаях, и мне просто нужно проверить эту часть файла. Спасибо

Answer 1

Чтобы проверить, правильно ли отображается дочерний компонент, вы можете следовать приведенному ниже шаблону:

import {shallow} from "enzyme/build";
import ThemeProvider from "./mock-themeprovider";
import React from "react";
import ParentComponent from "./ParentComponent";
import ChildComponent from "./ChildComponent";

it("Does component renders child component correctly based on type?", () => {
    const component = shallow(<ThemeProvider value="primary">
        <ParentComponent
            type={1} //for type 1 assuming it renders ChildComponent
        />
    </ThemeProvider>);
    console.log(component.debug());
    const content = component.find(ParentComponent).dive().dive().find(ChildComponent);
    expect(content.exists()).toEqual(true);
});

Возможно, вам придется сделать несколько .dive() или даже не один раз, в зависимости от вашей реализации ParentComponent.

Чтобы быстро увидеть дерево при написании тестовых случаев .debug() на мелком методе экономит много времени !!!