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

Question

In my react app I have a Container component with a couple of selects:

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

These are the 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;

In my jest unit test I want to test the visibility of the second select(depending on the selected value for the 1st select):

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

The issue is that I cannot find the element with this statement:

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

This is the result of the test:

 Container component › should show the second select component

    expect(received).toEqual(expected)

    Expected: 1
    Received: 0

How to select the second listbox? Btw I am open to other test frameworks.

Answer 1

Try

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