使用酶在React中的表组件中测试数据

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)