React offers two ways to define components: they can be functional or class-based. If you are new to React, you may be wondering what the difference is between them. The React documentation doesn’t clearly explain when and why you would use one or the other, and what the pros and cons of each type are.
In this article I will help you understand the difference between functional and class-based components. You will know why you may prefer one over another.Read more →
If you ever tried to pass a parameter to
onClick event handler, you know that it is not straightforward.
If you didn’t, here is why may want to. Imagine a scenario where you have a group of three buttons. When you click on one of them, you want to know which one was clicked and perform an appropriate action. You have a choice of creating three onClick event handlers, one for each button, or one hander for all the buttons and pass a parameter identifying the clicked button into it. Which option do you choose? Clearly writing one handler should be less work, right?
Unfortunately, passing a parameter into an event handler in React is not straightforward. If it were, there wouldn’t be multi-page discussions about just that. By the way, the accepted answer on that Stackoverflow thread lists an “Easy way” along with “Better way” and an “Old easy way”. The “Easy way” is indeed easier, but has a performance impact. And a “Better way” is in fact not that easy. Is that confusing, or is that just me?
However, don’t despair! I will show you how you can pass not even one, but multiple parameters into an Read more →
onClick event handler. In fact, you can apply the same technique to any React event handler. That approach is both easy to implement and has no performance impact.
There is a subtle issue for which, unfortunately, neither ES6 nor proxyquire provide a solution. It is well described in this stackoverflow.com answer.
So far in the previous articles of the series, the dependencies we were mocking were in a separate module from the code we were unit testing. But what if they were in the same module?Read more →
In part one, I wrote about mocking ES6 module dependencies using the ES6 native
import * from construct. It works mostly fine. However, you need to be aware of a potential issue:
- You need to import modules to mock them, which means that those modules will be evaluated. That may be a problem if you don’t want the code in this modules to be executed.
Another method I found to work well is using proxyquire. It is one of many libraries aiming to streamline mocking dependencies to simplify unit testing.Read more →
Not so long ago I faced a problem: I needed to mock ES6 module’s dependencies for unit testing. The reason for mocking dependencies in unit tests is the following: when I write a unit test, I want to test the functionality of a single unit of code, hence a unit test. However, if a module has any dependencies, those dependencies need be satisfied. That may mean importing and executing code in other modules. As a result, the unit test loses its purity – the test results will depend not only on the module I’m focusing on but also on the other code my module depends on.Read more →