this.element.querySelectorAll is not a function

[odranoelBR]

code : expect(wrapper.contains('p')).toBe(true);
error: this.element.querySelectorAll is not a function
version: 3.2.0

[eddyerburgh]

Can you post the entire component you're testing?

[blieque]

I'm getting the same error. I'm in a bit of a Vue + TypeScript + Jest tangle, so it could be something else.

My component and spec are as follows:

<template>
  <div>
    {{ test }}
    <span></span>
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Header from '@/components/Header';

export default Vue.extend({
  name: 'App',
  components: { Header },
  data() {
    return {
      test: 'Teeesting',
    };
  },
});
</script>

import { shallow } from 'avoriaz';
import App from '../App';

describe('App.vue', () => {
  it('should contain a div', () => {
    const wrapper = shallow(App);
    expect(wrapper.contains('div')).toEqual(true);
  });
});

    TypeError: this.element.querySelectorAll is not a function

       5 |   it('should contain a div', () => {
       6 |     const wrapper = shallow(App);
    >  7 |     expect(wrapper.contains('div')).toEqual(true);
         |                    ^
       8 |   });
       9 | });

It sounds like an async thing. Before using Avoriaz I needed to use Vue.nextTick() otherwise the DOM wouldn't be populated.

I'm not using a browser to test, but I believe Jest brings jsdom with it. Am I supposed to test the components directly, or somehow test the webpack bundle? Do I need to put the test specs through Babel or just TypeScript before they go to Jest if I'm using ES modules? Sorry, I'm having some trouble wrapping my head around the specifics of unit testing.

Many thanks if you can help.

[eddyerburgh]

I believe the issue is that App isn't compile correctly. Do you get any other errors?

[blieque]

The app was building fine for development and production as far as I can remember. It is now, and I've not changed much. I have swapped out Avoriaz for vue-test-utils and managed to get tests working (just changed shallow to shallowMount from vue-test-utils). Am I right in thinking vue-test-utils is a fork of Avoriaz and being adopted as the official testing library?

[eddyerburgh]

Yep Vue Test Utils is based off avoriaz. You're better of using Vue Test Utils, so I'm glad it was easy for you to migrate 👍