如何使用玩笑和酶将测试用例编写用于连接的组件到我的redux商店的案例？

Question

我想用与我的redux商店相关联的React组件的Jest酶来编写测试用例。测试用例只是检查组件中是否有任何“ div”标签。我创建了一个类组件并将其连接到redux存储。

我尝试编写一个简单的测试用例，该用例应该使用wrapper.debug（）记录组件的html。

//类别组件

import React, { Component } from 'react';
import { connect } from "react-redux";
import { Link } from 'react-router-dom';
import { getCategories, getSearchBoxValue, getSearchedCategories } from './actions';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { Checkbox } from 'primereact/checkbox';
import PropTypes from "prop-types";

class Category extends Component {

    constructor(props) {
        super(props);
        this.state = {                    
            searchedText: ''                
        };
    }

    componentDidMount() {        
        //dispatches action which gets all the categories
        this.props.getCategories();
    }

    componentWillReceiveProps(recievedProps) {
        this.setState({                   
            value: recievedProps.valueInSearchBox,           
        })
    }

    handleTextInputChange = value => {
        console.log("change: ", value.target.value);
        //checks that the value entered is not null or undefined
        if (value != "" || value != undefined) {
            this.setState({ searchedText: value.target.value });
        }
        else {
            this.setState({ searchedText: '' })
            this.props.getSearchedCategories('');
        }
    };

    onSearch = () => {        
        this.props.getSearchedCategories(this.state.searchedText);
    }

    render() {

        return (
            <>               
                <div>
                    <div className="searchInputs">
                        <h2>Hello</h2>
                        {/* InputText component of prime react */}
                        <InputText value={searchedText} onChange={this.handleTextInputChange} placeholder="Search..." />
                        {/* Button comopnent of prime react */}
                        <Button label="Go" className="p-button-secondary" onClick={this.onSearch} />
                    </div>                        
                </div>
            </>
        )
    }
}

const mapStateToProps = (state) => ({
    valueInSearchBox: state.categoryReducer.valueInSearchBox,   
    filteredCategoryData: state.categoryReducer.filteredCategoryData ? state.categoryReducer.filteredCategoryData : []
})

Category.propTypes = {
    filteredCategoryData: PropTypes.array,
    valueInSearchBox: PropTypes.string,
    getCategories: PropTypes.func,
    getSearchedCategories: PropTypes.func
};


export default connect(mapStateToProps, { getCategories, getSearchBoxValue, getSearchedCategories })(Category);

//Initial code for writing test cases

import React from "react";
import { shallow } from "enzyme";
import Category from './Category.js'
// import configureMockStore from 'redux-mock-store';

function renderCourseForm(args) {

    const defaultProps = {       
        valueInSearchBox: "",     
        filteredCategoryData: [],      
        getCategories: () => { },       
        getSearchedCategories: () => { }
    };
    const props = { ...defaultProps, ...args };
    console.log("defaultProps: ", defaultProps)
    return shallow(<Category {...props} />);
}
it("renders search Box and button", () => {
    const wrapper = renderCourseForm();
    console.log(wrapper.debug());
    console.log(wrapper.find("div").length);  
});

我希望将输出显示为组件的html，但是输出如下所示，并且打印的长度为输出0。

<ContextConsumer>
    [function bound indirectRenderWrappedComponent]
</ContextConsumer>

这是使用酶编写测试用例的正确方法吗？从测试文件中，我无法导航到该组件，在导入类别组件时是否有任何错误？在我的测试代码中调试包装器时，[函数绑定indirectRenderWrappedComponent]是什么意思？

解决方案：

import React from "react";
import { mount } from "enzyme";
import { Provider } from 'react-redux';
import Category from './Category.js'
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import store from "../configureStore";

function renderCourseForm() {
    return mount(
        <Provider store={store}>
            <Category />
        </Provider>
    );
}

describe('Container', () => {
    it('Checks the text of Search button', () => {
        const wrapper = renderCourseForm();       
        expect(wrapper.find("button").text()).toBe("Search");
    });

})