Simulate a button click in Jest

Question

Simulating a button click seems like a very easy standard operation  Yet  I can t get it to work in Jest js tests  This is what I tried  and also doing it using jQuery   but it didn t seem to trigger anything  import   mount   from  enzyme    page    lt MyCoolPage   gt   pageMounted   mount page    const button   pageMounted find   some button    expect button length  toBe 1      It finds it alright button simulate  click       Nothing happens

User · Answer

You may use something like this to call the handler written on click  import   shallow   from  enzyme      Mount is not required  page    lt MyCoolPage   gt   pageMounted   shallow page       The below line will execute your click function pageMounted instance   yourOnClickFunction

User · Answer

I needed to do a little bit of testing myself of a button component  These tests work for me  -  import   shallow   from  quot enzyme quot   import   as React from  quot react quot   import Button from  quot    button component quot    describe  quot Button Component Tests quot        gt        it  quot Renders correctly in DOM quot        gt            shallow               lt Button text  quot Test quot    gt                         it  quot Expects to find button HTML element in the DOM quot        gt            const wrapper   shallow  lt Button text  quot test quot   gt           expect wrapper find  button    toHaveLength 1                it  quot Expects to find button HTML element with className test in the DOM quot        gt            const wrapper   shallow  lt Button className  quot test quot  text  quot test quot   gt           expect wrapper find  button test    toHaveLength 1                it  quot Expects to run onClick function when button is pressed in the DOM quot        gt            const mockCallBackClick   jest fn            const wrapper   shallow  lt Button onClick  mockCallBackClick  className  quot test quot  text  quot test quot   gt            wrapper find  button   simulate  click            expect mockCallBackClick mock calls length  toEqual 1

User · Answer

Using Jest  you can do it like this  test  it calls start logout on button click        gt        const mockLogout   jest fn        const wrapper   shallow  lt Component startLogout  mockLogout   gt        wrapper find  button   at 0  simulate  click        expect mockLogout  toHaveBeenCalled

User · Answer

Additionally to the solutions that were suggested in sibling comments  you may change your testing approach a little bit and test not the whole page all at once  with a deep children components tree   but do an isolated component testing  This will simplify testing of onClick   and similar events  see example below   The idea is to test only one component at a time and not all of them together  In this case all children components will be mocked using the jest mock   function  Here is an example of how the onClick   event may be tested in an isolated SearchForm component using Jest and react-test-renderer  import React from  react   import renderer from  react-test-renderer   import   SearchForm   from     SearchForm    describe  SearchForm        gt      it  should fire onSubmit form callback        gt           Mock search form parameters      const searchQuery    kittens       const onSubmit   jest fn            Create test component instance      const testComponentInstance   renderer create          lt SearchForm query  searchQuery  onSearchSubmit  onSubmit    gt         root          Try to find submit button inside the form      const submitButtonInstance   testComponentInstance findByProps         type   submit               expect submitButtonInstance  toBeDefined            Since we re not going to test the button component itself        we may just simulate its onClick event manually      const eventMock     preventDefault  jest fn          submitButtonInstance props onClick eventMock        expect onSubmit  toHaveBeenCalledTimes 1       expect onSubmit  toHaveBeenCalledWith searchQuery

User · Answer

Solutions in accepted answer are being deprecated  4 Calling prop directly Enzyme simulate is supposed to be removed in version 4  The main maintainer is suggesting directly invoking prop functions  which is what simulate does internally  One solution is to directly test that invoking those props does the right thing  or you can mock out instance methods  test that the prop functions call them  and unit test the instance methods  You could call click  for example  wrapper find  Button   prop  onClick       Or wrapper find  Button   props   onClick     Information about deprecation  Deprecation of  simulate    2173

User · Answer

1 Using Jest This is how I use the Jest mock callback function to test the click event  import React from  react   import   shallow   from  enzyme   import Button from    Button    describe  Test Button component        gt      it  Test click event        gt        const mockCallBack   jest fn         const button   shallow   lt Button onClick  mockCallBack  gt Ok  lt  Button gt         button find  button   simulate  click        expect mockCallBack mock calls length  toEqual 1              I am also using a module called enzyme  Enzyme is a testing utility that makes it easier to assert and select your React Components  2 Using Sinon Also  you can use another module called Sinon which is a standalone test spy  stubs and mocks for JavaScript  This is how it looks  import React from  react   import   shallow   from  enzyme   import sinon from  sinon    import Button from    Button    describe  Test Button component        gt      it  simulates click events        gt        const mockCallBack   sinon spy        const button   shallow   lt Button onClick  mockCallBack  gt Ok  lt  Button gt          button find  button   simulate  click        expect mockCallBack  toHaveProperty  callCount   1               3 Using Your own Spy Finally  you can make your own naive spy  I don t recommend this approach unless you have a valid reason for that   function MySpy       this calls   0     MySpy prototype fn   function        return      gt  this calls       it  Test Button component        gt      const mySpy   new MySpy      const mockCallBack   mySpy fn       const button   shallow   lt Button onClick  mockCallBack  gt Ok  lt  Button gt        button find  button   simulate  click      expect mySpy calls  toEqual 1

[javascript] Simulate a button click in Jest

Examples related to javascript

Examples related to reactjs

Examples related to testing

Examples related to jestjs

Examples related to enzyme