I'm learning Enzyme, and I've been starting to write some tests on an application a team has written. I'm attempting to simulate clicking an element. The application basically have a list, and whenever you click on it, (an image of) a check-mark appears. If you click again, (an image of) no check mark appears. The application does this by changing the state whenever you click the element, which then determines which image to render.

It works on the actual application, but somehow Enzyme is failing. Is there something I'm missing with respect to Enzyme?

Below is some simplified code. Here is the 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);

And below is the test I just wrote:

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

});

When I run the test, and I console log the element, I see the following:

<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div>

This never changes after the click.

I'm learning Enzyme, and I've been starting to write some tests on an application a team has written. I'm attempting to simulate clicking an element. The application basically have a list, and whenever you click on it, (an image of) a check-mark appears. If you click again, (an image of) no check mark appears. The application does this by changing the state whenever you click the element, which then determines which image to render.

It works on the actual application, but somehow Enzyme is failing. Is there something I'm missing with respect to Enzyme?

Below is some simplified code. Here is the 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);

And below is the test I just wrote:

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

});

When I run the test, and I console log the element, I see the following:

<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div>

This never changes after the click.

• javascript
• reactjs
• testing
• redux
• enzyme

1 Answer 1

I figured out the problem. It was that I wasn't passing an event handler into the simulation.

I had to change it to:

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