时间戳

首页 > 解决方案 > Vue3 测试库 - vue-i18n 不加载文本

vue.js - Vue3 测试库 - vue-i18n 不加载文本

问题描述

我似乎无法让以下示例与 vue3 和测试库一起使用。 https://github.com/testing-library/vue-testing-library/blob/main/src/tests/translations-vue-i18n.js _ _

我什至尝试像这样修改示例以通过将消息注入模拟但没有运气来识别 $t 。

有没有人有一个适用于 vue 3 的例子？

以下是详细信息...

Translations.spec.js

import '@testing-library/jest-dom'
import {render, fireEvent} from '@testing-library/vue'
import Vuei18n from 'vue-i18n'
import Translations from '@/components/Translations'

const messages = {
  en: {
    Hello: 'Hello!',
    message: {
        hello: 'Hello!'
    }
  },
  ja: {
    Hello: 'こんにちは',
    message: {
        hello: 'こんにちは'
    }
  },
}

test('renders translations', async () => {
  const {queryByText, getByText} = render(Translations, {
    global: {
      mocks: {
        $t: (messages) => messages
      }
    }
  }, vue => {
    // Let's register and configure Vuei18n normally
    vue.use(Vuei18n)

    const i18n = new Vuei18n({
      locale: 'ja',
      fallbackLocale: 'ja',
      messages,
    })

    // Notice how we return an object from the callback function. It will be
    // merged as an additional option on the created Vue instance.
    return {
      i18n,
    }
  })

  //expect(getByText('Hello!')).toBeInTheDocument()

  //await fireEvent.click(getByText('Japanese'))

  expect(getByText('こんにちは')).toBeInTheDocument()

  //expect(queryByText('Hello!')).not.toBeInTheDocument()
})

翻译.vue

<template>
  <div>
    <h2>{{ $t("Hello") }}</h2>
    <h2>{{ $t("message.hello") }}</h2>
    <button @click="switchLocale('en')">English</button>
    <button @click="switchLocale('ja')">Japanese</button>
  </div>
</template>

<script>
export default {
  name: 'Translations',

  methods: {
    switchLocale(locale) {
      this.$i18n.locale = locale
    },
  },
}
</script>

包.json

{
  "name": "mc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.2",
    "core-js": "^3.6.5",
    "es6-promise": "^4.2.8",
    "vue": "^3.1.4",
    "vue-hotjar": "^1.4.0",
    "vue-i18n": "^9.1.6",
    "vue-loader": "^16.2.0",
    "vue-router": "^4.0.10",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/vue": "^6.4.2",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-unit-jest": "^4.5.13",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.1.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^2.0.0-rc.9",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.0.0",
    "flush-promises": "^1.0.2",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5",
    "vue-jest": "^5.0.0-alpha.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

错误

FAIL  tests/unit/Translations.spec.js        
  ● renders translations

    TestingLibraryElementError: Unable to find an element with the text: こんにちは. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <div>
          <h2>
            Hello
          </h2>
          <h2>
            message.hello
          </h2>
          <button>
            English
          </button>
          <button>
            Japanese
          </button>
        </div>
      </div>
    </body>

      47 |   //await fireEvent.click(getByText('Japanese'))
      48 |
    > 49 |   expect(getByText('こんにちは')).toBeInTheDocument()
         |          ^
      50 |
      51 |   //expect(queryByText('Hello!')).not.toBeInTheDocument()
      52 | })

标签： vue.jsvue-componentvuejs3testing-libraryvue-testing-library

解决方案

我遇到了同样的问题并像这样解决了它：

我正在使用下一个版本的@vue/test-utils 和 vue-jest ("@vue/test-utils": "^2.0.0-rc.16" + "vue-jest": "^5.0.0- alpha.10")。

我创建了一个名为的文件jest.init.js（您可以随意称呼它）

import { config } from '@vue/test-utils';
import translations from '@/locales/en';


config.global.mocks = {
  $t: (msg) => translations[msg],
};

然后将其作为安装文件启动jest.config.js

module.exports = {
...
  setupFiles: [
    './tests/unit/jest.init.js',
  ],
...
};

推荐阅读