Question

我目前正在使用Mocha和Enzyme进行测试，以及使用chai和chai-enzyme进行断言。

我有一个名为LayerList的表示组件，它将多个Layer组件呈现为子组件。

我希望将动作创建者传递给所有Layer项目作为道具。

我应该如何编写单元测试以确保将动作创建器作为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);

    });

Answer 1

我发现在每个子组件中测试给定prop的解决方案是将语法更改为如下：

it('should pass a prop to every child component', () => {  

 expect(wrapper.find(Layer)
                .everyWhere(n => n.prop(/* insert prop name /*)))
                .to.equal(true);
});

我应该如何测试每个React组件是否已通过给定的道具？

1 个答案: