If I can just test my code by looking at it why should I waste time writing tests?
I hear UI developers ask this all the time. For a long time I also had this opinion of testing. I thought writing tests would be difficult and time consuming. It just wasn't something I wanted to learn.
But when I finally decided to sit down and learn how to write tests for my front-end code I was hooked. I immediately realized that all those years of painstakingly debugging jQuery spaghetti code could have been avoided if I had started testing sooner. I felt like I must secretly hate myself for putting myself through all of that misery. My code improved. I was more confident when writing complex interactions.
Why automated instead of testing by hand?
If tests must pass in order for code to be moved through your pipeline you will be forced to maintain your tests.
If you have good tests you will also be able to avoid pushing bugs to production.
Q/A engineers can focus on testing the stuff that matters instead of logging regression defects
Why should we write tests that will just end up breaking when the mocks and requirements change?
That's like saying why shower when you just have to shower again. Because then you would smell all the time and who wants to be smelly all the time. Why put stuff away just to take it out again. Because having a clean, organized home is just nicer. and having code that works is just nicer isn't it?
Yes you will have to spend some time updating tests when they break. When functionality changes your tests will probably break and this is actually desirable in some instances. If you have a test that submits a form and all of a sudden a new required field is added your test should break. If it doesn't break you have a problem with your test.
Also if you avoid testing implementation details and only test the stuff that matters to your user you will spend less time fixing broken tests.
The following are some of the benefits I've personally experienced by testing my front-end code using my tools of choice (Jest, dom-testing-library, and Cypress.)
Benefits of Automated Testing
Automated Testing Gives You a Quick Feedback Loop
Have you ever rushed to ship some code that "should" work only to find out it was broken. Yeah I think all of us have. Having a good test suite in place will help prevent those embarrassing and costly mishaps.
You know immediately or almost immediately if something breaks.
Testing Speeds Up Development
Once You Get the Hang of It testing will help speed up your development time. Writing tests helps you to think through code. Using a TDD (Test-Driven Development) approach you write tests what describe how the code should function. Then you write code to make them pass.
I don't personally use a strict TDD approach but when I need to solve complex problems tests always help.
Testing Describes How the Code Should Work.
Having a robust testing suite not only helps you find bugs, it also documents your code.
It may be a contrived example but tests like the below describe exactly what this function does.
\*\*\* tests are written in Jest syntaxit("should multiply 2 numbers", () => {
expect(multiply(3, 3)).toBe(9);
});A developer who is new to the project only needs to look at the tests to get familiar with the codebase. I've also found that writing new tests is a good way to learn a new codebase.
When you write lots of tests you'll have a deeper understanding of your code. You can test edge cases to ensure that your functions don't break if some strange data is sent. You may discover that some language features don't behave the way you expect.
I find that when bugs do come up I'm more likely to know where to fix them if I spent time writing tests. When you write tests you are required to think about what the code is really doing.
Testable Code Is Just Better
If code is difficult to test its likely complex, confusing and contains too much "magic". Complex code that relies on a lot of "side effects" and external dependencies is way harder to test. Theres a lot of mocking involved and the results are less predictable.
Testable code is cleaner and usually easier to modify.
You Can Refactor with More Confidence
Sometimes code is so convoluted and brittle that the slightest change will break everything. It needs to be cleaned up no one on the team wants to take it on. Usually this kind of code was written long ago, has no tests and is difficult to understand. Sometimes theres no documentation and the person who really understood it is long gone. And oftentimes its critical to the application.
Well if you had tests you would be able to at least make incremental improvements. Eventually you could untangle the mess.
Also tests would describe how the code should work.
Protect Your Application From Future You
JavaScript is a rapidly developing language and new awesome features are added regularly. Thanks to Babel we can start using them right away. The temptation to overhaul our code bases with the newest stuff is impossible to resist.
Well with a robust test suite you'll be able to know that these new features don't break your app.
Debugging Is Much Faster
Because you have tests you can more easily determine whats broken. If some piece of functionality breaks you can rule out the places where the tests are still passing. Utility methods with good test coverage can be ruled out. You can isolate the errors and fix the bugs more easily. Hopefully you can fix bugs before the code even leaves your machine.
Testing Gives You Peace of Mind
Well tested code helps me sleep through the night. We all have those times when we wake up in the middle of the night wondering if we added type checks. Or if that bug fix we rushed at 4:45 on Friday was actually successful. Testing can help.
What Tests Can't Do
So is a robust test suite a guarantee that we will never see defects in the application?
Well no.
While they do provide a ton of assurances automated tests are not a magic bullet.
Visual Testing
Automated tests cannot replace actual humans testing the application manually.
Tests will not catch most visual errors. CSS regression tests are very difficult to automate. And automated tests will not let you know when your application just doesn't match the planned design.
People can also sense when an application just isn't quite right in a way that tools cannot. The best test suite in the world cannot replace your human brain. At least not yet.
Logical Errors
Unit tests will not catch logical errors easily. If you totally misunderstood how a feature should work your tests are probably wrong too.