如何測試反應組件是否已從開關狀態渲染？

Question

我有一個名為ModalContainer的文件，它使用基於props的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);
});

根據您對ParentComponent的實現，您可能必須執行多次.dive()或甚至不執行一次。

在淺層方法上編寫測試用例時，快速查看樹.debug()可以節省大量時間！