Partage
  • Partager sur Facebook
  • Partager sur Twitter

Aide sur l'exercice p3-c2b unit test

Réalisez vos premiers tests d’intégration avec Jest Test DOM / Testing

    11 mai 2022 à 17:17:58

    Hello tout le monde :)

    Je fais actuellement l'exercice sur les tests unitaires en JavaScript : https://openclassrooms.com/fr/courses/7159306-testez-vos-applications-front-end-avec-javascript/7332810-realisez-vos-premiers-tests-d-integration-avec-jest-test-dom-testing-library#/id/r-7332808

    J'essaye de voir si ce que j'ai écrit fonctionne.

    /**
     * @jest-environment jsdom
     */
    
     import '@testing-library/jest-dom'
     import {
         getByRole,
         getByTestId,
     } from '@testing-library/dom'
     
     import SignIn from './index'
     
     // Je crée ma suite de test
     describe('Sign In Integration Test Suites', () => {
        it('should render "L\'e-mail n\'est pas correct"', () => {
            document.body.innerHTML = SignIn.render()
    
            const email = document.getElementById('user-email')
            email.value = 'thomas@thomas.com'
    
            const button = getByRole(document.body, 'button')
            button.click()
    
            expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')
        })
    })
    


    Sauf que j'obtiens une erreur comme quoi mon élément `button` n'a pas la propriété "submit"...

    $ npm test
    
    > testez-vos-applications-front-end-avec-javascript@1.0.0 test /home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript
    > jest
    
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     PASS  js/samples/unit/toBeNan.test.js
     PASS  js/utils/api/sensorsApi.test.js
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     PASS  js/utils/env/index.test.js
     PASS  js/pages/common/pagination/index.unit.test.js
     PASS  js/samples/unit/toContain.test.js
     PASS  js/pages/common/header/index.test.js
     PASS  js/samples/unit/toEqual.test.js
     PASS  js/samples/unit/toBe.test.js
     PASS  js/samples/unit/unit1.test.js
     PASS  js/samples/unit/toBeDefined.test.js
     FAIL  js/utils/signInForm/index.test.js
      ● Test suite failed to run
    
        Your test suite must contain at least one test.
    
          at onResult (node_modules/@jest/core/build/TestScheduler.js:175:18)
          at node_modules/@jest/core/build/TestScheduler.js:316:17
          at node_modules/emittery/index.js:260:13
              at Array.map (<anonymous>)
          at Emittery.emit (node_modules/emittery/index.js:258:23)
    
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     PASS  js/samples/integration/sample1.test.js
     PASS  js/pages/common/pagination/index.integration.test.js
     PASS  js/pages/signIn/index.test.js
      ● Console
    
        console.error
          Error: Not implemented: HTMLFormElement.prototype.submit
              at module.exports (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
              at HTMLFormElementImpl.submit (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:88:5)
              at HTMLFormElementImpl._doSubmit (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:80:10)
              at HTMLButtonElementImpl._activationBehavior (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLButtonElement-impl.js:23:14)
              at HTMLButtonElementImpl._dispatch (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:240:26)
              at fireAnEvent (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
              at HTMLButtonElementImpl.click (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:79:5)
              at HTMLButtonElement.click (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/generated/HTMLElement.js:110:34)
              at Object.<anonymous> (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/js/pages/signIn/index.test.js:22:17)
              at Promise.then.completed (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jest-circus/build/utils.js:316:28) undefined
    
          at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
          at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
          at HTMLFormElementImpl.submit (node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:88:5)
          at HTMLFormElementImpl._doSubmit (node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:80:10)
          at HTMLButtonElementImpl._activationBehavior (node_modules/jsdom/lib/jsdom/living/nodes/HTMLButtonElement-impl.js:23:14)
          at HTMLButtonElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:240:26)
          at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
    
     PASS  js/router/index.test.js
    
    Test Suites: 1 failed, 14 passed, 15 total
    Tests:       32 passed, 32 total
    Snapshots:   1 passed, 1 total
    Time:        3.632 s
    Ran all test suites.
    npm ERR! Test failed.  See above for more details.



    Est-ce que vous pouvez m'éclairer là-dessus, s'il vous plaît ?

    • Partager sur Facebook
    • Partager sur Twitter
      12 mai 2022 à 0:37:10

      Bonjour, en tapant le message d'erreur sur Google j'ai trouvé un issues du Github jsdom (qui date un petit peut 2017)

      Qui indique tout simplement que jsdom n'implémente pas la méthode submit des HTMLFormElement.

      Jsdom étant une abstraction de l'API du DOM certaine méthodes/API ne sont pas disponible dans jsdom.

      Parmi les propositions de "solutions de contournement" une personne propose de faire un genre de "mock artificiel" via:

      window.HTMLFormElement.prototype.submit = () => {}

      L'idée étant n'implémenté une version "fictive" de la méthode submit

      /**
       * @jest-environment jsdom
       */
       
      import '@testing-library/jest-dom'
      import {
          getByRole,
          getByTestId,
      } from '@testing-library/dom'
      
      
      // version fictive de la méthode HTMLFormElement.submit
      // voir: (https://github.com/jsdom/jsdom/issues/1937)
      window.HTMLFormElement.prototype.submit = () => {
      	console.log("Form has been submit");
      }
      
      import SignIn from './index'
        
       // Je crée ma suite de test
       describe('Sign In Integration Test Suites', () => {
          it('should render "L\'e-mail n\'est pas correct"', () => {
              document.body.innerHTML = SignIn.render()
       
              const email = document.getElementById('user-email')
              email.value = 'thomas@thomas.com'
       
              const button = getByRole(document.body, 'button')
              button.click()
       
              expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')
          })
      })

      Si tu veux vérifier que la méthode submit du formulaire est bien exécuter il faudra mocker la méthode submit et vérifier quelle à bien été appelé,

      après avoir cliquer sur le boutton de type submit.

      Ce qui peut donner un corps de test qui peut s'apparenter à cela:

              // séléctionne le formulaire
              const form = document.querySelector("form");
      
              // mock la méthode submit du formulaire
              const submitSpy = jest.spyOn(form, "submit");
      
              const button = getByRole(document.body, 'button')
      
              // click sur le boutton submit du formulaire
              // ce qui doit déclencher la méthode submit du formulaire
              button.click()
      
              // vérifie que la méthode submit du formulaire à été exécuté
              expect(submitSpy).toBeCalled();
      
              expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')

      Jest spyOn


      -
      Edité par SamuelGaborieau3 12 mai 2022 à 0:38:01

      • Partager sur Facebook
      • Partager sur Twitter

      suggestion de présentation.

      Aide sur l'exercice p3-c2b unit test

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown