Vee Validate 3 Jest can't find input selector for test in Nuxt JS

Viewed 162

I'm using the Jest testing suite in my Nuxt JS project where I've got Vee Validate 3 installed. I have a component which contains a validation provider, part of an application form that I'm building. My test, checks that an element contains a class name, which works perfectly fine if I move my class outside of the validation provider, but if it's nested within the validation provider then the test fails.

We should be able to expose the validation provider contents somehow to Jest

I'm relatively new to Jest, so it could be that I just need to tweak my implementation of my test, or change something with my validation provider, I'll attach my code to illustrate the set up:

The class I'm evaluating is:

  • jest__datasets-terms

components/TestComponent.vue

<template>
  <article>
    <article>
      <validation-provider
        vvid="loan.term"
        name="Loan term"
        rules="required"
        v-slot="{ errors, classes }"
      >
        <div class="tw-grid tw-grid-cols-2 tw-gap-4">
          <div class="jest__datasets-terms">
            hello world
          </div>
        </div>
        <ValidationMessage :message="errors[0]" />
      </validation-provider>
    </article>
  </article>
</template>

tests/unit/TestComponent.spec.js

import { mount } from '@vue/test-utils'
import flushPromises from 'flush-promises';
import TestComponent from '@/components/TestComponent'

describe('TestComponent', () => {

  test('is a Vue instance', () => {
    const wrapper = mount(TestComponent)
    expect(wrapper.vm).toBeTruthy()
  })

  test('terms are available for selection', async () => {
    const wrapper = mount(TestComponent)
    await flushPromises()

    const terms = wrapper.findAll('.jest__datasets-terms')
    expect(terms.exists()).toBe(true)
  })

})

If I move my class to the <article> parent of the provider, then the test fails, and I can confirm this if I change the class name, but when inside of the provider it doesn't find it.

I have added the required config to my jest.config.js file, which is as follows:

module.exports = {
  silent: true,
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    'vee-validate/dist/rules': 'babel-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
  ],
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!vee-validate/dist/rules)',
  ]
}

0 Answers
Related