React Jest：如何獲取復選框的狀態

Question

我正在嘗試在React組件中找到復選框的checked狀態。 這是我的組件：

class Checkboxes extends React.Component {
     constructor() {
        super();
        console.log('Hello world!');
        this.state = {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true,
            },
            isApplyingFilter: false
        };
    }

    getInitialState () {
        return {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true
            },
            isApplyingFilter: false
        };
    }

    render () {
        const { isApplyingFilter } = this.props;
        return (
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="mt-checkbox-inline">
                            <label className="mt-checkbox">
                                <input type="checkbox" name="desserts" value="desserts" 
                                    checked={this.state.filterEnabled.desserts}
                                /> 
                                <span>desserts</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="juices" value="juices" 
                                    checked={this.state.filterEnabled.juices}
                                /> 
                                <span>juices</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="meats" value="meats" 
                                    checked={this.state.filterEnabled.meats}
                                /> 
                                <span>meats</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="veggies" value="veggies" 
                                    checked={this.state.filterEnabled.veggies}
                                /> 
                                <span>veggies</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

我編寫了以下測試方案：

it('Applying "foods" filter will display only selected food items.', () => {
    // Locate the checkboxes div 
    var checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(DOM, 'input');
    // Pick the first checkbox
    var cb = checkboxes[0].attributes;
    // prints out "desserts"
    console.log('name: ', cb['name'].value);
    // prints out an empty string
    console.log('checked: ', cb['checked'].value);
});

當我嘗試獲取cb['checked'] ，它只是打印出一個空字符串'' 。 我期望能成為true 。

獲取復選框狀態的正確方法是什么？

Answer 1

由於您將checked設置為等於this.state.filterEnabled ，僅檢查狀態就足夠了。

expect(this.state.filterEnabled.desserts).toBe(true);