this.props不是函数(浅层渲染)

我在用jest/enzyme测试我的(遗留)组件时遇到了问题。 它看起来像这样:

export default class MyComponent extends Component {
    constructor( props ) {
        super( props );
        this.handleSelect = this.handleSelect.bind( this );
    }

    handleSelect( event ) {
        const { name, value } = event.target;
        this.props[ name ]( value );
    }

    render() {
        return (
            <label>
                Dropdown 1{ ' ' }
                <select
                    name="dropdown1"
                    value={ status }
                    data-testid="dropdown-1"
                    onChange={ this.handleSelect }
                >
                    <option value="">Any</option>
                    <option value="item1">Item 1</option>
                    <option value="item2">Item 2</option>
                    <option value="item3">Item 3</option>
                </select>
            </label>
        );
    }
}

这些方法被当作道具传递! 在这种情况下,当值改变时, handleSelect 将被调用和 this.props['dropdown1'](value) 被称为。

我的测试看起来像这样:

import React from 'react';
import { shallow } from 'enzyme';

test( 'select an item from the dropdown', () => {
    const status = wrapper.find( 'select[data-testid="dropdown-1"]' );
    status.simulate( 'change', { target: { value: 'item1' } } );
    expect(status.prop('value')).toEqual('item1');
} );

它呈现以下错误:

TypeError: this.props[name] is not a function

依赖关系 package.json :

"devDependencies": {
    ...
    "enzyme-to-json": "^3.4.0",
    "jest": "^24.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",

有人能帮我吗?