title: React unit tests with Enzyme don't re-bind context of helper functions
body: <p>This is an interesting issue that I came across while trying to refactor some of my React components using AirBnB's React testing library, <a href="https://github.com/airbnb/enzyme" rel="nofollow">Enzyme</a>.</p>
  
  <p>I think the best way to explain my problem is through an example.</p>
  
  <p>Here is a small React component that will display a message depending on the props it receives from its parent component:</p>
  
  <p><strong>test.js:</strong></p>
  
  <pre><code>import React from 'react';
  
  function renderInnerSpan() {
      const {foo} = this.props;
  
      if (foo) {
          return &lt;span&gt;Foo is truthy!&lt;/span&gt;;
      }
  
      return &lt;span&gt;Foo is falsy!&lt;/span&gt;;
  }
  
  export default class extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  {renderInnerSpan.call(this)}
              &lt;/div&gt;
          );
      }    
  }
  </code></pre>
  
  <p>And here is a test suite for this component with two passing tests:</p>
  
  <p><strong>test.spec.js:</strong></p>
  
  <pre><code>import Test from '../../src/test';
  
  import React from 'react';
  import {shallow} from 'enzyme';
  import {expect} from 'chai';
  
  describe('Test Suite', () =&gt; {
      let renderedElement,
          expectedProps;
  
      function renderComponent() {
          const componentElement = React.createElement(Test, expectedProps);
  
          renderedElement = shallow(componentElement);
      }
  
      beforeEach(() =&gt; {
          expectedProps = {
              foo: true
          };
  
          renderComponent();
      });
  
      it('should display the correct message for truthy values', () =&gt; {
          const span = renderedElement.props().children;
  
          expect(span.props.children).to.equal('Foo is truthy!');
      });
  
      it('should display the correct message for falsy values', () =&gt; {
          expectedProps.foo = false;
          renderComponent();
  
          const span = renderedElement.props().children;
  
          expect(span.props.children).to.equal('Foo is falsy!');
      });
  });
  </code></pre>
  
  <p>This works fine, but the Test component's current implementation isn't as efficient as it could be.  By using <code>.call(this)</code>, it is creating a new function every time the <code>render()</code> function is called.  I could avoid this by binding the correct context of <code>this</code> in the component's constructor, like so:</p>
  
  <pre><code>export default class extends React.Component {
      constructor(props) {
          super(props);
  
          renderInnerSpan = renderInnerSpan.bind(this);
      }
  
      render() {
          return (
              &lt;div&gt;
                  {renderInnerSpan()}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>After this change, the component still works as intended, but the tests start failing:</p>
  
  <pre><code>AssertionError: expected 'Foo is truthy!' to equal 'Foo is falsy!'
  Expected :Foo is falsy!
  Actual   :Foo is truthy!
  </code></pre>
  
  <p>I added a <code>console.log(props.foo)</code> in the constructor, which confirmed that the constructor was still being called when I expected it to, and the props it's receiving are correct.  However, I added a <code>console.log(foo)</code> inside of <code>renderInnerSpan</code>, and it looks like the value is true all the time, even after re-rendering the component with its <code>foo</code> prop explicitly set to <code>false</code>.</p>
  
  <p>It looks like <code>renderInnerSpan</code> is only be bound once, and Enzyme is re-using this for every single test.  So, what gives?  I'm re-creating my component in the test, which is calling its constructor with the values I expect - why is my bound <code>renderInnerSpan</code> function continuing to use old values?</p>
  
  <p>Thanks in advance for the help.</p>