quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
180 stars 65 forks source link

Pinia not working in tests after removing boot file and adding Pinia as per the docs. #260

Closed MarkTallentire closed 2 years ago

MarkTallentire commented 2 years ago

Hi,

We previously added Pinia to our project using a boot file that contained App.Use(Pinia) and our tests ran fine. We came up against a use case today that meant we wanted to use Pinia inside another bootfile so we refactored to using Pinia as the docs suggest with a index.ts inside our stores folder containing

export default store(() => { const pinia = createPinia(); return pinia; });

However now our tests that rely on the store all fail with the error. We're exclusively using Cypress Component Testing.

[🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia)

I've had a dig around and can't find any open issues on this repo, Pinias repo or the main Quasar repo, any solutions?

Example Test:


  let store;

  beforeEach(() => {
    cy.viewport(1920, 1080);

    mount(QuantitiesSelector, {
      props: {
        exceptedQuantityAllowedBySubstance: false,
        limitedQuantityAllowedBySubstance: true,
        modelValue: { isLimitedQuantity: false, isExceptedQuantity: false },
      },

      global: {
        plugins: [
          createTestingPinia({ createSpy: cy.spy }),
          router({ ssrContext: null }),
        ],
      },
    });
    store = useStore();
  });  it('should not allow EQ/LQ to be checked if not allowed in prop', () => {
    //Only emits change to isLimitedQuantity as clicking EQ does nothing. (Quasar is a pain with checkboxes)
    cy.get(':nth-child(1) > .q-checkbox').click();
    cy.get(':nth-child(2) > .q-checkbox')
      .click()
      .vue()
      .then((wrapper) => {
        expect(wrapper.emitted('update:modelValue')).to.have.length(1);
        expect(wrapper.emitted('update:modelValue')[0][0].isLimitedQuantity).to
          .be.true;
      });
  });
});```
IlCallo commented 2 years ago

AFAIK every Cypress command is actually async, and mount is probably async too If you call store = useStore() after the mount, you're executing it before the mount actually took place IIRC, and that may be the problem

MarkTallentire commented 2 years ago

Thanks for this, we eventually solved it by using the injected store in our other boot file.

Previously we were just using store = useStore() instead of injecting via the boot method i.e

boot(({store}) => {
const userStore = useStore(store)
})