How to check the rendered element width in ReactJS / Enzyme / PhantomJS Unit test

How to check width of processed element in JS unit test reaction? I use the enzyme and PhantomJS. Here is basically what I'm looking for:

import React from 'react';
import { mount } from 'enzyme';
import EditableLabel from '../../../src/Common/EditableLabel/EditableLabel.jsx';

describe.only('./Controls/src/Common/EditableLabel/EditableLabel.jsx', () => {

    it('should resize the text box to at least the size of the label', () => {
        let wrapper = mount(<EditableLabel text={'SomeValue'} editing={true} />);
        let spanElements = wrapper.find('span.not-editing');
        let inputElements = wrapper.find('input[type="text"].editing');

        expect(inputElements.at(0).width()).to.be.at.least(spanElements.at(0).width());        
    });

});

Obviously this will result in an error. I hope something like this is possible with my current setup.

+3
source share

Source: https://habr.com/ru/post/1651694/


All Articles