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

Share Improve this question Follow edited Apr 23, 2017 at 0:48 Hadoren asked Apr 23, 2017 at 0:31 HadorenHadoren 16511 gold badge22 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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