Using initialState on testing

[Flavsditz]

I have been using Pinia and loving it.

I have encountered a problem that the docs don't help me to answer and I found very little on the internet: I am trying to simulate an initialState on a test in order to simulate what would happen during the setup in the component.

Here is the component, which is a simple dropdown:

<template>
  <select
    v-model="currentSelectedYear"
    @change="emitChange($event.target.value)"
  >
    <option
      v-for="year in availableYears"
      :value="year"
      :key="`selectYear-${year}`"
    >
      {{ year }}
    </option>
  </select>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { TARGET_YEAR } from "@/constants/TargetYear";
import { configurationStore } from "@/store/configurationStore";

export default defineComponent({
  name: "ReductionTargetYearSelect",
  setup(props, { emit }) {
    const configST = configurationStore();
    const baseYear = configST.baseYear;

    const nextFromBaseYear = baseYear + 1;

    const availableYears = [];

    const iterator = Array(TARGET_YEAR - baseYear).keys();
    for (const year of iterator) {
      availableYears.push(year + nextFromBaseYear);
    }

    const currentSelectedYear = baseYear + 1;

    function emitChange(newValue: number): void {
      emit("yearChanged", Number(newValue));
    }

    return {
      currentSelectedYear,
      availableYears,
      emitChange,
    };
  },
});
</script>

I am trying the following on testing and none of the expectations work:

describe("Reduction Target Year Select", () => {
  let wrapper: any;

  beforeAll(() => {
    wrapper = mount(ReductionTargetYearSelect, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: { baseYear: 2030 },
            stubActions: false,
          }),
        ],
      },
    });
  });

  it("should generate all possible selections until 2100", () => {
    expect(configurationStore().baseYear).toBe(2030);

    expect(wrapper.vm.availableYears.length).toBe(70);
  });

  it("should have current set year to baseYear + 1", () => {
    expect(wrapper.vm.currentSelectedYear).toBe(2031);
  });
});

Am I using the initialState wrong? Should it be different due to the fact I have several different stores? No Examples or docs could help me out. I would be happy to help to improve on them if I knew the correct way

[posva]

The initialState is a state tree with keys of the ids of each store. In your case, it would be:

const initialState = {
  configuration: { baseYear: 2030 }
}

Make sure to replace the configuration with your actual configuration store id.

[Flavsditz]

Thanks you @posva !
That did the trick!!!
I will see if I can give back to the project by doing a PR to improve the docs for others on that aspec

[PatrikBird]

are you providing something for the docs? otherwise I'd post a PR @Flavsditz :)

[Flavsditz]

Hey Patrik I just forrgot to link the PR with this ticket: #1166

It was already merged by @posva but you can check it out in the PR itself.
Feel free to add stuff though

[PatrikBird]

gosh I'm blind! thank you