酶反应测试.contains()不匹配

时间:2017-01-19 16:17:47

标签: reactjs testing enzyme

您好我在使用酶来测试我的反应成分。我想知道测试我正在测试的组件包含某个具有某些道具的子组件这一事实的最佳方法是什么?

到目前为止,我没有成功:

InlineEdit.js

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import debounce from 'lodash/debounce';

export default class InlineEdit extends React.Component {
    static propTypes = {
      label: PropTypes.string,
      value: PropTypes.string.isRequired,
      onChange: PropTypes.func.isRequired,
    };    
    static defaultProps = {
      label: null,
    };

    constructor(props) {
      super(props)
      this.state = {
        isOn: false,
        inputValue: props.value,
      }
      this.showInput = this.showInput.bind(this)
      this.hideInput = this.hideInput.bind(this)
      this.handleDisplayTextChange = this.handleDisplayTextChange.bind(this)
      this.debouncedHandleKeyDown = debounce(this.debouncedHandleKeyDown.bind(this), 200)
      this.handleKeyDown = this.handleKeyDown.bind(this)
      this.checkIfChanged = this.checkIfChanged.bind(this)
      this.commitChange = this.commitChange.bind(this)
      this.discardChange = this.discardChange.bind(this)
    }

    showInput() {
      this.setState({
        isOn: true,
      }, 
      () => {
        ReactDOM.findDOMNode(this.refs.namedInput).select()
      })
    }

    hideInput() {
      this.setState({
        isOn: false,
      })
    }

    handleDisplayTextChange(e) {
      this.setState({inputValue:e.target.value})
    }

    debouncedHandleKeyDown(key) {
      if( key == 'Enter') {
        this.commitChange()
      } else if ( key == 'Escape') {
        this.discardChange()
      }
    }

    handleKeyDown(e) {
      // http://stackoverflow.com/questions/22123055/react-keyboard-event-handlers-all-null
      this.debouncedHandleKeyDown(e.key)
    }

    checkIfChanged() {
      return this.state.inputValue !== this.props.value
    }

    commitChange() {
      this.hideInput()
      if(this.checkIfChanged()){
        this.props.onChange(this.state.inputValue)  
      }
    }
    discardChange(){
      this.hideInput()
      this.setState({inputValue: this.props.value})
    }

    render() {
      const { 
        onChange,
        value,
        label,
      } = this.props;

      const {
        isOn,
        inputValue,
      } = this.state;

      return  <span style={{
                borderBottom: '1px dashed #000',
              }}>
                { 
                  !isOn 
                    ? <span onDoubleClick={this.showInput}>{label || value}</span>
                    : <input 
                        ref="namedInput"
                        onChange={this.handleDisplayTextChange}
                        onBlur={this.commitChange}
                        onKeyDown={this.handleKeyDown}
                        value={inputValue}
                      />
                }
              </span>
    }
}

LineItemRow.js

import React, { PropTypes } from 'react';
import InlineEdit from './InlineEdit';

const LineItemRow = ({
  project,
}) => (
  <div>
    <InlineEdit 
      value={project.name} />
  </div>
)
LineItemRow.propTypes = {
  project: PropTypes.object,
};

export default LineItemRow;

LineItemRow.spec.js

import React from 'react';
import shallow from 'enzyme/shallow';
import expect from 'expect';
import sinon from 'sinon';

import { LineItemRow } from './LineItemRow';
import InlineEdit from '../lib/components/InlineEdit';
import LineItemSelectBox from './LineItemSelectBox';

describe('<LineItemRow /> component', function () {
  const setup = () => {
    const props = {
      project: {id: 1, name: '1000'},
    }
    const output = shallow(<LineItemRow {...props} />)
    return {
      output,
      props,
    }
  }

  it.only('should contain project name', function () {
    const { output, props } = setup()
    const actual  = output.contains(<InlineEdit value={props.project.name} />) // THIS IS FALSE
    const expected= true

    expect(actual).toEqual(expected)
  });

});

//的package.json

    {
      "name": "client",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "NODE_ENV=test mocha './app/**/*.spec.js' --compilers js:babel-register --recursive --require testSetup.js",
        "test:watch": "npm test -- --watch",
        "start": "NODE_ENV=dev node server.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.7.4",
        "babel-eslint": "^6.0.4",
        "babel-loader": "^6.2.4",
        "babel-plugin-react-hot": "^1.0.4",
        "babel-plugin-transform-flow-strip-types": "^6.18.0",
        "babel-polyfill": "^6.7.4",
        "babel-preset-es2015": "^6.6.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "babel-register": "^6.7.2",
        "css-loader": "^0.23.1",
        "enzyme": "^2.2.0",
        "eslint": "^2.6.0",
        "eslint-plugin-react": "^5.0.1",
        "expect": "^1.16.0",
        "happypack": "^2.1.1",
        "jsdom": "^8.2.0",
        "mocha": "^2.4.5",
        "mocha-jsdom": "^1.1.0",
        "node-sass": "^3.4.2",
        "npm-check-updates": "^2.8.9",
        "npm-install-webpack-plugin": "^3.0.0",
        "react-addons-perf": "^15.1.0",
        "react-addons-test-utils": "^15.1.0",
        "react-hot-loader": "^3.0.0-beta.6",
        "react-render-visualizer": "^0.2.2",
        "redux-devtools": "^3.3.1",
        "redux-devtools-dock-monitor": "^1.1.1",
        "redux-devtools-log-monitor": "^1.0.11",
        "sinon": "^1.17.3",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.1",
        "webpack-dev-server": "^1.14.1",
        "webpack-notifier": "^1.3.0",
        "why-did-you-update": "0.0.8"
      },
      "dependencies": {
        "Faker": "^0.7.2",
        "aphrodite": "^1.1.0",
        "axios": "^0.12.0",
        "classnames": "^2.2.5",
        "color": "^0.11.3",
        "counterpart": "^0.17.4",
        "cuid": "^1.3.8",
        "damals": "^0.9.4",
        "delay": "^1.3.1",
        "draft-js": "^0.7.0",
        "draft-js-export-html": "^0.3.0",
        "fecha": "^2.1.0",
        "file-loader": "^0.8.5",
        "halogen": "^0.2.0",
        "history": "^2.0.1",
        "humanize-plus": "^1.8.2",
        "intl": "^1.1.0",
        "lodash": "^4.13.1",
        "memoizee": "^0.3.10",
        "normalizr": "^2.1.0",
        "pluralize": "^3.0.0",
        "query-string": "^4.2.2",
        "query-string-parser": "^0.1.4",
        "react": "^15.1.0",
        "react-addons-shallow-compare": "^15.1.0",
        "react-dnd": "^2.1.4",
        "react-dnd-html5-backend": "^2.1.2",
        "react-dom": "^15.1.0",
        "react-dropzone": "^3.4.0",
        "react-functional": "^1.2.0",
        "react-grid-layout": "^0.13.0",
        "react-modal": "^1.4.0",
        "react-player": "^0.12.0",
        "react-redux": "^4.4.5",
        "react-router": "^3.0.0-beta.1",
        "react-router-redux": "^4.0.0",
        "react-rte": "^0.5.0",
        "react-select": "^1.0.0-rc.2",
        "react-stateless": "^0.2.1",
        "redux": "^3.5.2",
        "redux-crud": "^1.0.0",
        "redux-form": "^5.2.5",
        "redux-saga": "^0.14.2",
        "reselect": "^2.2.1",
        "seamless-immutable": "^5.1.1",
        "url-loader": "^0.5.7"
      }
    }

我标记为“这是假的”这一行是我最关心的问题。如何测试子组件InlineEdit将被赋予道具XYZ?

谢谢!

0 个答案:

没有答案