store not available in child components

[mediafreakch]

Describe the bug
store is undefined in child components.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/mediafreakch/vue-testing-library-bug
2. run npm install
3. run npm test

The second test fails.

Expected behavior

Second test passes.

Screenshots

Related information:

• @testing-library/vue version: 4.1.0
• Vue version: 2.6.11
• node version: 12.13.1
• npm (or yarn) version: npm 6.12.1

Relevant code or config (if any)

Additional context

Unfortunately the example doesn't run in Codesandbox. There is an issue with they're bundler.
You need to clone the repo and run it locally to reproduce the bug.

I managed to get the same app tested using pure @vue/test-utils. I will link the corresponding codesandbox example as soon as I have recovered it. Codesandbox example of @vue/test-utils

[mediafreakch]

After all I've read, could this be due to a clash of Babel versions?

vue-testing-library: @babel/core@7.8.4
vue-test-utils: @babel/core@6.26.0

Version 7.8.4 includes dynamic-import-node plugin, while the latter does not.
I wouldn't know how to fix though nor if that really can be a factor...

[beeequeue]

Can confirm this happening, can't write any tests for components that use vuex. 😞

It's not the babel version. I tried a resolution for it to 7.10.2 and it didn't change anything.

The store is available deep in the private apis root._vnode.componentInstance.$store

[afontcu]

Hi! 👋

Just gave the OP repro a go. Not sure why, but removing the first mockReturnValueOnce and only running the "should render the chart component" test makes it pass. Same thing if I set the viewInfo mock per test, instead of relying on beforeEach.

In other words – this works:

  beforeEach(() => {
    actions = {
      fetchViewInfo: jest.fn().mockResolvedValue(null),
    }
  })

  it("should render the chart component", async () => {
    store = {
      actions,
      getters: {
        viewInfo: () =>
          jest.fn().mockReturnValueOnce({
            title: "Test Chart",
          }),
      },
    }

    const { findByText } = render(GenericView, {
      store,
      propsData: {
        kind: "Dashboard",
      },
    })

    await findByText("Test Chart") // changed Vue.nextTick() + getByText with findByText, but's that unrelated
  })

[mediafreakch]

@afontcu Like this you basically render the Dashboard component, but where props.viewData.items is undefined. So the for loop for the nested <GenericView> component is never invoked. Right?

[afontcu]

Yeah, I guess you're right… I gotta say the component is quite complex and right now I don't have the bandwidth to deep dive on this 😅 It is really weird (and I'd say unlikely?) that the store is not available in child components – I've been testing such scenarios myself, and Vue Testing Lib is only importing Vuex and registering the store as a whole in the Vue instance.

If you could come up with a smaller, simpler reproduction case that would mean a lot 🙌

[mediafreakch]

@afontcu I updated my repository and tried to simplify the example: https://github.com/mediafreakch/vue-testing-library-bug .

It still demonstrates the same problem: The dynamically imported GenericView.vue component inside Portfolio.vue doesn't have access to the store (when running the tests). Everything works as expected when running in the browser.

I also wanted to let you know, that I posted the same problem at vue-test-utils, as it is reproducible there too: vuejs/vue-test-utils#1486 . Not sure where it makes more sense to dig in...

[afontcu]

Hi! Thanks for this 🙌

Didn't notice you posted the same issue in Vue Test Utils. That means this is an upstream issue, and as soon as we find a fix in Vue Test Utils, it will work properly here in Vue Testing Lib, too :)

I'll go ahead and close this up!