如何测试反应组件是否已从开关状态渲染？

Question

I have a file called ModalContainer which renders child components with a switch statement based on the props.

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;

I'm mounting the ModalComponent and passing in props but when I try to console log the output I get ReactWrapper {} which I can't use for the assertion test.

Here is my test

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

    });

  });

});

I have tested each of the child components in separate test cases and just need to test this part of the file. Thanks

Answer 1

To test if child component is correctly rendered you can follow the pattern given below:

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

You may have to do multiple .dive() or not even once, based on your implementation of ParentComponent.

To quickly see the tree while writing test cases .debug() on shallow method saves a lot of time!!!