jeudi 20 octobre 2016

Sinon Spying on a Redux Connected React Component

I have a small react-redux widget(app). I want to write some tests of my connected component. It's a pretty simple component that fetches some data and displays it in a table with pagination links. I want to spy on the handlePageChange method of the connected component. I'm using sinon in a chai-enzyme-mocha clusterf***. Here's the describe from my test:

describe('', function() {

context('Given some data', function(){

    beforeEach(function(){
        nock(TEST_STATE.runState.base_url)
        .get('/api/runlist')
        .query(true)
        .reply(200, runs);

        this.pageSpy = sinon.spy(RunsByTags, 'handlePageChange');
        console.log(this.pageSpy);

        this.store = mockStore(TEST_STATE);
        this.wrapper = mount(
            <Provider store={this.store}>
                <RunsByTags />
            </Provider>
        );
    });

    it('run table should have 10 rows', function(){
        expect(
            this.wrapper.find('tbody > tr')
        ).to.have.length(10);
    });

    it('clicking a new page should set an offset', function(done){
        this.wrapper.find('.page-link').at(1).simulate('click');

        // wrapper doesn't tack callbacks or return a promise so we have to
        // use setTimeout to help make sure the async functions have returned.
        setTimeout(() => {
            expect(
                this.store.getActions()
            ).to.contain({type: 'SET_OFFSET', offset: 10})

            assert(this.pageSpy.calledOnce);
            done();
        },25);

    });
});

If I do this I get the error:

TypeError: Attempted to wrap undefined property handlePageChange as function

on the line:

this.pageSpy = sinon.spy(RunsByTags, 'handlePageChange');

I assume this is because RunsByTags is a connected component and therefore wrapped by the connect function from redux, so it doesn't actually have a handlePageChange function. I can export the unconnected component, but then I won't be able to make assertions about the store. I'd really rather be able to spy on this function from the connected component.

Any suggestions?

Aucun commentaire:

Enregistrer un commentaire