DEV Community

loading...
Cover image for How to test Your API inside VSCODE

How to test Your API inside VSCODE

Mukul Singhal
I am a Full-Stack Developer 🖥 | Blogger 📝 & Gamer🎮 | Currently Looking for a Job
・2 min read

Hey All 👋 .

Recently I got to know about a VS Code extension called Thunder Client⚡⚡ which can be used to test our API inside VS Code.
How Cool 😎 is that to test our API in the editor that we use all the time.

Thunder Client is a GUI-based Rest Api HTTPS client and has a very clean UI and easy-to-use interface.

One of the key highlights of this extension is Scriptless Testing

As we need to write a lot of boilerplate code in Postman and other clients to do basic testing using scripting like status code equal 200. In Thunder client, there is a GUI-based test where we can select a couple of dropdowns to do most standard tests very easily without any scripting knowledge.
As you can see in the image below

🖥 How to install

  • First of all open your VS Code and Click on extensions on the sidebar and install thunder client.

Alt Text

  • now you will see a icon on side bar Alt Text

Lets test Thunder client a little bit

  • for testing you can create your own API or you can use

https://gorest.co.in/

and get your authentication token and you are good to go.

below you can see Thunder Client in action in Below GIF

  • GET request

Alt Text

  • POST request in which we create a GUI based Test

Alt Text

Now you can play around thunder client a little more.

Let me know your thoughts about it 😃and if you like it share it with others.

end

Discussion (13)

Collapse
je12emy profile image
Jeremy • Edited

Can requests be shared between developers? Maybe a .thunder dir with the requests?

Collapse
mukul_singhal profile image
Mukul Singhal Author

Yes you can import and export Thunder Client collections data, useful to share with team mates.
You can learn more about this from this link
github.com/rangav/thunder-client-s...

Collapse
je12emy profile image
Jeremy

That's so cool! Will try it out %100.

Collapse
pinalbhatt profile image
Pinal Bhatt

Nice extension. But where are these requests saved?

Collapse
mukul_singhal profile image
Mukul Singhal Author

From what I know These request are saved in a database called NeDB.
It is an Embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency.
You can learn more about it on :-
github.com/louischatriot/nedb

Collapse
renanlazarotto profile image
Renan Lazarotto

Thunder Client just need ONE feature before I can ditch Postman completely: it needs to properly render Symfony's dump (symfony.com/doc/current/components...) output as parsed HTML, not raw content like it does today. Postman does this but misses JS interactivity. When/if this gets implemented, it will fully satisfy my basic needs to test my APIs.

Collapse
erfanmoshiri profile image
erfanmoshiri

I use a simple .http file with "REST Client" extension, so writing and testing an Api made super easy. and you can actually save them to call later, you can handle mutilple tokens and so on.. :D

Collapse
mukul_singhal profile image
Mukul Singhal Author

Yes "REST CLIENT" is a good extension But What I like about Thunder Client is it

  • Gives you a GUI so person who comes from a tool like POSTMAN feels familiar with it and it also saves the API call to use later
  • As I mentioned in the article one of the major feature is "Scriptless testing" you can check that out for sure.
Collapse
erfanmoshiri profile image
erfanmoshiri

thanks for your attention and useful post :)

Collapse
actionjackson86 profile image
Jackson Roach

can you include a link to the repo?

Collapse
mukul_singhal profile image
Mukul Singhal Author

I didn't create my own rest API I used
gorest.co.in/ for API calling
I don't create a local repository to test it.

Collapse
doopline profile image
Ztnight

You could make a form data post request?

Forem Open with the Forem app