javascript - 如何测试 React 组件是否已经从 switch 状态渲染？

Question

我有一个名为 ModalContainer 的文件，它根据 Prop 使用 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 并传入 Prop ，但是当我尝试控制台记录输出时，我得到了 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() 时快速查看树可以节省大量时间!!!