1

Here's a simple example on the forgot password reset page of my app, I would want to bypass the server side and just have the password reset to succeed on click so I would write a test and use the custom test store like so:

const customStore = {
  state() {
    return {
      Authentication: {
        passwordResetSuccess: false,
      },
    };
  },
  mutations: {
    SET_RESET_PASSWORD_SUCCESS(state) {
      state.Authentication.passwordResetSuccess = true;
    },
  },
  actions: {
    forgotPasswordResetPassword() {
      this.commit('SET_RESET_PASSWORD_SUCCESS');
    },
  },
};

Then I could include the custom store in my beforeEach() and it worked great. I've tried everything I can think of to get this to work with pinia, but it doesn't seem to work.

I'm using jest along with vue/test-utils.

I basically tried just creating the test pinia store, but I can't figure out how to get the component to use the custom test store.

const useCustomStore = defineStore('AuthenticationStore', {
  state: () => ({
    passwordResetSuccess: false,
  }),
  actions: {
    forgotPasswordResetPassword() {
      this.passwordResetSuccess = true;
    },
  },
});


const authenticationStore = useCustomStore();

I can't directly add it as a plugin because it can't find an active instance of pinia.

I went through this guide: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-a-store

and I also tried using jest mock as described here: https://stackoverflow.com/a/71407557/4697639

But it still failed.

If anyone has any idea how to create a custom store that can be used by the component and actually hits the custom actions, I could really use some help figuring this out. Thank you!!

DaveCode
  • 117
  • 1
  • 9
  • 1
    Ref: *"because it can't find an active instance of pinia"*: [testing-components](https://pinia.vuejs.org/cookbook/testing.html#unit-testing-components) e.g: `mount(SomeComponent, global: { plugins: [createTestingPinia()]})`. The test pinia is a mock, you can check that its actions were hit with the correct params. – tao Nov 17 '22 at 22:30
  • I tried using createTestingPinia(), but I want the mocked actions to update the state when hit rather than do nothing (which I believe the mocked actions are just stubs that don't do anything). So when the component calls forgotPasswordResetPassword() I want to check that the component updates based on the state change – DaveCode Nov 19 '22 at 17:13
  • You're breaking the principles of unit testing. You should only verify the action is called with the appropriate params. The store should have its own tests, verifying it changes state appropriately, when actions are called. Last, but not least, any component depending on store state/getters should be tested separately, that it renders what appropriately, given a particular store state value. In other words, these are unit tests, not e2e tests. If you want to test e2e, you should probably use Cypress or similar. – tao Nov 19 '22 at 22:03
  • I see what you're saying. Thanks Tao. I will try to set up separate tests. For the record it was easy to mock stores to do full component tests with vuex. Sounds like I was using an antipattern I guess. I'll mark this as resolved. – DaveCode Nov 21 '22 at 15:36

1 Answers1

0

Tao mentioned in the comments that this isn't a good way to do unit tests. I will mark this as resolved and fix how I do the testing.

DaveCode
  • 117
  • 1
  • 9