title: Jest not auto mocking common js modules
body: <p>I am trying to wrap my head around testing Flux and React applications using Jest.</p>
  
  <p>I started using <a href="https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux" rel="nofollow">Scotch.io tutorial</a> as my starting point and will be creating a full test suite to gain knowledge in how to structure my first real react and flux app.</p>
  
  <p>You can <a href="https://github.com/resonantbreath/react-flux-shopping-cart/tree/master/hello" rel="nofollow">find my code on github</a> to see where I am at.</p>
  
  <p>The test that does not run is <a href="https://github.com/resonantbreath/react-flux-shopping-cart/blob/master/hello/app/assets/javascripts/components/__tests__/FluxProduct-test.jsx" rel="nofollow">FluxProduct-test.jsx</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jest.dontMock('../FluxProduct');
  
  var React
    , TestUtils
    , FluxProduct
    , FluxCartActions;
  
  describe('FluxProduct', function() {
  
  
    var SAMPLE = {
      product: {
        id: '1',
        name: 'Name',
        image: 'image.png',
        description: 'this description',
        variants: [
          {
            sku: '123',
            type: 'First',
            price: 1.99,
            inventory: 1
          },
          {
            sku: '456',
            type: 'Second',
            price: 2.99,
            inventory: 3
          },
          {
            sku: '789',
            type: 'Third',
            price: 3.99,
            inventory: 2
          }
        ]
      },
    };
  
  
    function getElement(product, className)
    {
      return product.getDOMNode().getElementsByClassName(className)[0];
    }
  
    function getElementByTag(product, tagName)
    {
      return product.getDOMNode().getElementsByTagName(tagName)[0];
    }
  
    function selectIsActive(select, text)
    {
      for( var i = 0; i &lt; select.options.length; i++)
      {
        if (select.options[i].textContent == text)
        {
          return true
        }
      }
      return false;
    }
  
    beforeEach(function(){
      React = require('react/addons')
      , TestUtils = React.addons.TestUtils
      , FluxProduct = require('../FluxProduct')
      , FluxCartActions = require('../../actions/FluxCartActions');
    });
  
    it('should have the display all of the fields', function() {
      var cartItems = [];
      var selected = SAMPLE.product.variants[1];
      var product = TestUtils.renderIntoDocument(
        &lt;FluxProduct selected={selected} product={SAMPLE.product} cartitems={cartItems} /&gt;
      );
  
      expect(getElement(product, 'name').textContent).toEqual(SAMPLE.product.name);
      expect(getElement(product, 'description').textContent).toEqual(SAMPLE.product.description);
      expect(getElement(product, 'price').textContent).toEqual('Price: $' + selected.price);
      expect(selectIsActive(getElementByTag(product, 'select'), selected.type)).toEqual(true);
    });
  
    it('should allow to add another variant', function() {
      var cartItems = [];
      var selected = SAMPLE.product.variants[1];
      var targetVariantIndex = 2;
      var targetVariant = SAMPLE.product.variants[targetVariantIndex];
      var product = TestUtils.renderIntoDocument(
        &lt;FluxProduct selected={selected} product={SAMPLE.product} cartitems={cartItems} /&gt;
      );
      var selectElement = getElementByTag(product, 'select');
      var addToCartBtn = getElementByTag(product, 'select');
  
      TestUtils.Simulate.change(selectElement, { target: { value: targetVariantIndex } });
  
      expect(selectIsActive(selectElement, targetVariant.type)).toEqual(true);
  
      TestUtils.Simulate.click(addToCartBtn);
  
      expect(FluxCartActions.addToCart.mock.calls.length).toBe(1);
      expect(FluxCartActions.addToCart.mock.calls[0][0]).toBe(targetVariant.sku);
      expect(FluxCartActions.addToCart.mock.calls[0][0]).toBe({
        name: targetVariant.name,
        type: targetVariant.type,
        price: targetVariant.price
      });
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>It comes back with "TypeError: Cannot read property 'calls' of undefined" on line 100.</p>
  
  <p>When I log out FluxActions it seems that it is not being automocked, which is the reason mock is undefined and accessing the calls property is throwing the error.</p>
  
  <p>fyi: Jest requires Node 0.10, does not run on 0.12</p>
  
  <p>Helpful reference files:</p>
  
  <p><a href="https://github.com/resonantbreath/react-flux-shopping-cart/blob/master/hello/app/assets/javascripts/components/FluxProduct.js" rel="nofollow">FluxProduct.jsx</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var React = require('react');
  var FluxCartActions = require('../actions/FluxCartActions');
  
  // Flux product view
  var FluxProduct = React.createClass({
  
    // Add item to cart via Actions
    addToCart: function(event){
      var sku = this.props.selected.sku;
      var update = {
        name: this.props.product.name,
        type: this.props.selected.type,
        price: this.props.selected.price
      }
      FluxCartActions.addToCart(sku, update);
      FluxCartActions.updateCartVisible(true);
    },
  
    // Select product variation via Actions
    selectVariant: function(event){
      FluxCartActions.selectProduct(event.target.value);
    },
  
    // Render product View
    render: function() {
      var ats = (this.props.selected.sku in this.props.cartitems) ?
        this.props.selected.inventory - this.props.cartitems[this.props.selected.sku].quantity :
        this.props.selected.inventory;
      return (
        &lt;div className="flux-product"&gt;
          &lt;img src={'assets/' + this.props.product.image}/&gt;
          &lt;div className="flux-product-detail"&gt;
            &lt;h1 className="name"&gt;{this.props.product.name}&lt;/h1&gt;
            &lt;p className="description"&gt;{this.props.product.description}&lt;/p&gt;
            &lt;p className="price"&gt;Price: ${this.props.selected.price}&lt;/p&gt;
            &lt;select onChange={this.selectVariant}&gt;
              {this.props.product.variants.map(function(variant, index){
                return (
                  &lt;option key={index} value={index}&gt;{variant.type}&lt;/option&gt;
                )
              })}
            &lt;/select&gt;
            &lt;button type="button" onClick={this.addToCart} disabled={ats  &gt; 0 ? '' : 'disabled'}&gt;
              {ats &gt; 0 ? 'Add To Cart' : 'Sold Out'}
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    },
  
  });
  
  module.exports = FluxProduct;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://github.com/resonantbreath/react-flux-shopping-cart/blob/master/hello/app/assets/javascripts/actions/FluxCartActions.js" rel="nofollow">FluxCartActions.js</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var AppDispatcher = require('../dispatcher/AppDispatcher');
  var FluxCartConstants = require('../constants/FluxCartConstants');
  
  // Define action methods
  var FluxCartActions = {
  
    // Receive inital product data
    receiveProduct: function(data) {
      AppDispatcher.handleAction({
        actionType: FluxCartConstants.RECEIVE_DATA,
        data: data
      })
    },
  
    // Set currently selected product variation
    selectProduct: function(index) {
      AppDispatcher.handleAction({
        actionType: FluxCartConstants.SELECT_PRODUCT,
        data: index
      })
    },
  
    // Add item to cart
    addToCart: function(sku, update) {
      AppDispatcher.handleAction({
        actionType: FluxCartConstants.CART_ADD,
        sku: sku,
        update: update
      })
    },
  
    // Remove item from cart
    removeFromCart: function(sku) {
      AppDispatcher.handleAction({
        actionType: FluxCartConstants.CART_REMOVE,
        sku: sku
      })
    },
  
    // Update cart visibility status
    updateCartVisible: function(cartVisible) {
      AppDispatcher.handleAction({
        actionType: FluxCartConstants.CART_VISIBLE,
        cartVisible: cartVisible
      })
    }
  
  };
  
  module.exports = FluxCartActions;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my package.json file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "flux-pricing",
    "version": "0.0.1",
    "description": "Pricing component with flux",
    "main": "app/assets/javascripts/cart.js",
    "dependencies": {
      "flux": "^2.0.0",
      "react": "^0.12.0",
      "underscore": "^1.7.0"
    },
    "devDependencies": {
      "browserify": "~&gt;6.3.0",
      "envify": "~3.0.0",
      "jest-cli": "^0.4.0",
      "react-tools": "^0.12.2",
      "reactify": "^1.0",
      "watchify": "~2.1.0"
    },
    "scripts": {
      "start": "watchify -o app/assets/javascripts/app.js -v -d .",
      "build": "browserify . | uglifyjs -cm &gt; app/assets/javascripts/app.min.js",
      "test": "jest"
    },
    "jest": {
      "rootDir": "app/assets/javascripts",
      "scriptPreprocessor": "&lt;rootDir&gt;/__tests__/preprocessor.js",
      "testFileExtensions": [
        "js",
        "jsx"
      ],
      "unmockedModulePathPatterns": ["react"],
      "testPathIgnorePatterns": [
        "preprocessor.js",
        "node_modules"
      ]
    },
    "browserify": {
      "transform": [
        "reactify",
        "envify"
      ]
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I run tests by running <code>npm test</code> in the app directory.</p>