属性“mockResolvedValue”在类型“<T = any, R = AxiosResponse<T>>”上不存在

Question

我正在尝试在 Jest 官方文档中执行模拟模块示例： https: //jestjs.io/docs/mock-functions

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  return Users.all().then(data => expect(data).toEqual(users));
});

但是mockResolvedValue给了我这个打字稿错误：

类型“<T = any, R = AxiosResponse>(url: string, config?: AxiosRequestConfig | undefined) => Promise”上不存在属性“mockResolvedValue”。ts(2339)

我的开发依赖：

"devDependencies": {
    "@babel/cli": "7.13.0",
    "@babel/core": "7.12.17",
    "@babel/plugin-proposal-class-properties": "7.12.13",
    "@babel/preset-env": "7.12.17",
    "@babel/preset-react": "7.12.13",
    "@babel/preset-typescript": "7.12.17",
    "@jest/reporters": "26.6.2",
    "@types/axios": "0.14.0",
    "@types/jest": "26.0.20",
    "@types/luxon": "1.26.2",
    "@types/node": "14.14.35",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.2",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.12",
    "@types/react-router-dom": "5.1.7",
    "@types/redux-actions": "2.6.1",
    "@types/redux-logger": "3.0.8",
    "@types/redux-mock-store": "1.0.2",
    "@types/styled-components": "5.1.9",
    "@types/webpack-env": "1.16.0",
    "@types/yup": "0.29.9",
    "@typescript-eslint/eslint-plugin": "4.15.2",
    "@typescript-eslint/parser": "4.15.1",
    "axios": "0.21.1",
    "axios-hooks": "2.5.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "26.6.3",
    "babel-loader": "8.2.2",
    "babel-plugin-css-modules-transform": "1.6.2",
    "babel-plugin-inline-react-svg": "2.0.0",
    "backstopjs": "5.0.6",
    "cheerio": "0.22.0",
    "chokidar-cli": "2.1.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "enzyme-to-json": "3.6.1",
    "eslint": "7.20.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-config-react-app": "6.0.0",
    "eslint-plugin-flowtype": "5.2.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "24.1.5",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "j1r-react-scripts": "1.7.3",
    "j1r-wiremock-cli": "0.3.7",
    "jest": "26.6.3",
    "jest-environment-enzyme": "7.1.2",
    "jest-enzyme": "7.1.2",
    "jest-junit": "12.0.0",
    "jest-mock-promise": "1.1.10",
    "jest-resolve": "26.6.2",
    "jest-watch-typeahead": "0.6.1",
    "lighthouse": "7.1.0",
    "lint-staged": "10.5.4",
    "miragejs": "0.1.41",
    "nightwatch": "1.5.1",
    "npm-run-all": "4.1.5",
    "prettier": "2.2.1",
    "prop-types": "15.7.2",
    "react-app-rewire-babel-loader": "0.1.1",
    "react-app-rewired": "2.1.8",
    "react-scripts": "3.4.1",
    "redux-devtools-extension": "2.13.8",
    "redux-mock-store": "1.5.4",
    "sass-loader": "11.0.1",
    "selenium-server": "3.141.59",
    "sort-package-json": "1.49.0",
    "ts-mockito": "2.6.1",
    "typedoc": "0.19.2",
    "typescript": "4.2.2",
    "webpack": "5.23.0",
    "whatwg-fetch": "3.6.1",
    "react-app-rewire-alias": "1.0.1"
  },
  "jest-junit": {
    "suiteName": "tests",
    "outputDirectory": "./generated",
    "outputName": "./jest-report.xml",
    "classNameTemplate": "{classname}-{title}",
    "titleTemplate": "{classname}-{title}",
    "ancestorSeparator": " > ",
    "usePathForSuiteName": "true"
  },

谢谢您的帮助

Answer 1

将 Axios 函数转换为模拟对我来说很有效。所以将你的模拟更改为

(axios.get as jest.Mock).mockResolvedValue(resp);

应该让它发挥作用。

Answer 2

解决模拟对象的 TS 类型问题的两种方法。

1. 使用jest.MockedFunction

import axios from 'axios';
jest.mock('axios');

// ok
(axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValue({});

// Better
const mAxiosGet = jest.MockedFunction<typeof axios.get> = axios.get;
mAxiosGet.mockResolvedValue({});

2. 模拟的辅助函数ts-jest。

import axios from 'axios';
import { mocked } from 'ts-jest/utils';

jest.mock('axios');
const mAxiosGet = mocked(axios.get);

expect(jest.isMockFunction(mAxiosGet)).toBeTruthy();
mAxiosGet.mockResolvedValueOnce({});