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