title: How to set the width of a React component during test?
body: <p>I'm trying to test a slider component. 
  <img src="https://www.dropbox.com/s/otz0bcaglc2yp5w/Screenshot%202015-10-24%2020.33.51.png?dl=1" alt=""></p>
  
  <p>This slider component can be variable in width. When you click on the "track" of the slider it should change the value and trigger an <code>onChange</code> callback. The value is a based on where you click on the track. If you click the halfway point when the min value is <strong>100</strong> and the max value is <strong>200</strong>, then it should report a value of <strong>150</strong>.</p>
  
  <p>The problem I'm running into is that when I render the component using <code>ReactTest.renderIntoDocument</code> the component doesn't have any width, so it can't calculate a new value when you click on it. </p>
  
  <h2>Here is the component <code>Slider.js</code></h2>
  
  <pre><code>import React, {PropTypes} from 'react';
  import ReactDOM from 'react-dom';
  import { noop } from 'lodash';
  import style from './style.scss';
  
  export default class Slider extends React.Component {
    render() {
      return (
        &lt;div
          className='Slider'
          onClick={this.handleClick.bind(this)}
          {...this.props}
        &gt;
          &lt;div
            className='handle'
            style={{left: `${this.calculateLeft()}%`}}&gt;
          &lt;/div&gt;
          &lt;div className='track'&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    handleClick(e) {
      let node = ReactDOM.findDOMNode(this);
      let {clientX, clientY} = e;
      let {offsetLeft, offsetWidth, clientWidth} = node;
      let xPercent = (clientX - offsetLeft) / offsetWidth;
      console.log(offsetLeft, offsetWidth, clientWidth, xPercent);
      this.props.onChange(normalize(xPercent, this.props.min, this.props.max));
    }
  
    calculateLeft() {
      let numerator = this.props.value - this.props.min;
      let denominator = this.props.max - this.props.min;
      return numerator / denominator * 100;
    }
  }
  
  // Proptypes
  // ----------------------------------------------------------------------------
  Slider.propTypes = {
    // Callback for when the value changes.
    onChange: PropTypes.func,
    // The value for when the slider is at 0%
    min: PropTypes.number,
    // The value for when the slider is at 100%
    max: PropTypes.number,
    // The starting value
    value: validateValue,
  }
  
  Slider.defaultProps = {
    onChange: noop,
    min: 0,
    max: 100,
  }
  
  // Custom Validation
  // ----------------------------------------------------------------------------
  function validateValue(props, propName, componentName) {
    let value = props[propName];
  
    if (typeof(value) !== 'number') {
      return new Error(`value must be a number, got ${typeof(value)}`);
    }
  
    if (value &gt; props.max || value &lt; props.min) {
      return new Error(
        `value: ${value} must be between max: ${props.max}
        and min: ${props.min}`
      );
    }
  }
  
  // Helpers
  // ---------------------------------------------------------------------------
  
  function normalize(floatValue, min, max) {
    let range = max - min;
    let normalizedValue = floatValue * range + min;
    // cleverly restrict the value be between the min and max
    return [min, normalizedValue, max].sort()[1];
  }
  </code></pre>
  
  <h2>Stylesheet (<code>style.scss</code>):</h2>
  
  <pre><code>.Slider {
    position: relative;
    display: block;
    width: 100px;
  
    .track {
      height: 4px;
      background: #666;
      border-radius: 2px;
    }
  
    .handle {
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: left 100ms linear;
    }
  }
  </code></pre>
  
  <h2>Here is my test:</h2>
  
  <pre><code>import Slider from './Slider';
  import React from 'react';
  import {
    renderIntoDocument,
    findRenderedDOMComponentWithClass,
    findRenderedDOMComponentWithTag,
    Simulate
  } from 'react-addons-test-utils';
  
  describe('Slider', function() {
  
    describe('click', function() {
      it('triggers the onChange callback', function() {
        const onChange = sinon.spy();
        const component = renderIntoDocument(
          &lt;Slider
            style={{width: 100, height: 40}}
            min={100}
            max={200}
            value={150}
            onChange={onChange}
          /&gt;
        );
  
        const track = findRenderedDOMComponentWithClass(component, 'track');
  
        Simulate.click(track, {clientY: 0, clientX: 10})
        expect(onChange).to.have.been.calledWith(110);
      });
    });
  });
  </code></pre>
  
  <h2>Test output</h2>
  
  <pre><code>LOG LOG: 0, 0, 0, Infinity
  click
    ✗ triggers the onChange callback
  AssertionError: expected onChange to have been called with arguments 10
      onChange(200)
  
      at /components/Slider/test.js:99 &lt; webpack:///src/components/Slider/test.js:55:6
  </code></pre>
  
  <p>Those log statements are from the <code>handleClick()</code> function in the component.</p>
  
  <p>The width is zero so the denominator ends up being zero when calculating xPercent, which causes it to be Infinity. This causes it to just use the <code>max</code> value of 200.</p>
  
  <h2>TLDR</h2>
  
  <p>How do I make the component have width when rendering it during a test?</p>