Question

[已解决] 请参阅底部的编辑。我正在学习使用 vuejs，我想从一开始就使用好的做法。所以我使用 nuxtjs for SSR 和 Jest 来对我的组件进行单元测试。

我不知道如何将 jest 配置为指向我的根目录而不是某个 src/ 某处... 在我的测试文件中，如果我更改组件路径并添加一个简单的 ../，它可以工作，但它不是它应该的样子。而 jest.config.json 中的 moduleNameMapper 似乎不起作用...

请注意，我没有 src/ 目录，只有一个包含我的组件、测试、页面等的 client/ 目录。

这是我的文件，如果您缺少我的文件： ./package.json

{
  "private": true,
  "scripts": {
    "dev": "nuxt -c client/nuxt.config.js",
    "build": "nuxt build -c client/nuxt.config.js",
    "start": "nuxt start -c client/nuxt.config.js",
    "lint": "eslint --fix --ext .js,.vue client/",
    "test": "jest"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@nuxtjs/router": "^1.6.1",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dotenv": "^8.2.0",
    "jquery": "^3.6.0",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.15.3",
    "popper.js": "^1.16.1",
    "sweetalert2": "^10.15.6",
    "typescript": "^4.2.3",
    "vform": "^1.0.1",
    "vue-i18n": "^8.24.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/eslint-parser": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/test-utils": "^1.1.3",
    "eslint": "^7.22.0",
    "fs-extra": "^9.1.0",
    "jest": "^26.6.3",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "ts-jest": "^26.5.4",
    "ts-node": "^9.1.1",
    "vue-jest": "^3.0.7"
  }
}

./client/nuxt.config.js

require('dotenv').config()
const { join } = require('path')
const { copySync, removeSync } = require('fs-extra')

module.exports = {
  ssr: false,

  srcDir: __dirname,

  env: {
    apiUrl: process.env.API_URL || process.env.APP_URL + '/api',
    appName: process.env.APP_NAME || 'Laravel Nuxt',
    appLocale: process.env.APP_LOCALE || 'en',
    githubAuth: !!process.env.GITHUB_CLIENT_ID
  },

  head: {
    title: process.env.APP_NAME,
    titleTemplate: '%s - ' + process.env.APP_NAME,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  loading: { color: '#007bff' },

  router: {
    middleware: ['locale', 'check-auth']
  },

  css: [
    { src: '~assets/sass/app.scss', lang: 'scss' }
  ],

  plugins: [
    '~components/global',
    '~plugins/i18n',
    '~plugins/vform',
    '~plugins/axios',
    '~plugins/fontawesome',
    '~plugins/nuxt-client-init',
    { src: '~plugins/bootstrap', mode: 'client' }
  ],

  modules: [
    '@nuxtjs/router'
  ],

  build: {
    extractCSS: true
  },
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },
  hooks: {
    generate: {
      done (generator) {
        // Copy dist files to public/_nuxt
        if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
          const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
          removeSync(publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
          removeSync(generator.nuxt.options.generate.dir)
        }
      }
    }
  }
}

./jest.config.ts

// Sync object
module.exports = {
    preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
    moduleNameMapper: {
        "/^@\/(.*)$/": "<rootDir>/$1"
    },
};

./jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

这是我得到的错误，无论我在 moduleNameMapper 中设置了什么：

❯ node .\node_modules\jest\bin\jest.js --no-cache
 FAIL  client/__tests__/demo.spec.js
  ● Test suite failed to run

    Configuration error:

    Could not locate module @/client/components/Navbar mapped as:
    C:\laragon\www\laravel-nuxt\src\$1.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "C:\laragon\www\laravel-nuxt\src\$1"
      },
      "resolver": undefined
    }

      1 | import { mount } from '@vue/test-utils'
      2 |
    > 3 | import Navbar from '@/client/components/Navbar'
        | ^
      4 |
      5 | test('Navbar', () => {
      6 |   // restitue le composant

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
      at Object.<anonymous> (client/__tests__/demo.spec.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.972 s
Ran all test suites.

[编辑] ：问题出在 jes.conf.js 文件中，只需删除该行中的 / ： "/^@/(.)$/" => "^@/( .)$"。

VueJs + Nuxt + Jest：找不到模块

0 个答案: