Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to test components using Date objects produce different snapshots in different timezones with Jest?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to test components using Date objects produce different snapshots in different timezones with Jest.

In this article, we’ll look at how to test components using Date objects produce different snapshots in different timezones with Jest.

How to test components using Date objects produce different snapshots in different timezones with Jest?

To test components using Date objects produce different snapshots in different timezones with Jest, we can use the timezone-mock package.

To install it, we run npm i timezone-mock.

Then we write

import timezoneMock from 'timezone-mock';

describe('when in Pacific timezone', () => {
  beforeAll(() => {
    timezoneMock.register('US/Pacific');
  });

  afterAll(() => {
    timezoneMock.unregister();
  });

  // ...
})

to call timezoneMock.register with the time zone we want to run our tests in.

And then we call timezoneMock.unregister to restore the test environment to its original time zone.

Conclusion

To test components using Date objects produce different snapshots in different timezones with Jest, we can use the timezone-mock package.

Categories
JavaScript Answers

How to mock the same function twice with different arguments with Jest?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to mock the same function twice with different arguments with Jest.

In this article, we’ll look at how to mock the same function twice with different arguments with Jest.

How to mock the same function twice with different arguments with Jest?

To mock the same function twice with different arguments with Jest, we can call mockReturnValueOnce.

For instance, we write:

myMock
  .mockReturnValueOnce(100)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

to call mockReturnValueOnce on the mocked function myMock to return the values we want.

If we just want to check the argument that a mocked function is called with, we use

expect(mock).toHaveBeenNthCalledWith(1, 'foo');

to check the argument at position 1 is called with 'foo with toHaveBeenNthCalledWith.

Conclusion

To mock the same function twice with different arguments with Jest, we can call mockReturnValueOnce.

Categories
TypeScript Answers

How to implement class constants with TypeScript?

Sometimes, we want to implement class constants with TypeScript.

In this article, we’ll look at how to implement class constants with TypeScript.

How to implement class constants with TypeScript?

To implement class constants with TypeScript, we can use the readonly keyword.

For instance, we write

class MyClass {
  readonly myReadOnlyProperty = 1;

  myMethod() {
    console.log(this.myReadOnlyProperty);    
  }
}

to add the myReadOnlyProperty class constant and set it to 1.

If we try to reassign it to another value like

const m = new MyClass()
m.myReadOnlyProperty = 2

then we’ll get a TypeScript compiler error.

Conclusion

To implement class constants with TypeScript, we can use the readonly keyword.

Categories
TypeScript Answers

How to dynamically assign properties to an object in TypeScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to dynamically assign properties to an object in TypeScript.

In this article, we’ll look at how to dynamically assign properties to an object in TypeScript.

How to dynamically assign properties to an object in TypeScript?

To dynamically assign properties to an object in TypeScript, we can define an interface that lets us accept any properties.

For instance, we write

interface MyType {
  typesafeProp1? : number,
  requiredProp1: string,
  [key: string]: any
}

let obj: MyType;
obj = {
  requiredProp1: "foo"
};
obj = {} 
obj.typesafeProp1 = "bar" 

obj.prop = "value";
obj.prop2 = 88;

to define the MyType interface.

The interface stipulates that that the MyType object can have the typesafeProp1 property and it’s a string.

It’s also requires the requiredProp1 property.

Also, we can add properties with keys other than the typesafeProp1 and requiredProp1 with [key: string]: any.

Therefore, obj = {} will give us a compile time error.

And obj.typesafeProp1 = "bar" will also give us an error since 'bar' isn’t a number.

Conclusion

To dynamically assign properties to an object in TypeScript, we can define an interface that lets us accept any properties.

Categories
TypeScript Answers

How to remove an array item in TypeScript?

Sometimes, we want to remove an array item in TypeScript.

In this article, we’ll look at how to remove an array item in TypeScript.

How to remove an array item in TypeScript?

To remove an array item in TypeScript, we can use the array splice method as we do with JavaScript.

For instance, we write:

myArray.splice(index, 1);

to remove the myArray entry at index with splice.

Conclusion

To remove an array item in TypeScript, we can use the array splice method as we do with JavaScript.