Author: John Au-Yeung

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

Categories
TypeScript Answers

How to add strongly-typed functions as parameters possible in TypeScript?

yellow Labrador puppy on floor

Sometimes, we want to add strongly-typed functions as parameters possible in TypeScript.

In this article, we’ll look at how to add strongly-typed functions as parameters possible in TypeScript.

How to add strongly-typed functions as parameters possible in TypeScript?

To add strongly-typed functions as parameters possible in TypeScript, we write define a type to be a function with the type for each parameter and the return type of the function.

For instance, we write

type FunctionName = (n: inputType) => any;

class ClassName {
  save(callback: FunctionName): void {
    callback(data);
  }
}

to create the FunctonName type which is set to type with signature n of type inputType and returns any type data.

And then we set the save method in ClassName to FunctionName to use it.

Conclusion

To add strongly-typed functions as parameters possible in TypeScript, we write define a type to be a function with the type for each parameter and the return type of the function.

Categories
TypeScript Answers

How to use get and set in TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use get and set in TypeScript.

In this article, we’ll look at how to use get and set in TypeScript.

How to use get and set in TypeScript?

To use get and set in TypeScript, we can put it in a class.

For instance, we write:

class Foo {
  private _bar: boolean = false;
  get bar(): boolean {
    return this._bar;
  }
  set bar(value: boolean) {
    this._bar = value;
  }
}

to add a bar instance variable with get and set.

In get bar, we return the value of this._bar.

And we add set bar to set the value of this._bar to `value.

get is used for creating getter instance variables.

And set is used creatring setter instance variables.

We can then set bar with

const myFoo = new foo();
myFoo.bar = false;

and get bar with myFoo.bar.

Conclusion

To use get and set in TypeScript, we can put it in a class.

Categories
TypeScript Answers

How to convert a string to number in TypeScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to convert a string to number in TypeScript.

In this article, we’ll look at how to convert a string to number in TypeScript.

How to convert a string to number in TypeScript?

To convert a string to number in TypeScript, we can use the + operator, parseInt or parseFloat functions.

For instance, we write:

const x = "32";
const y: number = +x;

to convert x to a floating point number with +

Or we write

const x = "32";
const y: number = parseInt(x);

to convert x to an integer with parseInt

const x = "32";
const y: number = parseFloat(x);

to convert x to a floating point number with parseFloat

Conclusion

To convert a string to number in TypeScript, we can use the + operator, parseInt or parseFloat functions.

Categories
JavaScript Answers

How to mock an exported const in Jest?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to mock an exported const in Jest.

In this article, we’ll look at how to mock an exported const in Jest.

How to mock an exported const in Jest?

To mock an exported const in Jest, we can use the jest.mock method.

For instance, we write:

const mockTrue = {
  ENABLED: true
};
const mockFalse = {
  ENABLED: false
};

describe('allowThrough', () => {
  beforeEach(() => {
    jest.resetModules();
  });

  test('success', () => {
    jest.mock('./constants', () => mockTrue)
    const {
      ENABLED
    } = require('./constants');
    const {
      allowThrough
    } = require('./allowThrough');

    expect(ENABLED).toBe(true);
    expect(allowThrough({
      value: 1
    })).toBe(true);
  });

  test('fail, ENABLED === false', () => {
    jest.mock('./constants', () => mockFalse)
    const {
      ENABLED
    } = require('./constants');
    const {
      allowThrough
    } = require('./allowThrough');

    expect(ENABLED).toBe(false);
    expect(allowThrough({
      value: 1
    })).toBe(false);
  });
});

to mock the ./constants with a function that returns the mocked exports.

Then can use the require the ./constants with require and get the ENABLED exported member.

Jest will use the mocked version of that for the test since we called jest.mock to mock it.

We use expect to check that the mocked ENABLED value it what we expect.

Conclusion

To mock an exported const in Jest, we can use the jest.mock method.

Categories
JavaScript Answers React Answers

How to simulate a button click in Jest?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to simulate a button click in Jest.

In this article, we’ll look at how to simulate a button click in Jest.

How to simulate a button click in Jest?

To simulate a button click in Jest, we can call the simulate method.

For instance, we write:

import React from 'react';
import {
  shallow
} from 'enzyme';
import Button from './Button';

describe('Test Button component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    const button = shallow(<Button onClick={mockCallBack}>Ok</Button>);
      button.find('button').simulate('click'); expect(mockCallBack.mock.calls.length).toEqual(1);
    });
  });
})

to call shallow to mount the Button component.

Then we call find with 'button' to find the button element.

And then we call simulate with 'click' to simulate a click on it.

Then we call expect to check that the mockCallBack has been called once by checking mockCallBack.mock.calls.length.

Conclusion

To simulate a button click in Jest, we can call the simulate method.