您好我在使用酶来测试我的反应成分。我想知道测试我正在测试的组件包含某个具有某些道具的子组件这一事实的最佳方法是什么?
到目前为止,我没有成功:
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?
谢谢!