Easier way to get a copy of array as argument

Daniel Nakamashi — Sun, 22 Nov 2020 00:49:32 +0000

Have you ever created a function where you receive an array as argument and created a copy of it because you didn’t want to touch the original one?

If so, you probably did something like this:

function (items) {
  const newItems = [...items]
  // mutate newItems here
  return newItems
}

The sad thing about this code is that after you had a hard time thinking about a cool name for the argument, you have to ditch it and work with a not so cool variable name 🙁.

You could create another name for the argument and then use your cool name in the variable you will work with 🤔.

function (itemsArg) {
  const items = [...itemsArg]
  // mutate items here
  return items
}

But there is a better way.

function ([...items]) {
  // mutate items here
  return items
}

This way you have created a copy of the array in the function’s argument list 😃.

Unit Testing React HOC

Daniel Nakamashi — Fri, 28 Aug 2020 07:57:23 +0000

Suppose we have the following HOC:

const withExtraProp = Component => props => {
  return <Component {...props} extraProp="extraValue" />;
};

As you may know, a component can be just a function and we can test it just like that. So we create a mock function and perform our test against that function.

const mockComponent = jest.fn(() => null);
const Component = withExtraProp(mockComponent);

render(<Component />);

await wait(() => expect(mockComponent).toBeCalled());

In the example above, we create a mock function that will be our component to be wrapped by withExtraProp. As this function represents a react component, it should return a component or null.

The return of withExtraProp is the mockComponent with props added to it. When we render this resulting component, it will call the function and we can test whether it was called.

We can also test if it was called with the right arguments.

const mockComponent = jest.fn(() => null);
const Component = withExtraProp(mockComponent);

render(<Component />);

await wait(() => expect(mockComponent).toBeCalled());
await wait(() => expect(mockComponent).toBeCalledWith({ extraProp: 'extraValue' }, expect.anything()));

The second argument expect.anything() is necessary because if you use forwardRef it contains the ref object.

What if there are other props passed to component?

Suppose you pass other props to component but you just want to test props passed by this specific HOC. You can use expect.objectContaining like this:

const mockComponent = jest.fn(() => null);
const Component = withExtraProp(mockComponent);

render(<Component normalProp="propValue" />);

await wait(() => expect(mockComponent).toBeCalled());
await wait(() => expect(mockComponent).toBeCalledWith(
  expect.objectContaining({ extraProp: 'extraValue' }),
  expect.anything()),
);

Here is the example working:
https://codesandbox.io/s/hopeful-curran-yb6cr?fontsize=14&hidenavigation=1

DEV Community: Daniel Nakamashi

Easier way to get a copy of array as argument

Unit Testing React HOC

What if there are other props passed to component?