Question

我正在学习Enzyme，而且我已经开始为团队编写的应用程序编写一些测试。我正在尝试模拟单击元素。该应用程序基本上有一个列表，每当你点击它时，（一个图像）出现一个复选标记。如果再次单击，（图像）将不显示复选标记。应用程序通过在单击元素时更改状态来执行此操作，然后确定要呈现的图像。

它适用于实际应用，但不知何故酶失败。关于酶，我有什么遗漏吗？

下面是一些简化的代码。这是班级：

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>

点击后这种情况永远不会改变。

Answer 1

我弄明白了这个问题。是因为我没有将事件处理程序传递给模拟。

我不得不将其更改为：

recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click', {target: {name: 0}});

模拟Div点击Enzyme和React

1 个答案: