0

次の例を 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()
})

Translations.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 | })
4

1 に答える 1