After lots of trials and errors, here is what I've found out. At least, those were my results.
It seems that adsbygoogle.js will not render ads on localhost. You'll probably will get something like the following:

So, the first thing you need to do is to set up a local custom domain for your localhost.
Here is what I do on Windows:
- Run NotePad as Admnistrator.
- Open C:\Windows\System32\drivers\etc\hosts
- Add your custom domain to the list


Then you should be able to access your localhost by hitting dev.mydomain.com
After you've set up your local domain, you should go to your AdSense account and add it as a subdomain under the main domain of your registered website.

From the tests I've run. It seems that AdSense will not render real nor test ads if the domain/subdomain has not been added to your AdSense account.
In this example, I've added the main domain without the www and I've added two subdomains. One is the www. variation and the other one is the dev. that I've just added to my localhost.
Then you can render it on your code, just like you would on a real add and use the data-adtest flag set to on to run your tests.
<ins className="adsbygoogle"
style={{display:"inline-block", width:"100%", height: "100%"}}
data-ad-client={AD_SENSE_ACCOUNT}
data-ad-slot={AD_SENSE_SLOT}
data-adtest={ON_DEV ? "on" : "off"}
>
</ins>
I have an ON_DEV flag that automatically sets it to on, whenever I'm on my dev. domain.
EXTRA
This is out of the scope of this question, but is necessary for everything to work.
You also need to push it to the adsbygoogle array. This is how I do it in React.
useEffect(()=>{
(window.adsbygoogle = window.adsbygoogle || []).push({});
},[]);
And of course, you need the adsense <script/> tag on your index.html as well.
<script data-ad-client="XXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>