如何在reactjs應用程序中用酶找到元素？

Question

在我的react應用程序中，我有一個帶有兩個選擇的Container組件：

import React, { Component } from "react";
import DebtType from "./DebtType";
import mockOptions from "./mockData.json";
import ClearDebtType from "./ClearDebt";
import { reduxForm, formValueSelector, Field } from "redux-form";
import { connect } from "react-redux";

 export class MyContainer extends Component {
  handleChangeDebtType = event => {
    console.log("handleChangeDebtType value", event.target.value);
    this.props.change("debtType", event.target.value);
    if (event.target.value === "4" || event.target.value === "5") {
      this.props.change("newLimit", 0);
    }
    if (
      event.target.value === "0" ||
      event.target.value === "3" ||
      event.target.value === "7"
    ) {
      this.props.change("newLimit", this.props.currentLimit);
    }

    if (
      event.target.value === "1" ||
      event.target.value === "2" ||
      event.target.value === "6"
    ) {
      this.props.change("newLimit", "");
    }
  };

  render() {
  const { debtType, newLimit } = this.props;

    return (
      <div>
        <DebtType
          options={mockOptions.DEBT_TYPE}
          handleChangeDebtType={this.handleChangeDebtType}
        />

        {(debtType === "1" || debtType === "2") && (
          <ClearDebtType options={mockOptions.CLEARDEBT_TYPE} />
        )}


      </div>
    );
  }
}

這些是selectcomponents：

import React from "react";

const ClearDebt = ( options) => {
console.log(options)
  return (
    <select>
      {options.options.map(option => {
        return <option>{option.label}</option>;
      })}
    </select>
  );
};

export default ClearDebt;

import React from "react";

const DebtType = ({options, handleChangeDebtType}) => {
  console.log(options);

  return (
    <select onChange={handleChangeDebtType}>
      {options.map(option => {
        return <option value={option.value}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

在我的笑話單元測試中，我想測試第二個選擇的可見性（取決於第一個選擇的選擇值）：

describe('Container component', () => {
    it('should show the second select component', () => {
        const myComp = shallow(<MyContainer debtType={"1"}/>);
        //question: how can I find the second select in the browser?
        //https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
        const result = myComp.find('#root > div > div > select:nth-child(2)')   
        console.log('result',result.length)
        expect(result.length ).toEqual(1)
    });
  });

問題是我無法通過以下語句找到該元素：

 const result = myComp.find('#root > div > div > select:nth-child(2)')  

這是測試的結果：

 Container component › should show the second select component

    expect(received).toEqual(expected)

    Expected: 1
    Received: 0

如何選擇第二個列表框？ 順便說一句，我願意接受其他測試框架。

Answer 1

嘗試

import React from "react";
import { shallow, configure } from "enzyme";
import { MyContainer } from "./Container";
import Adapter from "enzyme-adapter-react-16";
import ClearDebt from "./ClearDebt";
configure({ adapter: new Adapter() });

describe("Container component", () => {
it("should show the second select component", () => {
  const myComp = shallow(<MyContainer debtType={"1"} />);
  //question: how can I find the second select in the browser?
  //https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
  const result = myComp.find(ClearDebt);
  console.log("result", result.props().options.length);
  expect(result.props().options.length).toBe(2)
 });
});