javascript - 如何在 reactjs 应用程序中找到带有酶的元素?
问题描述
在我的反应应用程序中,我有一个带有几个选择的容器组件:
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>
);
}
}
这些是选择组件:
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
如何选择第二个列表框?顺便说一句,我对其他测试框架持开放态度。
解决方案
尝试
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)
});
});
推荐阅读
- java - 将数组移动到不同的类
- python - 在列表理解中编写长 if 语句的 Pythonic 方法
- python - 如何访问 NetworkX 中节点的第一个邻居?
- javascript - 在事件监听器中执行函数失败
- python - 将变量传递给表单操作
- python - 循环遍历多个 txt 文件并计算 Python 中所选单词的频率
- python - Python Dash - 来自另一个文件的回调值
- rest - Spring REST 应用程序中的存储库
- python - 如何随机获取 numpy 数组的一定数量的元素,每个类至少有一个元素?
- python - 在 Pandas 中有效地合并两个数据框的列和行