web-dev-qa-db-fra.com

React.js - Simuler un clic avec Enzyme

J'ai cette application React.js qui est une simple application Cart. https://codesandbox.io/s/znvk4p70xl

Le problème est que j'essaie de tester l'unité l'état de l'application en utilisant Jest et Enzyme mais cela ne semble pas fonctionner. Voici mon Todo.test.js Test de l'unité:

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

test('Test it', async () => {
  // Render a checkbox with label in the document
  const cart = [
    { name: 'Green', cost: 4 },
    { name: 'Red', cost: 8 },
    { name: 'Blue', cost: 14 }
  ];

  const wrapper = mount(<Todo cart={cart} />);
  const firstInput = wrapper.find('.name');
  firstInput.simulate('change', { target: { value: 'Pink' } });

  const firstCost = wrapper.find('.cost');
  firstCost.simulate('change', { target: { value: 200 } });

  const submitButton = wrapper.find('.addtocart');
  submitButton.simulate('click');

  wrapper.update();

  expect(wrapper.state('price')).toBe(26);

  console.log(wrapper.state());
  console.log(wrapper.props().cart);

});

Lorsque j'exécute le test, le panier dit toujours la même chose lorsque l'élément Pink aurait dû être ajouté.

Comment cela peut-il être lorsque j'ai simulé un clic de bouton sur la méthode addToCart?

 PASS  src/__tests__/todo.test.js
  ● Console
    console.log src/__tests__/todo.test.js:32      { price: 26 }    
console.log src/__tests__/todo.test.js:33      [ { name: 'Green', cost: 4 },        { name: 'Red', cost: 8 },        { name: 'Blue', cost: 14 } ]
javascriptreactjsenzyme
8
test

Vous essayez de simuler un clic sur un élément avec la classe addtocart. Cependant, vous n'avez pas d'élément avec la classe addtocart. Votre bouton d'ajout a un ID d'élément submit.

Change ça:

const submitButton = wrapper.find('.addtocart');

Pour ça:

const submitButton = wrapper.find('#submit');

2
Elliot B.

simulate d'Enzyme recherche un événement onChange sur votre composant Todo et n'en trouve pas. Vous n'avez pas onChange spécifié comme accessoire, il serait donc logique qu'il ne se déclenche pas. Câblez l'accessoire onChange à votre composant si c'est ainsi que vous souhaitez le tester. De la documentation:

Même si le nom impliquerait que cela simule un événement réel, .simulate () ciblera en fait l'hélice du composant en fonction de l'événement que vous lui donnez. Par exemple, .simulate ('click') obtiendra réellement l'accessoire onClick et l'appellera.

6
jmargolisvt

Après avoir regardé votre code Todo:

<input id="itemname" name="name" ref={this.nameRef} className="form-control" type="text" placeholder="Add item to List" />

et

<input name="cost" id="itemcost" ref={this.costRef} className="form-control" size="5" type="text" placeholder="Cost" />

Je ne pense pas que wrapper.find('.cost') fonctionnera. Je vous suggère de faire wrapper.find('#cost')

1
klugjo