我应该如何测试每个 React 组件都已通过给定的 prop?
How should I test that every React component has been passed a given prop?
我目前正在使用 Mocha 和 Enzyme 进行测试,同时使用 chai 和 chai-enzyme 进行断言。
我有一个名为 LayerList 的演示组件,它将多个 Layer 组件呈现为子组件。
我希望将 action creators 作为道具传递给所有 Layer 项目。
我应该如何编写单元测试以确保将 action creator 作为 prop 传递给每个 Layer 组件。
这是我的组件。
LayerList.jsx
import React from 'react'
import { Component, PropTypes } from 'react';
import Layer from './Layer'
import LayerBorder from './LayerBorder'
const mapLayers = (layers, props) =>
layers.map((layerName, i) => (
<LayerBorder>
<Layer layerActions={props}/>
{i}
</LayerBorder>
)
)
const LayerList = ({ layers, layerActions }) => {
return (
<div>
{mapLayers(layers, layerActions)}
</div>
)
}
LayerList.PropTypes = {
layers: PropTypes.arrayOf(PropTypes.string).isRequired,
layerActions: PropTypes.shape({
addLayer: PropTypes.func,
removeLayer: PropTypes.func,
toggleDragLayer: PropTypes.func,
moveLayerIndex: PropTypes.func,
updateLayerColour: PropTypes.func,
toggleLayerVisibility: PropTypes.func
}).isRequired
}
export default LayerList
这是我的(失败)测试尝试:
describe('should pass layer action creators as a prop to Layer components', () => {
it('should pass addLayer', () => {
const wrapper = shallow(<LayerList
layers={layers}
layerActions={LayerActions} />);
expect(wrapper.find(Layer)
.everyWhere(n => n.props() === 'function'}))
.to.equal(true);
});
我发现在每个子组件中测试给定道具的解决方案是将语法更改为如下:
it('should pass a prop to every child component', () => {
expect(wrapper.find(Layer)
.everyWhere(n => n.prop(/* insert prop name /*)))
.to.equal(true);
});
我目前正在使用 Mocha 和 Enzyme 进行测试,同时使用 chai 和 chai-enzyme 进行断言。
我有一个名为 LayerList 的演示组件,它将多个 Layer 组件呈现为子组件。
我希望将 action creators 作为道具传递给所有 Layer 项目。
我应该如何编写单元测试以确保将 action creator 作为 prop 传递给每个 Layer 组件。
这是我的组件。
LayerList.jsx
import React from 'react'
import { Component, PropTypes } from 'react';
import Layer from './Layer'
import LayerBorder from './LayerBorder'
const mapLayers = (layers, props) =>
layers.map((layerName, i) => (
<LayerBorder>
<Layer layerActions={props}/>
{i}
</LayerBorder>
)
)
const LayerList = ({ layers, layerActions }) => {
return (
<div>
{mapLayers(layers, layerActions)}
</div>
)
}
LayerList.PropTypes = {
layers: PropTypes.arrayOf(PropTypes.string).isRequired,
layerActions: PropTypes.shape({
addLayer: PropTypes.func,
removeLayer: PropTypes.func,
toggleDragLayer: PropTypes.func,
moveLayerIndex: PropTypes.func,
updateLayerColour: PropTypes.func,
toggleLayerVisibility: PropTypes.func
}).isRequired
}
export default LayerList
这是我的(失败)测试尝试:
describe('should pass layer action creators as a prop to Layer components', () => {
it('should pass addLayer', () => {
const wrapper = shallow(<LayerList
layers={layers}
layerActions={LayerActions} />);
expect(wrapper.find(Layer)
.everyWhere(n => n.props() === 'function'}))
.to.equal(true);
});
我发现在每个子组件中测试给定道具的解决方案是将语法更改为如下:
it('should pass a prop to every child component', () => {
expect(wrapper.find(Layer)
.everyWhere(n => n.prop(/* insert prop name /*)))
.to.equal(true);
});