Property 'nextTick' does not exist on type when importing Vue3 in Jest test

Viewed 71

I'm trying to import nextTick and a few other function from Vue3 in my Jest tests, but I see this error Property 'nextTick' does not exist on type 'typeof import("/Users/XXXXX/dev/XXXXX/src/XXXXX/packages/XXXXX/node_modules/vue/dist/vue")'.

import * as vue from 'vue';
import useClassNames from './useClassNames';

describe('useClassNames', () => {
  it('render', async () => {
    const result = useClassNames([]);
    await vue.nextTick();
    expect(result).toBe([]);
  });
});

What's strange is that nextTick is there. Object.keys(vue) returns:

[
  'EffectScope',
  'ReactiveEffect',
  'customRef',
  'effect',
  'effectScope',
  'getCurrentScope',
  'isProxy',
  'isReactive',
  'isReadonly',
  'isRef',
  'isShallow',
  'markRaw',
  'onScopeDispose',
  'proxyRefs',
  'reactive',
  'readonly',
  'ref',
  'shallowReactive',
  'shallowReadonly',
  'shallowRef',
  'stop',
  'toRaw',
  'toRef',
  'toRefs',
  'triggerRef',
  'unref',
  'camelize',
  'capitalize',
  'normalizeClass',
  'normalizeProps',
  'normalizeStyle',
  'toDisplayString',
  'toHandlerKey',
  'BaseTransition',
  'Comment',
  'Fragment',
  'KeepAlive',
  'Static',
  'Suspense',
  'Teleport',
  'Text',
  'callWithAsyncErrorHandling',
  'callWithErrorHandling',
  'cloneVNode',
  'compatUtils',
  'computed',
  'createBlock',
  'createCommentVNode',
  'createElementBlock',
  'createElementVNode',
  'createHydrationRenderer',
  'createPropsRestProxy',
  'createRenderer',
  'createSlots',
  'createStaticVNode',
  'createTextVNode',
  'createVNode',
  'defineAsyncComponent',
  'defineComponent',
  'defineEmits',
  'defineExpose',
  'defineProps',
  'getCurrentInstance',
  'getTransitionRawChildren',
  'guardReactiveProps',
  'h',
  'handleError',
  'initCustomFormatter',
  'inject',
  'isMemoSame',
  'isRuntimeOnly',
  'isVNode',
  'mergeDefaults',
  'mergeProps',
  'nextTick', <-- here it is
  'onActivated',
  'onBeforeMount',
  'onBeforeUnmount',
  'onBeforeUpdate',
  'onDeactivated',
  'onErrorCaptured',
  'onMounted',
  'onRenderTracked',
  'onRenderTriggered',
  'onServerPrefetch',
  'onUnmounted',
  'onUpdated',
  'openBlock',
  'popScopeId',
  'provide',
  'pushScopeId',
  'queuePostFlushCb',
  'registerRuntimeCompiler',
  'renderList',
  'renderSlot',
  'resolveComponent',
  'resolveDirective',
  'resolveDynamicComponent',
  'resolveFilter',
  'resolveTransitionHooks',
  ... 44 more items
]

The same error happens when I try to import h and other functions.

import vue from 'vue'; returns undefined.

import { nextTick } from 'vue'; returns src/hooks/useClassNames.spec.ts:1:10 - error TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'nextTick'.

Installed dependencies

{
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "test-with-coverage": "COLLECT_TEST_COVERAGE=TRUE jest",
    "test": "jest"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@testing-library/dom": "^8.14.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/user-event": "^14.2.1",
    "@types/jest": "^27.0.2",
    "@types/jest-axe": "^3.5.4",
    "@types/node": "^16.11.6",
    "@typescript-eslint/eslint-plugin": "^4.28.3",
    "@typescript-eslint/parser": "^4.28.3",
    "@vitejs/plugin-vue": "2.3.3",
    "@vue/test-utils": "^2.0.0",
    "@vue/vue3-jest": "26.0.1",
    "babel-jest": "^26.6.3",
    "eslint": "^7.31.0",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^9.1.1",
    "jest": "~26.6.3",
    "jest-axe": "^6.0.0",
    "prettier": "2.1.2",
    "sass": "^1.52.2",
    "ts-jest": "~26.3.0",
    "typescript": "4.0.8",
    "vite": "^2.9.10",
    "vue-tsc": "0.37.0"
  }
}

Jest configuration

const collectCoverage = process.env.COLLECT_TEST_COVERAGE === 'TRUE';

module.exports = {
  // Test in browser like environment.
  testEnvironment: 'jsdom',
  moduleDirectories: ['node_modules', 'src'],
  moduleFileExtensions: ['vue', 'ts', 'js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js$': 'babel-jest',
    '^.+\\.ts$': 'ts-jest',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  collectCoverage,
  collectCoverageFrom: ['src/{components,hooks}/**/*.{js,ts,vue}'],
  coverageReporters: ['html', 'text-summary'],
  coverageDirectory: '<rootDir>/coverage',
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM",
      "dom.iterable"
    ],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "jest.setup.ts",
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node"
  },
  "include": [
    "vite.config.ts"
  ]
}
0 Answers
Related