Vue Testing Library - Error in beforeCreate hook: "TypeError: Cannot read properties of null (reading 'init')"

697 Views Asked by At

I am writing my very first tests using @testing-library/vue. I am using Vue 2.7 and the version for testing-library/vue is ^5.6.1. Here is the component:

<template>
  <div>
    <p data-testid="custom-element">Hello world</p>
  </div>
</template>

<script>
export default {
  data: () => ({

  }),
  async mounted() {
    console.log('test component mounted');
  }
};
</script>

and here is the test so far:

import '@testing-library/jest-dom';
import { render } from '@testing-library/vue';
import TestComponent from '../../src/views/Plan/PlanResults/TestComponent.vue';
import { store } from '../../src/store';

it('renders test correctly', async () => {
  const { getByTestId } = render(TestComponent);
  console.log('rendered');
  expect(getByTestId('custom-element')).toHaveTextContent('Hello World');
});

I am importing the Vuex store because the component and the test eventually need to rely on it. The issue is, simply including this import makes the test fail immediately with the following:

 FAIL  tests/integration/singleDataset.spec.js
  ✕ renders test correctly (10ms)

  ● renders test correctly

    TypeError: Cannot read properties of null (reading 'init')

       5 |
       6 | it('renders test correctly', async () => {
    >  7 |   const { getByTestId } = render(TestComponent);
         |                           ^
       8 |   console.log('rendered');
       9 |   expect(getByTestId('custom-element')).toHaveTextContent('Hello world');
      10 | });

Reading further through the logs, I get to this underlying error:

console.error node_modules/vue/dist/vue.runtime.common.dev.js:569
    [Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read properties of null (reading 'init')"
    
    (found in <Root>)

Commenting out the import { store } from '../../src/store' line with no other changes makes the test run fine. Including the import but commenting out const { getByTestId } = render(TestComponent); also throws no errors. Only with the store imported and render() being called does this fail as described. The store itself also works perfectly when running the actual app, so I really have no idea why it's making the test fail despite store not even being passed to render() right now. Any help would be very much appreciated.

0

There are 0 best solutions below