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
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.
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.
I would say "it shouldn't change unexpectedly" for the snapshots cause that's the goal of the snapshot
16:00 is where the video starts.
Interesting. This is my opinion on testing if you dont mind 🙂 http://foobarbaz.club/react-testing-you-are-doing-it-wrong/
First 20:00 mins there was no actual "coding", it was more like live talking 😀
please don't waste your time by watching this video ruuuuuuuuuuuuuuuuun
I can't believe you talked about depression!!! I am terrified of talking about it.
Probably most useless video in this channel.
your face is beautiful. you are so cute .will u marry me?