vue-svg icon indicating copy to clipboard operation
vue-svg copied to clipboard

How do you integrate it within the test utils library

Open dvago opened this issue 3 years ago • 0 comments

Given the testing suite @vue/test-utils based on Jest and the usage of ?inline resource flags within the codebase. What do you suggest as configuration in order to make the testing suite running without failures?

Browsing the web it is possible to find solutions like:

Add to the transform key of the jest.config.js file:

'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)(\\?inline)?$': 'jest-transform-stub',

Add to the moduleNameMapper key a new entry as such:

moduleNameMapper: {
   '^@/(.*svg)(\\?inline)$': '<rootDir>/src/$1',
   '^@/(.*)$': '<rootDir>/src/$1',
},

Unfortunately both of these changes aren't enough, when touching the moduleNameMapper the test suite fails with:

 Could not locate module @/${type}/${view}.vue mapped as:
    /[OS PATH TO SOURCE]/src/${type}/${view}.vue.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
      },
      "resolver": null
    }

The same error applies when the new line gets removed:

Could not locate module @/assets/images/[MY IMAGE FILE].svg?inline mapped as:
    /[OS PATH TO SOURCE]/src/assets/images/[MY IMAGE FILE].svg?inline.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
      },
      "resolver": null
    }

Note: the problem happens on a vue-cli based project with the following dependency versions:

"vue-cli-plugin-svg": "^0.1.3",
"@vue/test-utils": "^1.3.0",
"vue-jest": "^3.0.7",
"jest": "^27.4.1",
"@vue/cli-service": "^4.5.15",

dvago avatar Dec 07 '21 17:12 dvago