Nuxt I18N and switchLocalePath elements break the test

[bat79a]

Hello.

• What you're trying to do
  Launch test on the root page who have some I18N elements and a switchLocalePath in my code.

• What happened
  AVA test display this error :

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! management@1.0.0 test:e2e: `cross-env TEST=e2e ava ./test/e2e/**/*`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the management@1.0.0 test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-07-02T13_07_51_805Z-debug.log
npm ERR! Test failed.  See above for more details.

Error for i18N with this {{ $t('www_downloads_brochure') }} code :

name: AssertionError
    message: Rejected promise returned by test
    values:
      'Rejected promise returned by test. Reason:': |-
        TypeError {
          message: '_vm.$t is not a function',
        }

Error for switchLocalePath with this code :

name: AssertionError
    message: Rejected promise returned by test
    values:
      'Rejected promise returned by test. Reason:': |-
        TypeError {
          message: '_vm.switchLocalePath is not a function',
        }

• What you expected to happen
  That the test pass

We'll also need your AVA configuration (in package.json or ava.config.* configuration files) and how you're invoking AVA. Share the installed AVA version (get it by running npx ava --version).

  "devDependencies": {
    "@ava/babel": "^1.0.1",
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@vue/test-utils": "^1.0.3",
    "ava": "^3.9.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-webpack-alias-7": "^0.1.1",
    "cross-env": "^7.0.2",
    "eslint": "^7.3.1",
    "eslint-plugin-import": "2.22.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "jsdom": "^16.2.2",
    "jsdom-global": "^3.0.2",
    "require-extension-hooks": "^0.3.3",
    "require-extension-hooks-babel": "^1.0.0-beta.1",
    "require-extension-hooks-vue": "^3.0.0",
    "typescript": "^3.9.6",
    "vue-template-compiler": "^2.6.11"
  }

[novemberborn]

I'm not familiar with the technologies you're using here. Best I can tell this is not an AVA issue.

AVA being a Node.js test runner you need to get a little creative in faking browser environments. I can see some dependencies meant to help with that but you did not share your AVA configuration.

(I'm closing this issue for housekeeping purposes, but let's keep the conversation going.)

[jfarellano]

Hey I had the exact same problem and just managed to fix it. The problem is that the nuxt instance that you are referencing does not have the nuxt-i18n module set up. For you to fix it and also taking into account that it would happen with other modules. You just have to add it to the nuxt configuration in the module property before building it. Like this:

const config = {
    dev: false,
    rootDir: resolve(__dirname, '../../'),
    modules: [
      'nuxt-i18n'
    ]
  }
nuxt = new Nuxt(config)

[bat79a]

Hello thx a lot.

But the nuxt-i18 lib is already in my modules configuration in nuxt.config.json.

  modules: [
    // Doc: https://github.com/nuxt-community/dotenv-module ['@nuxtjs/dotenv', { systemvars: true }]
    // '@nuxtjs/dotenv',
    // Doc : https://github.com/victor-perez/nuxt-helmet#readme
    'nuxt-helmet',
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc : https://github.com/nuxt-community/proxy-module
    '@nuxtjs/proxy',
    // Doc: https://www.npmjs.com/package/nuxt-oauth
    'nuxt-oauth',
    // Doc: https://github.com/Developmint/nuxt-webfontloader
    'nuxt-webfontloader',
    // Doc: https://www.npmjs.com/package/nuxt-fontawesome
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        {
          set: '@fortawesome/free-regular-svg-icons',
          icons: ['far']
        }
      ]
    }],
    // Doc: https://nuxt-community.github.io/nuxt-i18n/
    'nuxt-i18n',
...

[jfarellano]

Keep in mind that you are creating a new instance of Nuxt while you are doing your e2e tests, so that means that your nuxt.config.json is not being referenced at all. Thats why on the config hash while building your new Nuxt instance you have to reference the module for it to take it into account.