React Unit Testing with Enzyme and Jest (P5D51) – Live Coding with Jesse



Project 5 Day 51: Today we will write some unit tests for our React components using Enzyme and Jest.

See a professional front-end developer at work. Unscripted. Mistakes included.

Next.js 5: https://zeit.co/blog/next5

Project Repo: https://github.com/fus-marcom/franciscan-react

React: https://facebook.github.io/react/

Gitter: https://gitter.im/LiveCodingwithJesseFreeCodeCamp/

Twitter: https://twitter.com/JesseRWeigel
Youtube: https://www.youtube.com/c/JesseWeigel29
Instagram: https://www.instagram.com/jesse.weigel/

Code Editor: Visual Studio Code
VS Code Theme: Seti
Terminal: https://www.iterm2.com/
Project Management: https://trello.com

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 10 Comments

  1. Brandon Smith

    I'm not the best with testing however I just finished a Udemy React/Meteor course that did a lot of unit testing so its fresh on my mind. From what I understand that your trying
    to do you don't necessarily want to being doing the snapshot testing to check if the prop got rendered correctly. Instead I think you should be using
    mount which also comes from enzyme. You have your wrapper which is the rendered component.
    Lets say within your component you have an h2 that renders the prop text. So what you want your test to be doing is render your component (wrapper) find that h2
    and check its value. If the value it gets rendered with matches the prop you gave it the test passes. Simple Example:

    it('Should Render The Correct Title'){

    //Mount Your Component Passing Something To The Title Prop
    const wrapper = mount(<MyComponent title="My Title"/>

    //Find The h2 in your component
    const h2 = wrapper.find('h2')

    //Expect the h2 to now have value you passed as a prop
    expect(h2).text().toBe('My Title')

    //This Can Be Condensed Down To:
    expect(wrapper.find('h2).text()).toBe('My Title')

    }

    If you were to instead make the first line const wrapper = mount(MyComponent title="My Title 2"/> the test would fail stating it expected 'My Title' and received 'My Title 2'

    Hopefully this makes senses and at least gives you a different direction to start looking at the documentation for.

  2. Krypto

    Best livestream for me so far. Completely new to jest and enzyme. Got some trouble while setting up enzyme and jest, but for rest of the tasks the video helped me greatly.

  3. Gilbert Torchon

    I would say "it shouldn't change unexpectedly" for the snapshots cause that's the goal of the snapshot

  4. Zlatko Iliev

    First 20:00 mins there was no actual "coding", it was more like live talking 😀

  5. Hussain Ruhollah

    please don't waste your time by watching this video ruuuuuuuuuuuuuuuuun

  6. Anthony

    I can't believe you talked about depression!!! I am terrified of talking about it.

  7. Beauty Scenes

    your face is beautiful. you are so cute .will u marry me?

Leave a Reply