As I continue to learn and improve my overall understanding of coding and programming one adage has been helping me immensely. That is: “Ask for a job and you will get advice. Ask for advice and you will get a job.” While the latter hasn’t happened yet I have been finding that getting into the mindset of asking for advice has helped me reach out to more people. In addition, I’ve had some amazing conversations that sometimes would span for hours. I attribute the fact that I was going into the call with questions on how I can improve vs questions around a job in particular. Don’t get me wrong there is a place and a time for asking about a specific role or a job, but if you’re like me and reaching out to strangers can be difficult. Starting off with asking for advice can help get you more comfortable with reaching out in general.
That being said I have been asking a lot of people for a lot of advice and in turn, now I have a lot of advice notes I need to parse. I don’t know about you, but I’m finding that coding is a game of how do I not overwhelm myself: this week, today, in a file, in a function, in an error, oh god how did I manage to create this error, etc. After reading through my notes I have been trying to find the most common tips and focus on those first then decide what I want to pursue next. One of the most common pieces of advice is to try to incorporate testing into my code and get into a habit of test-driven development(TDD). So today I wanted to share with you my first experience with testing in React with Jest and Enzyme and some basic terminology around TDD.
Like almost everything else in software development, there is a seemingly endless amount of knowledge and things to learn about testing. Today I wanted to start off with Unit Testing or isolating each unit of a system to identify, analyze, and ultimately fix any problems. This form of testing is a great way to both wrap your head around testing and get into a good habit of TDD. To me, this makes sense, similar to using console.log, unit testing is another way of ensuring that your code is doing what you think it’s doing.
For a visual representation of unit testing, here is a chart about the Unit Test lifecycle:
Let’s start by looking at a very simple instance of unit testing in React using Jest and Enzyme. Side note, if you want to try Jest or Enzyme yourself in a React Project make sure to check out the documentation for Jest and Enzyme on how to set it up. Or check out this great tutorial series by SimpleTut
Here I have a functional Component:
I’ve named given the card a className called “user-post-card” and in the card, I’m displaying the title and content props in this component. Let’s take a look at the UserPost.test file:
let’s break it down line by line:
- Importing React
- Importing shallow render which constrains the test to a specific component(UserPost) that way our test isn’t indirectly asserting on behavior of child components. Not that we have any in this example but worth mentioning.
- Importing the UserPost component
6. describe will appear in our test in the terminal and does what you think it does, that is describes what we are testing. Like so:
7.the test itself which might not have the best name given what we are testing. ‘Should render without errors’ is what I called it, but looking at what the test is expected we see that I am seeing if there is 1 component with the name of ‘.user-post-card’. Something like: ‘Should find one component name user-post-card.
8. setting a variable called component with a shallow render
9. setting another variable called wrapper to find the component with the matching classname
10. expecting to find 1 component with that classname
What happens if there are two components with the same classname? Well then our test will fail like so:
Here we can see I added another “user-post-card” classname to the Card.Body which resulted in a failed test. Once a test fails we can see why it did in our test and where it failed.
I am going to be writing more about testing in the following posts, but I wanted to share this simple example because before this was recommended to me I was hesitant to integrate tests into my projects. However, as I’ve heard from many developers testing is important since it will lead to more efficient code and overtime make your code easier to understand and debug.
