greenpress / vuex-composition-helpers

A util package to use Vuex with Composition API easily.
https://www.npmjs.com/package/vuex-composition-helpers
MIT License
290 stars 32 forks source link

Problem with Vuex Composition Helpers and Jest #39

Open bloodf opened 3 years ago

bloodf commented 3 years ago

I'm using Vuex-composition-helpers with TypeScript, and when executing my Jest tests, I get an error saying that it can't find the 'vuex/types' module.

I've got Quasar running and on the project, it's all fine, just on Jest that is not working :(

 Cannot find module 'vuex/types' from 'node_modules/vuex-composition-helpers/src/global.ts'

    Require stack:
      node_modules/vuex-composition-helpers/src/global.ts
      node_modules/vuex-composition-helpers/src/index.ts
      applications/device-installation/src/hooks/vuex/useDeviceInstallation.ts
      applications/device-installation/src/components/active/register/RegisterSteps.vue
      applications/device-installation/test/jest/__tests__/components/active/register/RegisterSteps.spec.ts

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/vuex-composition-helpers/src/global.ts:1:1)

My current Jest config

'use strict'
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');

const packageName = require('./package.json').name.split('@monorepo-domain/').pop();
const moduleName = (() => {
  const dirArray = __dirname
  .split(/(\/|\\)/i)
  .filter(Boolean)
  .filter((i)=> ![`\\`, `/`].includes(i));

  dirArray.pop();

  return dirArray.pop();
})();

module.exports = {
  name: packageName,
  displayName: `${moduleName}/${packageName}`,
  preset: './jest.config.base.js',
  rootDir: '../..',
  coverageDirectory: `<rootDir>/${moduleName}/${packageName}/coverage`,
  setupFilesAfterEnv: [`<rootDir>/${moduleName}/${packageName}/test/jest/jest.setup.js`],
  // noStackTrace: true,
  // bail: true,
  // cache: false,
  // verbose: true,
  // watch: true,
  collectCoverageFrom: [
    `<rootDir>/${moduleName}/${packageName}/src/**/*.{vue,js,jsx,ts,tsx}`,
    `!<rootDir>/${moduleName}/${packageName}/src/**/{App}.{vue,js,jsx,ts,tsx}`,
    `!<rootDir>/${moduleName}/${packageName}/src/{boot,drivers,router,enums,drivers,services}/**/*.{vue,js,jsx,ts,tsx}`,
  ],
  testMatch: [
    `<rootDir>/${moduleName}/${packageName}/src/**/*.jest.(spec|test).+(ts|js)?(x)`,
    `<rootDir>/${moduleName}/${packageName}/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)`,
  ],
  moduleFileExtensions: [
    'js',
    'json',
    'jsx',
    'ts',
    'tsx',
    'vue',
  ],

  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': require.resolve('jest-transform-stub'),
    '\\.(css|less|scss|sass|styl)$': require.resolve('identity-obj-proxy'),
    '^.+\\.(js|jsx)?$': require.resolve('babel-jest'),
    '.*\\.vue$': require.resolve('vue-jest'),
    '^.+\\.(ts|tsx)$': require.resolve('ts-jest'),
  },
  moduleNameMapper: {
    '^vue$': 'vue/dist/vue.common.js',
    '^test-utils$': '@vue/test-utils/dist/vue-test-utils.js',
    '^quasar$': 'quasar/dist/quasar.common.js',
    '.*css$': '@quasar/quasar-app-extension-testing-unit-jest/stub.css',
    '^~/(.*)$': `<rootDir>/${moduleName}/${packageName}/$1`,
    '^statics/(.*)$': `<rootDir>/${moduleName}/${packageName}/src/statics/$1`,
    '^jest/utils/(.*)$': `<rootDir>/${moduleName}/${packageName}/test/jest/utils/$1`,
    ...pathsToModuleNameMapper(compilerOptions.paths, {prefix: `<rootDir>/${moduleName}/${packageName}/`}),
  },

  testURL: 'http://localhost/',

  moduleDirectories: [
    'node_modules',
  ],

  modulePaths: [
    `<rootDir>/${moduleName}/${packageName}/src/`,
  ],

  transformIgnorePatterns: [
    `<rootDir>/${moduleName}/${packageName}/../../node_modules`
  ],

  snapshotSerializers: [
    '<rootDir>/node_modules/jest-serializer-vue',
  ],

  globals: {
    'ts-jest': {
      tsconfig: `<rootDir>/${moduleName}/${packageName}/tsconfig.json`,
      diagnostics: true,
      babelConfig: true,
    },
    'vue-jest': {
      tsconfig: `<rootDir>/${moduleName}/${packageName}/tsconfig.json`,
      experimentalCSSCompile: true,
    }
  },
};
davidmeirlevy commented 3 years ago

Hi!

I actually never tried it on quasar before, so I don’t know the answer to that, but we wrote some adjustments that need to be done with Nuxt, and maybe it’s similar (look at the bottom of the readme file). It’s probably something on the tsconfig file.

If you have the right answer - please feel free to contribute it to the readme.

sorry about that non-helping answer.