Как я могу проверить с помощью метода Enzyme + Mocha внутри компонента

Question

Не могу понять, как проверить компонентный метод с помощью энзима + мокко + синона.Я хочу проверить, вызывает ли компонент метод loadPosts при нажатии кнопки.

import React from 'react';
import { configure, mount} from 'enzyme';
import { expect } from 'chai';
import Adapter from 'enzyme-adapter-react-16';
import { Posts } from '../Components/Posts';
import sinon from 'sinon';
configure({ adapter: new Adapter() });

describe('Posts', () => {

    let wrapper;
    let inst;

    beforeEach(() => {
        wrapper = mount(<Posts />);
        inst = wrapper.instance();
        sinon.spy(inst, 'loadPosts');
        wrapper.find('button').simulate('click');
    });

    it('should load posts on button click', () => {
        wrapper.update();
        expect(inst.loadPosts).to.have.property('callCount', 1);
    });

    it('should set `loading` to true', () => {
        expect(wrapper.state('loading')).to.equal(true);
    });
});

А вот мой компонент:

import React, {Component} from 'react';
import axios from 'axios';

export class Posts extends Component {
    
    state = {
        posts: null,
        loading: false
    }

    componentDidMount() {}

    loadPosts = () => {
        this.setState({loading: true}, () => {
            axios.get('https://jsonplaceholder.typicode.com/todos')
            .then( d => this.setState({
                posts: d.data
            }));    
        });
    }

    render() {
        return (<div>
                <h4>I am posts</h4>
                <button onClick= {this.loadPosts}>Load posts</button>
            </div>);
    }
    
}

Но мой тест завершается неудачно с ошибкой: Ошибка исключения: ожидалось, что [Function] будет иметь свойство 'callCount', равное 1, но получит 0

Answer 1

onClick вашего button напрямую связывается с тем, что this.loadPosts находится при рендеринге компонента.

Когда вы заменяете loadPosts на шпиона, это никак не влияет на визуализированный в данный момент button, поэтому onClick не вызывает вашего шпиона.

---

Два способа исправить это - вызвать this.loadPosts с помощью функции со стрелкой, подобной этой:

<button onClick={() => this.loadPosts()}>Load posts</button>

... так что когда вызывается onClick, он вызывает все, что this.loadPosts в данный момент установлено.

Другим вариантом является принудительное повторное рендеринг после создания вашего шпиона, чтобы onClick связывался с вашим шпионом вместо исходной функции.