1

我对使用 connect 导出的 React 组件进行了测试。我能够通过我的测试，但我的 Snapsnot 不是我期望的那样。我也向酶团队提出了一个GH 问题注意我取出了一些方法，因为它们不适用于该问题。

我的组件

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import get from 'lodash/get';
import isArray from 'lodash/isArray';
import { isString } from '../../helpers/typeCheckHelper';
import classNames from 'classnames';
import * as actionCreators from '../../actions/modal';
import GenericModal from '../GenericModal';
import Notify from '../../components/Notify';
import s from './AnalyzeModal.scss';


export class AnalyzeModal extends Component {

  static propTypes = {
    data: PropTypes.object,
    sendData: PropTypes.func,
    isOpen: PropTypes.bool,
    openModal: PropTypes.func,
    closeModal: PropTypes.func,
    customStyles: PropTypes.object,
    wasClicked: PropTypes.bool,
    isSpinner: PropTypes.bool,
    toggleSpinner: PropTypes.func,
    handleAnalyzeListOfBonds: PropTypes.func,
    id: PropTypes.string,
  }

  constructor(props) {
    super(props);
    this.state = {
      notes: '',
    };
    this.closeModal = this.closeModal.bind(this);
    this.handleNotesChange = this.handleNotesChange.bind(this);
  }

  render() {
    const { isOpen, customStyles, wasClicked, isSpinner, id } = this.props;

    return (
      <GenericModal
        isOpen={isOpen}
        style={customStyles}
        contentLabel="List/Portfolio Review"
      >
        <div className={classNames('buy-btn-modal row', s['analyze-modal'])}>
          <h1 className="column small-11 header">Portfolio Review</h1>
          <button
            className="column small-1 close-modal"
            data-id={`${MODAL}-close-button`}
            onClick={() => { this.closeModal(); }}
          >X</button>
          <div className="column small-12">
            <div className={classNames('column small-12', s['table-container'], s['force-show-scrollbar'])}>
              <div className={classNames('row', s['table-header'])}>
                <div className={classNames('columns small-3 text-left', s['table-header-label'])}>QUANTITY</div>
              </div>
              {this.renderTableData()}
            </div>
            <div className="column small-12 field-container">
              <label
                className="label column small-3 text-right"
                htmlFor="notes"
              >NOTES</label>
              <textarea
                className={classNames('notes-field', s['notes-field'])}
                data-id={`${MODAL}-form-notes`}
                onChange={this.handleNotesChange}
              />
            </div>
            <div className="column small-12 button-wrapper">
              <button
                className={classNames('small-4 bright-blue submit-btn', s['submit-btn'])}
                data-id={`${MODAL}-submit-button`}
                onClick={() => { this.handleSubmit(); }}
                disabled={!!wasClicked}
              >
                {isSpinner ?
                  <div className="spinner-full-page modal-spinner" /> :
                  'Submit'
                }
              </button>
              <button
                className={classNames('small-4 bright-blue cancel-btn', s['cancel-btn'])}
                onClick={() => { this.closeModal(); }}
              >Cancel</button>
            </div>
          </div>
        </div>
      </GenericModal>
    );
  }
}

const mapDispatchToProps = dispatch => (
  bindActionCreators(actionCreators, dispatch)
);

const mapStateToProps = state => ({
  isOpen: state.modal.isModalOpen,
  id: state.modal.id,
  wasClicked: state.modal.wasClicked,
  isSpinner: state.modal.isSpinner,
  data: state.modal.data,
});

export default withStyles(s)(connect(mapStateToProps, mapDispatchToProps)(AnalyzeModal));

我的测试

import React from 'react';
import AnalyzeModal from '../components/AnalyzeModal';
import Link from '../components/Link';
import { render,  mount, shallow } from 'enzyme';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';

describe('<Analyze />', () => {
  // create any initial state needed to render Connected component
  const initialState = {
    modal: {
      isModalOpen: false,
      id: '',
      wasClicked: false,
      isMarkIncluded: false,
      isSpinner: false,
      isOpen: null,
      openModal: null,
      closeModal: null,
      data: null,
    },
  };

  const middlewares = [thunk];
  const mockStore = configureMockStore(middlewares);
  let wrapper;
  let store;

  beforeEach(() => {
    store = mockStore(initialState);
    wrapper = mount(<AnalyzeModal store={store} />);
  });

  test('should be defined', () => {
    expect(wrapper).toBeDefined();
  });

  test('matches the snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  })
});

我的测试快照

// Jest Snapshot v1

exports[`<Analyze /> matches the snapshot 1`] = `
<Connect(AnalyzeModal)
  store={
    Object {
      "clearActions": [Function],
      "dispatch": [Function],
      "getActions": [Function],
      "getState": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
    }
  }
>
  <AnalyzeModal
    closeModal={[Function]}
    data={null}
    id=""
    isOpen={false}
    isSpinner={false}
    openModal={[Function]}
    sendData={[Function]}
    store={
      Object {
        "clearActions": [Function],
        "dispatch": [Function],
        "getActions": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
        "subscribe": [Function],
      }
    }
    toggleMark={[Function]}
    toggleSpinner={[Function]}
    wasClicked={false}
  />
</Connect(AnalyzeModal)>

当前行为 目前，快照正在返回组件本身没有 JSX 的组件。

预期的行为我希望组件能够容纳 jsx 元素，例如：按钮、div 等。

我的环境：

版本

     library          |  version
     enzyme           | "^3.9.0"
     react            | "^15.3.1"
   react-dom          | "^15.3.1"
  react-test-renderer | "^15.3.1"
adapter (enzyme-adapter-react-15.4)   | "^1.3.1"
4

0 回答 0