Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test fails for globally registered components #1448

Open
MrWook opened this issue Feb 24, 2020 · 4 comments
Open

Test fails for globally registered components #1448

MrWook opened this issue Feb 24, 2020 · 4 comments
Labels

Comments

@MrWook
Copy link

@MrWook MrWook commented Feb 24, 2020

Version

1.0.0-beta.31

Reproduction link

https://github.com/MrWook/ts-jest-bug

Steps to reproduce

Execute npm run test:unit after the setup of the repository.

What is expected?

There are no Vue errors

What is actually happening?

Vue will throw an error that a globally registered component is not available


Situation:
I have a component A that is using a globally registered component B.
Component A is loaded async into the app.

Problem:
If component A is written with Vue.extend for example with vue-class-component(typescript) and is loaded async, a jest test can't find the globally registered component B.
If component A is written without Vue.extend it will work perfectly fine.

For a better understanding my reproduction repository has three files that can be loaded async. A normal vue file, a typescript vue file and a JavaScript file with vue.extend.

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Feb 24, 2020

That's because your component extends from a different root "Vue" prototype than the "localVue" you created. There's little this lib can do "in the background" to prevent this, I think.

A quick solution would be to run your component through localVue's extend() again:

const localVue = createLocalVue()
localVue.component('GloballyLoaded', GloballyLoaded)
const component = localVue.extend(App)

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', async () => {
    const wrapper = mount(component, {
      localVue
    })
    await sleep(2000)
    console.log(wrapper.html())
    expect(true).toBeTruthy()
    // expect(wrapper.text()).toMatch(msg)
  })
})
@MrWook
Copy link
Author

@MrWook MrWook commented Feb 24, 2020

I don't understand why this should be a thing because the error only applies if the component is loaded async. If it is loaded sync everything is working fine

But if tried your idea and unfortunately it doesn't fix the issue :(

@lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Feb 24, 2020

It looks this is an outstanding issue that has never been supported: #1012

Should this issue be renamed "Test fails for asynchronously loaded components"? Seems like it's related to that, not TS/Vue Class Component (could be wrong, I didn't pull your repo yet).

We should definitely support async components this, I'm not sure what (if anything) makes it difficult to implement. Is there some way for Jest to know about Webpack chunks? In fact, you will need to do a full build of the app prior to running the tests for the chunks to even exist? (not super familiar with the webpack code splitting stuff...)

@MrWook
Copy link
Author

@MrWook MrWook commented Feb 24, 2020

Well async loaded component are working fine as long as you don't use vue.extend.
But vue.extend is used by the typescript library for vue. So a typescript vue components can't be loaded async. Because of that i found this issue.

I'm pretty suprised that this feature isn't really implemented but is working fine for normale vue files :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.