Как проверить, как родитель передает «это» детям, используя фермент

Question

У меня есть код ниже, где Parent Компонент передает его this в Child Компонент.Child Компонент выполнит некоторую работу, а затем выполнит setState в Parent Компоненте.

Как мне провести тестирование только дочернего компонента.Означает, как я могу создать фиктивную Parent, а затем проверить значение в его состоянии, используя enzyme & jest.

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            status: '',
        }
    }
    render(){
        return (
            <div>
                <Child 
                    parentThis={this}
                />
            </div>
        );
    }
}

class Child extends React.Component {

    doSomeWork = () => {
        const {parentThis} = this.props;
        parentThis.setState({
            'status': '1'
        })
    }

    render() {
        this.doSomeWork()
        return (<div></div>);
    }
}

Я хочу провести модульное тестирование Child компонента.Я хочу убедиться, что Child правильно обновляет state компонента Parent.

Answer 1

Ну

У меня есть код ниже, где родительский компонент передает это потомку Составная часть. Дочерний компонент выполнит некоторую работу, а затем сделает setState в Родительский компонент.

Не делай этого. Это никогда не является хорошим шаблоном для тестирования - и ни один хороший шаблон в React.

React позволяет передавать функции компонентам, в вашем случае - обратному вызову. Поэтому вместо передачи this передайте функцию onChangeStatus. Полный пример может выглядеть следующим образом:

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            status: '',
        }
    }
    render(){
        return (
            <div>
                <Child onChangeStatus={(status) => this.setState({status})}
                       status={this.state.status}
                />
            </div>
        );
    }
}

class Child extends React.Component {

    doSomeWork = () => {
        const {onChangeStatus} = this.props;
        onChangeStatus({
            status: '1'
        })
    }

    render() {
        this.doSomeWork()
        return (<div></div>);
    }
}

Чтобы проверить это, просто проверьте, вызывается ли функция, которую вы передаете ребенку. Я редко использую энзим, но эта статья выглядит многообещающе, как протестировать функцию.