README: Suggest asset mocks

[raineorshine]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Underlying tools
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

Other information:

Using Vue v3 and vue add unit-jest I got SyntaxError: Invalid or unexpected token on an imported gif. Adding asset mocks using moduleNameMapper (StackOverflow) fixed it. Let me know if a different approach to this problem is recommended.

  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/src/__mock__/file-mock.js',
    '\\.(css|less)$': '<rootDir>/src/__mock__/style-mock.js',
  },

I just noticed it's also possible with a transform via jest-transform-stub. Not sure which is preferable.

FYI My dependency versions:

    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-plugin-unit-jest": "^4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "vue-jest": "^5.0.0-0",

[raineorshine]

I can also add this to the vue-cli documentation if desired. Looks to be the same content but not sure if they are kept in sync in an automated fashion.

[haoqunjiang]

Thanks for the suggestion!

But I think there's a better place to fix this issue:

vue-cli/packages/@vue/cli-plugin-unit-jest/presets/default/jest-preset.js

Line 12 in 451f3d2

'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':

jest-transform-stub is already configured in the default preset. The problem is that the gif extension was missed out. Fixing the preset can silently solve the problem for everyone without making them aware of the underlying configuration.

[raineorshine]

Ah, I wasn't aware that jest-transform-stub was already included! Good call. Proposed in #6170.