https://cypress.io logo
Join Discord
Powered by
# vue
  • r
    Hi again jejeje, do you guys have any idea how to mock Vue i18n in cypress ct? I used this when I was using jest and vue-test-utils but don't know how to do it now with cypress 😅
    Copy code
    import { config } from '@vue/test-utils'
config.mocks.$t = key => key
    I found a link to an example on the @cypress/vue repo but it's broken
  • s
    Hey! Yeah. It should be the same @red-refrigerator-13075 Like exactly the same.
  • s
    You can even do import config from VTU right there...
  • s
    Alternatively you can pass it on global plugins in the mounting options
  • r
    Then I don't know why I get this error 😦
  • s
    Copy code
    test('routing', () => {
  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')
})
  • s
    Replace router with an instantiated version of vue i18b
  • s
    I18n
  • s
    I have to head out for a few hours but the API should be exactly the same.
  • s
    (Idk if you know but I also maintain VTU)
  • r
    But doing the mock on the support file should work right?, or has to be on the test declaration?
  • s
    Registering it using the plugin API should work too
  • s
    Try the local registration to see if it works. I’ll make a note to make another example for using the global plugin API (config.wrapper)
  • s
  • s
    Both of them should work fine tho
  • r
    ok ok I'll look at it
  • r
    I made the vue-i18n mock work like this in a test:
    Copy code
    mount(BaseSaveButton, {
      mocks: {
        $t: key => key
      }
    })
    But still don't know how to mock vue-i18n in the global context, I tried a few things but nothing works, so if anyone can please provide an example of how to do it that would be great 😃
  • r
    Another doubt is how can you listen and assert emits like in vue-test-utils. This is how you make it with vue-test-utils: 
    expect(wrapper.emitted('click')).toBeTruthy()
  • u
    HI there 🙂 I'm new using Cypress, but, if I got right, its 'based on' vue test utils and jest, so maybe u can use a setup.js config file to globally use the Vuei18n library, something like this: 
    Vue.use(VueI18n)
    , and at least in my project I always create only the messages that I need in my test:
    Copy code
    js
mount(Component, {
   ...
   i18n: new VueI18n({
    locale: 'en-us',
    messages: {
        'en-us': {
          message: 'message',
        },
      },
    }),
   ...
})
  • r
    Hi Elmar, thanks for the help 👍 , the idea is to mock vue-i18n, not to actually use the plugin, so I used this in a test and it works:
    Copy code
    mocks: {
        $t: key => key
      }
    Now, instead of doing that for each test, I want to use the mock globally, that's where I'm stuck. In case I wanted to use vue-i18n with the translated messages that I already have in the locales folder, how could I set it up? because I already try to import the vue-i8n plugin file that I'm using for the project into the cypress/support folder but it doesn't work 😦
  • r
    By the way, I updated the repo https://github.com/xanxuz/vue-cypress-ct to have the vue i18n plugin with the failing example
  • l
    Looks like you're not even getting to the test due to a type issue.
  • b
    @red-refrigerator-13075 did you manage to get i18n working?
  • r
    Globally no, just inside test files with:
    Copy code
    mount(BaseSaveButton, {
      mocks: {
        $t: key => key
      }
    })
  • b
    Oh yeah
  • b
    The way I would do it is I would create a helper function in a shared file 
    function mounti18n()
    that has the same signature as 
    mount()
    in which I merge this mock
  • b
    this way you could call it in every file instead of cypress mount
  • b
    and have i18n working in every component
  • b
    What do you think ?
  • l
    Can you show 'View stack trace'?
1...161718...37Latest