Sign in

Welldone Software
The Best Software Solutions Company

Mocking function calls within a module

Let’s say you have the file:

// f.jsexport function b(){
return 'b';
}
export function a(){
return b();
}

If you want to mock b to test a, well… It is not as easy as it seems to be.

The Naive Approach

What I initially tried to do was:

test('a', () =>…


Sometimes we respond to React element mounts. The first instinct is to useRef & useEffect. But It’s wrong. What you really need is often useCallback.

If you want to respond to a React element’s mounting on the DOM, you may be tempted to use useRef to get a reference to it and useEffect to respond to its mounts and unmounts. But it won’t work.

This is because there is no callback or re-render when a…


How can you run tests on version X and version Y of a library, with real-world examples of testing React 16 and React 17

With the release of React 17, many React library maintainers found themselves wondering:

“Should I test only React 17 from now on, or maybe should I stick to React 16 until version 17 will be more widely adopted by the community?”.

I’ve certainly found myself in this situation with my…


React.memo / React.PureComponent usage guide

What’s a Pure Component?

(Official docs: React.PureComponent, React.memo)

In the following example, when App re-renders,
<Main userName={userName}/> and <Header/> are called:

And they always return new React Elements.

Remember that JSX is just syntax sugar for React.createElement (in React 17 it’s equivalent mostly conceptually) so App‘s code is equivalent to:

Usually, as…


Unit testing React components isn’t always easy. In this short article i’ll show some tricks to make our lives a little easier using Enzyme.

In a project I’m working on, we are testing each level of the components hierarchy with shallow rendering and snapshot testing. That way if something brakes…


What is issue #14099 in React’s repo and how it affects you?

Why do we need useCallback in the first place?

In the official documentation of useCallback it says:

“This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders”

In the following example, PureHeavyComponent would re-render every single time that the Parent component is re-rendered although PureHeavyComponent is pure because previous props.onClick


When working remotely, you benefit much more from good working processes and proactive team members and you are punished much more severely for sloppy work processes and personal carelessness

When I heard about the possibility of working from home some 8 years ago at Welldone Software (recently merged with CodeValue), I had no idea what that meant. It even sounded pretty weird to me. How could my boss help me, and guide me? How will he know what I…


This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2021.

It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience at Welldone Software, where we…


TypeScript support, Custom hooks tracking (like React-Redux’s useSelector), Tracking of all pure components.

So what’s new in @welldone-software/why-did-you-render v4?

TypeScript Support

Typing for all the different scenarios of the library are now supported.

Improved Overall Stability

Tests are now covering more scenarios than ever, including integration with libraries, and there are no significant open issues.

Tracking of all Pure Components

The trackAllPureComponents option makes the library track all pure components.

Using this option…


Building a large scale React app may include some re-renders headaches. The growth of your app may cause you to spend a lot of time investigating why “heavy” components re-rendered much more then you expected.

In this article, I’ll demonstrate a common use-case and will explain how placing useState /…

Welldone Software

The Best Software Solutions Company

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store