Author: John Au-Yeung

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

Categories
JavaScript Answers

How to check if function was called with Jest and JavaScript?

Labrador retriever puppy walking on green grass

To check if function was called with Jest and JavaScript, we create a spy and use the toHaveBeenCalled method.

For instance, we write

const child = require("./child");
const main = require("./add").main;

const spy = jest.spyOn(child, "child");

describe("main", () => {
  it("should call child fn", () => {
    expect(main(1)).toBe(2);
    expect(spy).toHaveBeenCalled();
  });
});

to create a test with it.

We call jest.spyOn in the it test callback to create a spy on the child module’s child function.

Then we call main which calls child.

And then we call expect with spy and toHaveBeenCalled to check if the child function is called.

Categories
JavaScript Answers

How to copy a URL to the clipboard with JavaScript?

yellow Labrador puppy on floor

To copy a URL to the clipboard with JavaScript, we can call navigator.clipboard.writeText with the URL string.

For instance, we write:

<button>
  copy
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  navigator.clipboard.writeText('http://example.com');
}

We get the button with document.querySelector.

Then we set the button.onclick property to a function that calls navigator.clipboard.writeText with 'http://example.com' to copy 'http://example.com' to the clipboard.

Categories
React Answers

How to download file on button click with React and JavaScript?

Labrador retriever puppy walking on green grass

To download file on button click with React and JavaScript, we create a link

And then we can create a hidden link that has the blob’s object URL set as the href attribute and click on the link programmatically to download it.

For instance, we write:

import React from "react";

export default function App() {
  const downloadFile = () => {
    const element = document.createElement("a");
    element.href = url;
    element.download = "filename";
    document.body.appendChild(element);
    element.click();
  };

  return (
    <div>
      <button onClick={downloadFile}>Download txt</button>
    </div>
  );
}

to define the downloadFile function to put the 'hello world' string in a blob and download that as a text file.

In the function, we create an a element with document.createElement.

Next, we set element.href to the fil’s URL.

And we set the file name of the downloaded file by setting the element.download property.

Next, we call document.body.appendChild with the link element to attach it to the body.

Finally, we call element.click to click on the hidden link to download the file.

Categories
TypeScript Answers

How to fix “cannot find module ‘ts-jest/utils'” error with Jest and TypeScript?

Labrador retriever puppy walking on green grass

To fix "cannot find module ‘ts-jest/utils’" error with Jest and TypeScript, we install the ts/jest package.

To install it, we run

npm i -D jest typescript
npm i -D ts-jest @types/jest

to install the typescript and ts-jest modules with NPM.

typescript is a prerequisite for the ts-jest module.

Then we create a Jest config with

npx ts-jest config:init

Then we run tests with

npm test

or

npx jest

With Yarn, we run

yarn add --dev jest typescript
yarn add --dev ts-jest @types/jest

to install the packages.

We run

yarn ts-jest config:init

to create the Jest config.

And we run

yarn test

or

yarn jest

to run the tests.

Categories
JavaScript Answers

How to format current time into yyyy-mm-dd format with JavaScript?

Labrador retriever puppy walking on green grass

To format current time into yyyy-mm-dd format with JavaScript, we call toLocaleString, toLocaleDateString or toLocaleTimeString.

For instance, we write

const d = new Date();
console.log(d.toLocaleString('en-SE'));
console.log(d.toLocaleDateString('en-SE'));

to create date d with the current datetime.

And then we call toLocaleString to return a string with the human readable locale datetime string with date and time being the values in d.

We call toLocaleDateString to return a string with the human readable locale date string with date and time being the values in d.

We call them all with a locale that has dates in yyyy-mm-dd format to return a date string in this format.

Conclusion

To format current time with JavaScript, we call toLocaleString, toLocaleDateString or toLocaleTimeString.