Testing data within table component in React using Enzyme

Question

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 <tr></tr> 1, Object 2 renders properly in <tr></tr> 2, etc.

Table Component

import React, { PropTypes } from 'react';

let getBudgetItems = (budgets) => {
  return budgets.map((budget, key) => {
    return (
      <tr className = "add-budget-table-row" key={"budget_item_" + key}>
        <td>{budget.budgetCategory}</td>
        <td>${budget.budgetCost}</td>
        <td>{budget.budgetDate}</td>
        <td><button className="btn btn-primary">Edit Budget</button></td>
      </tr>
    );
  });
};

const RenderBudgetTable = ({ budgets }) => {
  return (
    <div className="table-responsive">
        <table className="table table-hover add-budget-table">
            <thead>
              <tr>
                <th>Budget Name</th>
                <th>Monthly Cost</th>
                <th>Due Date</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {getBudgetItems(budgets)}
            </tbody>
        </table>
    </div>
  );
};

RenderBudgetTable.propTypes = {
  budgets : PropTypes.array
};

export default RenderBudgetTable;

Test

describe("Budget data from redux store renders into form on budget edit page", () => {
  let simulatedBudgets = [ expectedBudget_1, expectedBudget_2 ];
  let wrapper = setupMount(null, simulatedBudgets);

  it("Renders a valid bootstrap table", () => {
    expect(wrapper.find('.add-budget-table').length).toBe(1);
  });

  it("Renders two different budget items into the table", () => {
    expect(wrapper.find('.add-budget-table-row').length).toEqual(2);
    console.log(wrapper.find('.add-budget-table-row').nodes[0].HTMLTableRowElement);
  });

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.

Shruti Singh · Accepted Answer · 2018-01-17 20:08:59Z

5

This should work in your case!!

const rows = wrapper.find('.add-budget-table-row')
      expect(rows.length).to.eql(2)

      const firstRowColumns = rows.first().find('td').map(column => column.text())
      expect(firstRowColumns.length).to.eql(4)// since you have 4 td
      expect(firstRowColumns[0]).to.eql('BudgetCategoryName')
      expect(firstRowColumns[1]).to.eql(20)
      expect(firstRowColumns[2]).to.eql(someDate1)

const SecondRowColumns = rows.last().find('td').map(column => column.text())
      expect(firstRowColumns.length).to.eql(4)// since you have 4 td
      expect(firstRowColumns[0]).to.eql('BudgetCategoryName2')
      expect(firstRowColumns[1]).to.eql(30)
      expect(firstRowColumns[2]).to.eql(someDate2)

edited Jan 17, 2018 at 20:08

answered Jan 17, 2018 at 19:59

Shruti Singh

1811 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vichsu Over a year ago

So helpful! Table assertion is always tough to write. Thanks a lot!

Collectives™ on Stack Overflow

Testing data within table component in React using Enzyme

Table Component

Test

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Table Component

Test

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related