Testing the frontend is not that hard!

Some people dread frontend testing, others think it’s a chore because they can see it already working. Not to mention people who don’t test at all.

One of the problems I had while testing the frontend, where mostly because of the framework I had to use. It’s all divs everywhere, lots of portals and attributes that go who knows where.

When a query fails, it gives the HTML being rendered so you can inspect it. But we are not robots, so it’s easier to see WHAT it looks like.

Enters: https://testing-playground.com/

You can just copy the HTML and paste it there so it will show what the test “is seeing”. This makes it easier to find out why the query is not working.

Instead of waiting for the errors, you can also use screen.debug() to print the current HTML.

It also has browser extensions that you can use directly on the websites. For example, you can just start your frontend and check everything there with the extension.

This is where this little big helper comes:

screen.logTestingPlaygroundURL()

You can just put that on the test and it prints a link to the playground with the whole thing for you to test.

Styles aside, you can probably use it even as a way of doing TDD! On each step, you can see exactly what’s being rendered. This way, you could probably develop everything without running start or dev once! Afterward, all that would remain would be styling!

Some people who don’t test might say or think it’s “slow”. But, when you have a lot of logic in your application, you have to do the same thing a lot of times just to get to that one part you’re having trouble with for one more try.

With tests, you let it do all the steps and more! Instead of trusting you’re not breaking something else when you make the fix, you know it’s still all working.

It’s been around for more than a while, I learned about it recently and it’s already changed how I’m doing tests!