Как записать контрольные примеры, используя шутки и энзимы для подключенных компонентов, в мой магазин приставок? - PullRequest
Новая
       21

Как записать контрольные примеры, используя шутки и энзимы для подключенных компонентов, в мой магазин приставок?

1 голос
/ 13 июня 2019

Я хочу написать контрольные примеры с использованием jest, энзима для моего реактивного компонента, который связан с хранилищем редуксов.Тестовый пример просто проверяет, есть ли какой-либо тег "div" в компоненте или нет.Я создал компонент класса и подключил его к хранилищу редуксов.

Я попытался написать простой тестовый пример, который должен регистрировать html-компонент, используя wrapper.debug ().

// Компонент категории 

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>

Это правильный способ написания тестовых случаев с использованием фермента?Я не могу перейти к компоненту из тестового файла, есть ли ошибка при импорте компонента категории?Что означает [функция, связанная с параметромirectRenderWrappedComponent], при отладке оболочки в моем тестовом коде?

Решение: 

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");
    });

})
...