使用Enzyme

Question

我有一个基本的HTML表格，可以从Redux中呈现一些输入数据。我想测试看到对象1在<tr></tr> 1中正确呈现，对象2在<tr></tr> 2中正确呈现，等等。

表组件

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;

测试

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);
  });

显然，逐节点索引并不是有利的，也是不行的。表的长度是有效的，因为我有一个任意className附加到每个行实例。

Answer 1

这应该适合你的情况!!

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)