Category: JavaScript

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.

Categories
JavaScript Answers

How to reset or clear a spy in Jest?

selective focus photography of sleeping baby

Sometimes, we want to reset or clear a spy in Jest.

In this article, we’ll look at how to reset or clear a spy in Jest.

How to reset or clear a spy in Jest?

To reset or clear a spy in Jest, we call jest.clearAllMocks.

For instance, we write:

afterEach(() => {
  jest.clearAllMocks();
});

to call jest.clearAllMocks in the afterEach callback to clear all spies or mocks after each test is run.

Conclusion

To reset or clear a spy in Jest, we call jest.clearAllMocks.

Categories
JavaScript Answers

How to test axios in Jest?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to test axios in Jest.

In this article, we’ll look at how to test axios in Jest.

How to test axios in Jest?

To test axios in Jest, we can mock the axios dependency.

For instance, we write

import * as axios from "axios";

jest.mock("axios");

// ...

test("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({
    data: {
      //...
    }
  }));
  // ...
});

test("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({
    ...
  }));
  // ...
});

to call axios.get.mockImplementation to mock the implementation of the axios.get method with a function that returns a promise, which we passed in as the argument of mockImplementation.

We also called jest.mock("axios"); to mock the whole axios module.

Conclusion

To test axios in Jest, we can mock the axios dependency.