How can this library be integrated with jest?

[Loremaster]

Hey!

Thank you for your library! It's really helpful when you use vue composition api. However I am trying to find a way to test it properly. Currently jest raises an error for me:

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/serj/Projects/Email_platform/node_modules/vuex-composition-helpers/src/index.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './global'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      144 | <script lang="ts">
      145 | import { Ref, defineComponent, ref, computed, reactive } from "@vue/composition-api";
    > 146 | import { useGetters, useActions } from "vuex-composition-helpers";
          | ^
      147 | import { GetterTree, ActionTree, ActionContext } from "vuex";
      148 | import { ILanguageDirection, IMedia, IMediaForm, IMediaAttributes } from "../interfaces";
      149 | import useValidationState from "helpers/useValidationState";

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
      at Object.<anonymous> (app/javascript/content_library/components/EditMediaModal.vue:146:1)
      at Object.<anonymous> (app/javascript/content_library/components/__tests__/EditMediaModal.spec.ts:17:1)

My jest config:

module.exports = {
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "vue"],
  modulePathIgnorePatterns: ["<rootDir>/.*/__mocks__"],
  setupFiles: ["<rootDir>/jest_setup.ts", "jest-date-mock"],
  moduleDirectories: ["node_modules", "<rootDir>/app/javascript"],
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "/__tests__/.*\\.(ts|tsx|js)$",
  transformIgnorePatterns: ["node_modules/(?!vee-validate/dist/rules)"],
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  testPathIgnorePatterns: ["<rootDir>/app/assets", "<rootDir>/config/webpack/test.js", "<rootDir>/vendor"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/app/javascript/$1",
    "\\.(css|less)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/app/javascript/__mocks__/fileMock.js",
  },
  restoreMocks: true,
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.jest.json",
      babelConfig: true,
      diagnostics: false,
    },
  },
};

[davidmeirlevy]

As a fine contributor added just yesterday to the README file, you should add this library to the included transpilation in order to use it. You can see the instruction inside the readme.

Comment here if you still encounter the problem. I keep this issue open until then.

[Loremaster]

Wow thank you for such quick reply!

This is what I did and it helped:

module.exports = {
  transformIgnorePatterns: ["node_modules/(?!vee-validate/dist/rules|vuex-composition-helpers)"],
};

[davidmeirlevy]

👯

[davidmeirlevy]

Thanks for the compliments! :)

BTW, this package made as part of an opensource project called "Greenpress", which is a fully-alternative for WordPress, built for the 21st century (micro-services, node, Vue, Nuxt, and other great stuff).

If you want to become a part of a fun opensource, you're more than welcome to contribute or to use it for yourself. Start here and see for yourself: https://github.com/greenpress/greenpress

Have a nice day :)

[jordanA29]

@Loremaster @davidmeirlevy Hi ! I have been struggling to make my Jest test pass. Here is my jest.config :

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  setupFiles: ['<rootDir>/tests/setupTest.js'],
  modulePaths: [
    '<rootDir>/src',
  ],
  moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
  moduleDirectories: ['node_modules', 'src'],
  transform: {
    '.+\\.(js|ts)$': '<rootDir>/node_modules/babel-jest',
  },
  transformIgnorePatterns: ['/node_modules/(?!(vuex-composition-helpers)/)'],
}`

I use JavaScript in my project and I added:

chainWebpack: config => { config .rule('ts') .include .add(/vuex-composition-helpers/) }, and transpileDependencies: [ 'vuex-composition-helpers', ], to my vue.config.js.

The issue is that when I run my test I get a syntax error from the vuex-composition-helpers global.ts file. Do you see anything missing to make this work?

[davidmeirlevy]

@jordanA29 you can avoid transpiling the TS files and just import vuex-composition-helpers/dist which is an already-transpiled methods.