Author: John Au-Yeung

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

Categories
JavaScript Answers

How to run Jest tests only for current folder?

white and brown long coated small dog

Sometimes, we want to run Jest tests only for current folder.

In this article, we’ll look at how to run Jest tests only for current folder.

How to run Jest tests only for current folder?

To run Jest tests only for current folder, we can run jest with the path of the folder with the tests we want to run.

For instance, we run

npm test dev/app

to run the tests in the dev/app folder given that the test script runs jest.

We can also set the testPathPattern option to the folder with the tests we want to run.

For instance, we run

jest --watchAll --testPathPattern=dev/app

to run the tests in dev/app.

Conclusion

To run Jest tests only for current folder, we can run jest with the path of the folder with the tests we want to run.

Categories
JavaScript Answers

How to mock platform detection in Jest and React Native?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to mock platform detection in Jest and React Native.

In this article, we’ll look at how to mock platform detection in Jest and React Native.

How to mock platform detection in Jest and React Native?

To mock platform detection in Jest and React Native, we can call jest.mock to mock the Platform module.

For instance, we write:

jest.mock('Platform', () => {
  const Platform = require.requireActual('Platform');
  Platform.OS = 'android';
  return Platform;
});

to call jest.mock with 'Platform and a function that return the Platform object.

Before we return it, we set the Platform.OS property to 'android' so Platform.OS would be 'android' in our tests.

Conclusion

To mock platform detection in Jest and React Native, we can call jest.mock to mock the Platform module.

Categories
JavaScript Answers

How to mock React custom hook returned value with Jest?

closeup photo of yellow Labrador retriever puppy

To mock React custom hook returned value with Jest, we can call jest.mock.

For instance, we write:

jest.mock('module_name', () => ({
  useRect: () => [300, 200, jest.fn()]
}));

to call jest.mock with the module name and the function to mock the useRect hook with a function that returns the mocked values of the hook.

If we want to mock the hook once for a test, then use jest.spyOn with

import * as hooks from 'module_name';

it('a test', () => {
  jest.spyOn(hooks, 'useRect').mockImplementation(() => ([100, 200, jest.fn()]));
  // ...
});

to mock the useRect hook and return the mocked return values with mockImplementation.

We can just mock the return values since hooks are pure functions so they don’t commit side effects.

Categories
JavaScript Answers TypeScript Answers

How to set the data type of Axios mock using Jest TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to set the data type of Axios mock using Jest TypeScript.

In this article, we’ll look at how to set the data type of Axios mock using Jest TypeScript.

How to set the data type of Axios mock using Jest TypeScript?

To set the data type of Axios mock using Jest TypeScript, we can use the jest.Mocked<typeof axios> type.

For instance, we write

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

//...

mockedAxios.get.mockRejectedValue('error');
mockedAxios.get.mockResolvedValue({ data: {} });

to set the type of mockedAxios to jest.Mocked<typeof axios> with as.

We mock Axios with jest.mock('axios').

And then we can call mockedAxios.get.mockRejectedValue or mockedAxios.get.mockResolvedValue to set the mocked resolve or reject value of the promise returned by axios.get.

Conclusion

To set the data type of Axios mock using Jest TypeScript, we can use the jest.Mocked<typeof axios> type.

Categories
JavaScript Answers TypeScript Answers

How to fix the “Cannot find name ‘it'” error in Jest TypeScript?

closeup photo of yellow Labrador retriever puppy

To fix the "Cannot find name ‘it’" error in Jest TypeScript, we need to install a few packages and change the test config.

First, we install the Jest TypeScript packages with

npm i npm install jest @types/jest ts-jest

Then in the jest.config.js file at the root folder, we add

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

so Jest can pick up test files and module files in the tests.

Then in tsconfig.json, we have

{
  "compilerOptions": {
    //...
    "types": ["reflect-metadata", "jest"],
    "typeRoots": ["./types", "./node_modules/@types"]
    //...
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["./src/**/*.tsx", "./src/**/*.ts"]
}

so that the TypeScript compiler can pick up the TypeScript source code files in the folder by putting the include array.

And we exclude paths of non production source files with the exclude option.

We add 'jest' to types so that the type definitions of Jest is picked up by the TypeScript compiler.