Testing: best practices for customizing actions and getters?

[mruthh]

I am testing components that depend on a pinia store and that call actions from the pinia store on an onBeforeMount hook.

In my tests, I need to be able to customize the returned or resolved values of those actions. I know I can set the initial state with the initialState property, and I know from #1292 that for actions that don't run immediately, I can customize the mock implementation using store.action.mockImplementation().

However, for actions that run before the component mounts, I can't access the returned store.action soon enough to customize the initial return value.

function factory () {
  const wrapper = shallowMount(MyComponent, {
    global: {
      plugins: [createTestingPinia()]
    }
  })

  const mainStore = useMainStore()

  return { 
    wrapper, 
    mainStore // the component has already been mounted by the time I can set mainStore.action.mockImplementation
  } 
}

I have learned I can use the fakeApp property to be able to customize the actions sooner, but from the docs, this doesn't seem to be the intended use of fakeApp. Is using fakeApp as shown below a best practice, or is there a better approach to customizing actions in testing?

function factory (opts = {}) {
  const testingPinia = createTestingPinia({ fakeApp: true })

  // Here we can pass in things like { action: jest.fn().mockImplementation(myCustomImplmentation) }
  // and they will be implemented before the component mounts

  const mainStore = Object.assign(useMainStore(), opts.store || {})

  const wrapper = shallowMount(MyComponent, {
      plugins: [testingPinia]
    }
  })

  return { 
    wrapper, 
    mainStore 
  }
}

This question also applies to getters. Is there a best practice in testing for customizing getters that a component accesses on or before being mounted?

[PatrikBird]

Thank you for posting your solution! I got it working with your workaround <3

[PatrikBird]

@mruthh check #1292 (reply in thread) (haven't tried it yet)

[marina-mosti]

It would be ideal if we could define getters/actions in the same way that we currently set the initialState, where setting the action/getter = to a fn would overwrite it in the testing pinia so that it could be there for setup/mounted as OP said

[leo-coco]

Restarting this discussion as I'm struggling doing the same. (see #1848)

@marina-mosti @mruthh How did you finally manage to deal with that?

[technimakri]

@leo-coco See my answer here, it might be helpful
#1292 (comment)

[Alexbrazdasilva]

@technimakri, how could this answer be adjusted for cypress?
-- Can you help me?

describe('<foo-component />', () => {
  let wrapper;
  let $store;

  beforeEach(() => {
    const pinia = createTestingPinia({ createSpy: cy.spy });

    wrapper = cy.mount(FooComponent, {
      props: {},
      global: {
        plugins: [pinia],
      },
    });
    $store = myStore();
  });
// more test cases...
});