samedi 16 septembre 2017

Find element with Enzyme in nested React component

I am trying to write a for my component TestComponent that ensures the callback is fired when the user clicks on a button. However, the button is not found (though I can see it in the HTML by calling console.log(wrapper.html()).

The button is inside another component that is used within TestComponent, if that matters.

Here is my test:

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import TestComponent from './test-component.jsx';

describe('<TestComponent/>', () => {
  it('clicking "continue" button fires the callback', () => {
    const onClickContinue = sinon.spy();
    const wrapper = shallow(<TestComponent />);
    console.log(wrapper.find('.btn-primary').length); // 0
    console.log(wrapper.html());                      // does have `.btn-primary`

    // wrapper.find('.btn-primary').simulate('click');
    // expect(onClickContinue.calledOnce).toBe(true);
  });
});

What am I doing wrong? Thank you.

Aucun commentaire:

Enregistrer un commentaire