How to set the width of a React component during test?

Question

I\'m trying to test a slider component.

This slider compone

Answer 1

Have you tried to set the dimension for the actual dom node first before testing it? I use Enzyme and what I normally do is create a dummy element node, attached it to the body, then mount the Component to that element. If I need to setup width and height of the element inside the component, i will just update its real DOM node width and height through vanilla javascript. I'm posting my code example below, hope it will help.

Component code that needs to be tested

getMaskComponentContent() {
    const { clientWidth, clientHeight } = this.button;
    const size = clientWidth + clientHeight;
    const lineGap = 15;
    let lines = [];

    for (let i = lineGap; i < size; i += lineGap) {
        lines.push();
    }

    return (
        
    );
}

Unit-test with enzyme

let wrapper, mountElement;

function setup(props = {}, mountOptions) {
    const providerWrapper = enzyme.mount(, mountOptions);

    wrapper = providerWrapper.find('MaskableElement');
}

beforeEach(function () {
    // Create dummy element
    mountElement = document.createElement('DIV');
    document.body.appendChild(mountElement);
});

afterEach(function () {
    mountElement.remove();
});

it('the masking svg should contain multiple line elements based on the width and height of the main button', function () {
    // First we setup the component without maskId
    setup({
        maskIds: []
    }, {
        attachTo: mountElement
    });

    const button = wrapper.find('button');
    const node = button.node;

    // then we set size to the component
    node.style.width = '300px';
    node.style.height = '30px';

    // stimulate click event to apply the mask
    button.simulate('click');

    const svg = button.find('svg');

    // 330 is the total clientWidth + clientHeight, 15 is the gap b/w lines
    const expectedNumberOfLines = (330 / 15) - 1; 

    expect(svg.find('line').length).toEqual(expectedNumberOfLines);
});