Understanding Mocks in Testing - part 1

I know, I know - a learning blog. It's been a while but here we are. I know you are probably thinking I should get mocks by now. Well, yes and no. I have used them a lot in backend. But frontend has thrown everything for me 

So here I am again to understand them properly. Anyway thanks. 

This version might be long and boring. The main aim for this blog post is to get everything out of my head. I wish I was in the office with my two screens. This would make everything so much easier. Anyway - soon.

When we write our component that component might have som return elements. And those elements that our component returns (this is how React works) might display some data. Or the components might REACT to some data (!!!) - a boolean might cause a button to be enabled or disabled, it might cause some aspects of the component to be hidden.

Data basically is displayed in React components or affects them by causing them to change for example through various aspects of the component being hidden or displayed based on a Boolean.

Phew - I'm already tired 

THIS DATA COMES FROM SOMEWHERE. THE DATA THAT THESE REACT COMPONENTS USE USUALLY COMES FROM SOMEWHERE. 

USUALLY, THIS DATA COMES FROM A QUERY. And that query may be called from within the component itself (or not). That data MIGHT ALSO BE PASSED DOWN AS A PROP FROM A PARENT COMPONENT. Okay so the data that changes things in a react components, i.e. that either is displayed or controls the appearance of a component

• EITHER GETS RETURNED FROM A QUERY (USUSALLY)
• OR CAN BE PASSED DOWN FROM ANOTHER COMPONENT

Okay okay got this.

TESTING THE COMPONENT AND CHECKING IT FOR THINGS !!!

IN ORDER TO CHECK THAT THE COMPONENT IS RENDERING THE DATA CORRECTLY OR REACTING TO THE DATA CORRECTLY. AND TO CHECK WHETHER THE COMPONENT IS BEHAVING CORRECTLY AND DOING WHAT WE NEED IT TO DO - 

We need to write tests. 

"Using the behaviour of the component, we can write our "it" blocks

We can write our "describes" (this is all very much frontend testing) 

In the test, we need to render the component in isolation (but why???!)." 

- -> We do this using the famous "customRender" function in React (I think)

- -> IT RENDERS THE COMPONENT FOR US

- -> !!! IT RUNS THE CODE WITHIN THE COMPONENT !!! (very very important)

IF 

- THE COMPONENT INCLUDES A QUERY

OR IF 

- DATA IS PASSED DOWN LIKE A PROPERTY 

THEN

- THE CUSTOM RENDER FINDS THE QUERY 

AND 

1. WE ARE NOT CALLING THE REAL QUERY

2. WE USE THE MOCK DATA INSTEAD

Okay I'm beginning to get this

I'm going to move on to a second post to make this easier for my brain