我正在学习 Enzyme,并且我已经开始对一个团队编写的应用程序编写一些测试。我正在尝试模拟单击元素。该应用程序基本上有一个列表,每当您单击它时,(的图像)就会出现一个复选标记。如果再次单击,则不会出现(的图像)复选标记。应用程序通过在您单击元素时更改状态来完成此操作,然后确定要呈现的图像。
它适用于实际应用程序,但不知何故 enzyme 失败了。关于 enzyme ,我有什么遗漏吗?
下面是一些简化的代码。这是类(class):
class RecipeInfo extends Component {
constructor(props) {
super(props);
this.state = {};
this.doneClick = this.doneClick.bind(this);
}
doneClick(event) {
let index = event.target.name;
let state = {};
state[index] = !this.state[index];
this.setState(state)
}
renderIngredients(ingredients) {
let quantities = ingredients.quantity;
let lines = [];
for(let i = 0; i < quantities.length; i++){
lines.push(
<div className='flex-body-ingredients' key={i}>
<div onClick={this.doneClick} id={i} >
{this.state[i] ?
(<img className='empty-check' src="/assets/success.png" alt="success" name={i} />)
: (<img className='empty-check' src="/assets/oval.png" name={i} alt="oval" />)}
</div>
</div>
)
}
return lines.map((line) => line)
}
render() {
return (
{this.renderIngredients(ingredients)}
)
}
}
function mapStateToProps(state) {
return {
recipe: state.recipes.selectedRecipe
}
}
export default connect(mapStateToProps, actions)(RecipeInfo);
下面是我刚刚写的测试:
describe('Recipe Info', () => {
const recipeInfo = mount(<Provider store={createRecipeStore}><RecipeInfo/></Provider>);
it('shows a click and then hides the click when clicking an ingredient', () => {
const notChecked = recipeInfo.find('[alt="oval"]').first();
expect(notChecked).toBeDefined();
recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click');
const checked = recipeInfo.find('[alt="success"]').first();
expect(checked).toBeDefined();
});
});
当我运行测试并控制台记录元素时,我看到以下内容:
<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div>
这在点击后永远不会改变。
最佳答案
我解决了这个问题。这是因为我没有将事件处理程序传递到模拟中。
我不得不将其更改为:
recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click', {target: {name: 0}});
关于javascript - 模拟 Div 单击 enzyme 和 react ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43566125/