web-dev-qa-db-fra.com

Comment se moquer de la méthode window.alert en plaisantant?

J'ai le composant React suivant:

class Form extends React.Component {

   constructor(props) {
      super(props);
      this.state = this._createEmptyTodo();
   }

   render() {

      this.i18n = this.context;

      return (
         <div className="form">
            <form onSubmit={this._handleSubmit.bind(this)}>

               <input
                  placeholder={this.i18n.placeholders.addTitle}
                  type="text"
                  value={this.state.title}
                  onChange={this._handleTitleChange.bind(this)}></input>

               <textarea
                  placeholder={this.i18n.placeholders.addDescription}
                  value={this.state.description}
                  onChange={this._handleDescriptionChange.bind(this)}></textarea>

               <button>{this.i18n.buttons.submit}</button>
            </form>
         </div>
      );
   }

   _handleTitleChange(e) {
      this.setState({
         title: e.target.value
      });
   }

   _handleDescriptionChange(e) {
      this.setState({
         description: e.target.value
      });
   }

   _handleSubmit(e) {

      e.preventDefault();

      var todo = {
         date: new Date().getTime(),
         title: this.state.title.trim(),
         description: this.state.description.trim(),
         done: false
      };

      if (!todo.title) {
         alert(this.i18n.errors.title);
         return;
      }

      if (!todo.description) {
         alert(this.i18n.errors.description);
         return;
      }

      this.props.showSpinner();
      this.props.actions.addTodo(todo);
      this.setState(this._createEmptyTodo());
   }

   _createEmptyTodo() {
      return {
         "pkey": null,
         "title": "",
         "description": ""
      };
   }
}

Et le test connexe:

const i18nContext = React.createContext();
Form.contextType = i18nContext;

    describe('The <Form> component', () => {

       var wrapper;
       var showSpinner;
       var actions = {}

       beforeEach(() => {
          showSpinner = jest.fn();
          actions.addTodo = jest.fn();
          wrapper = mount(<i18nContext.Provider value={i18n["en"]}>
             <Form
                showModalPanel={showSpinner}
                actions={actions} />
          </i18nContext.Provider>);
       });

       test("validate its input", () => {
          window.alert = jest.fn();
          wrapper.find("button").simulate("click");
          expect(window.alert.mock.calls.length).toBe(1);//<<< this FAILS!
       });
    });

Ce formulaire, lorsque le bouton est cliqué, il alerte simplement un message en utilisant alert.

Maintenant, lorsque je lance le test, j'obtiens ceci:

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

Ce qui est un échec car le simulacre ne se fait pas appeler apparemment. Mais je vous promets que le composant de formulaire alerte un message en cliquant sur son bouton.

Je soupçonne que, pour certaines raisons, le moqueur window.alert n'est pas utilisé par le composant Form lorsque le clic est effectué par programme à l'aide d'une enzyme.

N'importe qui?

reactjsjestjsenzyme
6
nourdine

Au lieu de window, vous pouvez utiliser global.

global.alert = jest.fn();

En effet, les navigateurs utilisent le nom window, tandis que nodejs utilise le nom global.

0
Errorname