[Vuejs]-Stencil component which uses store loses context if multiple tests are run

by

0👍

I have reviewed the code you provided and I believe the issue is that you are calling store.dispose() in the afterEach() block of your test. This is causing the store to be destroyed before the next test is run.

To fix this, you can move the call to store.dispose() to the afterAll() block. This will ensure that the store is not destroyed until after all of the tests have been run.

Here is the updated code:

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';
import { store } from '../../store/store';

describe('my-component', () => {

  afterAll(() => {
    store.dispose();
  });

  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });

  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });
});

I hope this helps!

Leave a comment