title: Testing data within table component in React using Enzyme
body: <p>I have a basic HTML Table that renders some input data from Redux. I want to test to see that Object 1 renders properly in <code>&lt;tr&gt;&lt;/tr&gt;</code> 1, Object 2 renders properly in <code>&lt;tr&gt;&lt;/tr&gt;</code> 2, etc. </p>
  
  <h1>Table Component</h1>
  
  <pre><code>import React, { PropTypes } from 'react';
  
  let getBudgetItems = (budgets) =&gt; {
    return budgets.map((budget, key) =&gt; {
      return (
        &lt;tr className = "add-budget-table-row" key={"budget_item_" + key}&gt;
          &lt;td&gt;{budget.budgetCategory}&lt;/td&gt;
          &lt;td&gt;${budget.budgetCost}&lt;/td&gt;
          &lt;td&gt;{budget.budgetDate}&lt;/td&gt;
          &lt;td&gt;&lt;button className="btn btn-primary"&gt;Edit Budget&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      );
    });
  };
  
  const RenderBudgetTable = ({ budgets }) =&gt; {
    return (
      &lt;div className="table-responsive"&gt;
          &lt;table className="table table-hover add-budget-table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Budget Name&lt;/th&gt;
                  &lt;th&gt;Monthly Cost&lt;/th&gt;
                  &lt;th&gt;Due Date&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {getBudgetItems(budgets)}
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
    );
  };
  
  RenderBudgetTable.propTypes = {
    budgets : PropTypes.array
  };
  
  export default RenderBudgetTable;
  </code></pre>
  
  <h1>Test</h1>
  
  <pre><code>describe("Budget data from redux store renders into form on budget edit page", () =&gt; {
    let simulatedBudgets = [ expectedBudget_1, expectedBudget_2 ];
    let wrapper = setupMount(null, simulatedBudgets);
  
    it("Renders a valid bootstrap table", () =&gt; {
      expect(wrapper.find('.add-budget-table').length).toBe(1);
    });
  
    it("Renders two different budget items into the table", () =&gt; {
      expect(wrapper.find('.add-budget-table-row').length).toEqual(2);
      console.log(wrapper.find('.add-budget-table-row').nodes[0].HTMLTableRowElement);
    });
  </code></pre>
  
  <p>Obviously, getting by node index isn't favorable and also isn't working. The length for the table is working, since I have an arbitrary className attached to each row instance. </p>