-
Notifications
You must be signed in to change notification settings - Fork 233
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
TypeScript error when using data/props mounting option #194
Comments
I'm running into an issue with a somewhat similar error message. This works fine when the Component is declared within the spec file (I just discovered) example.spec.ts
But fails with a Layout.vue
example.spec.ts
|
Can you share how you are typing Also possible rc.10 changed something. I think the types might have got refactored. Man, TS is so good until you run into oddities like this. Are you on rc.10? |
I also get a typing error for this:
I don't really know how to fix these kind of TS errors yet. |
The project was a fresh CLI project using vue@3.0.0-0. Upgrading to vue@3.0.0-rc.10 yields the same error, I'm afraid. vue-shims.d.tsdeclare module '*.vue' {
import { defineComponent } from 'vue';
const component: ReturnType<typeof defineComponent>;
export default component;
} |
So basically the shim is the problem... What happens when you do something like declare module '*.vue' {
const component: any
export default component;
} Does it at least let you proceed? I wonder if we can do so something like this in the the code-base here. Not great but reduced type-checking is much better than ts errors out of the box. I don't know enough about typing Vue components to provide a quick fix, unfortunately, I think getting the types "right" will take some effort. I know you guys are busy but @cexbrayat or @pikax have done the vast majority of work around types here, is there a quick fix we can do until we have "correct' types? We definitely need to make sure things are working out of the box (I think it's fine not to have perfect typing for |
Problem is caused by: footer: {
template: '<div>Footer</div>'
} which is not a valid type Slot = VNode | string | { render: Function } | Function adding the Component to it should be enough: type Slot = VNode | string | { render: Function } | Function | Component |
Modifying the shim file does resolve the original error, but I still run into an error if I try passing in a example.spec.tsimport { mount } from '@vue/test-utils';
import Layout from '@/components/Layout.vue';
describe('Layout.vue', () => {
it('renders button when logged in', () => {
const wrapper = mount(Layout, {
data() {
return {
loggedIn: true
}
},
});
expect(wrapper.findAll('[data-test="logoutbtn"]').length === 1).toBe(true);
});
});
|
I proposed a fix (well, a work around) in #200. This is really challenging because |
I fixed |
So actually fixing the types here seems complex - type-safety for Anyway, here is what I would currently recommend:
Notice I will update the docs - I hope this will let you continue testing your components 👍 |
That seems to have done the trick; this work around will be fine for now. Thank you for banging your head against this; I wish you success in getting all the types to behave in the future 😉 |
I have type issues too. shims-vue.d.ts: declare module "*.vue" {
import { ComponentOptions } from "vue";
const comp: ComponentOptions;
export default comp;
} Hello world: <template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
export default {
name: "HelloWorld",
props: {
msg: { type: String, default: "Welcome to Your Vue.js App" },
},
};
</script> Test files: import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
const msg = "new message";
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
expect(wrapper.text()).toMatch(msg);
});
}); Error:
Addtional Info: Works fine with: import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
const msg = "new message";
const wrapper = shallowMount(HelloWorld as any, {
props: { msg },
});
expect(wrapper.text()).toMatch(msg);
});
}); When casting |
@Mister-Hope Can you try to use the following shim: declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent;
export default component;
} You have a fairly basic use-case, that we cover in the tests of VTU, so it should be working 🤞 |
Update TypeScript shim for SFC files according to this GitHub comment: vuejs/test-utils#194 (comment) Fixes type errors in tests after upgrading to Vue 3.0.0.
Hi. This aolution is not working for me :( I have the same problem |
Are you on the latest version of Vue 3 (and Test Utils)? Alternative work-around (using |
@lmiller1990 try to set as MountingOptions. shallowMount(RecoverPage, {
global: {
mocks: {
$route,
$router
}
}
} as MountingOptions<{}> Work for me. No need any other changes. |
Sure, ideally it would be great if we do not need to do |
I don't see any error in my project, could you provide a complete problem code 👀 |
@HomyeeKing try some of the examples above. It is possible this has been fixed, a lot of work was done around types in core. |
- GithubのIssueを参考にした vuejs/test-utils#194 (comment)
Both |
|
maybe the vite startup page give you some inspiration: |
updating @vue/test-utils to 2.0.0-rc.6 fixs this problem for me. |
Seems this is (mostly) solved. For specific reproductions, please open a new issue and we can fix them on a case by case basis. |
Note for people stumbling on this issue from google, improperly formatted mount options can cause issues that look like this (makes you think that the problem is with the component being mounted), and won't be fixed by the shim solution above. In my case, I was accidentally passing an array of Vue components to mount(Component, { global: { components: [Button, etc] } }) instead of the object it expects like mount(Component, { global: { components: { Button, etc } } }) |
In my case, similar to what @vincerubinetti said, I had assumed initially that the issue was with how it was being mounted. it("renders title correctly", () => {
const buttonText = "Test Button";
const wrapper = mount(IconButton, {
props: {
titleConfig: {
value: buttonText,
},
},
});
expect(wrapper.text()).toMatch(buttonText);
}); Turns out, the type for my prop |
So if anyone is still having an issue with this, you need to correctly match your types that you're using for your component's PropType with what you're passing in on the test mount. They need to explicitly match for the typescript engine to confirm parity. |
Where should I put this in? |
We just put it here https://github.com/vuejs/test-utils/blob/main/src/vueShims.d.ts. I think any |
For some reason, my vs code doesn't find the shim at all. :( I still suffered from the pain and started to doubt the meaning of the efforts here. To the community, typing information registry is always a dump yard. You code typing could be broken even by just installing a node module (doubt it? try to install storybook to any boilerplate project). In a mono repo with multiple tsconfig.json, getting the type load correctly is even a life mercy. |
What if you open the file with the shim? I've noticed sometimes VS Code does not pick it up. Typing Vue imports is complex, it's unfortunate but it's the reality of the situation. See the type... https://github.com/vuejs/test-utils/blob/main/src/mount.ts#L89-L306 Since using the Volar extension, it's working well for me in all my projects (including some large mono repos with multiple If you can reproduce your problem in a minimal project, we can try to fix it. It's also possible that a more recent version of Vue came out and broke something, in which case we need to fix that, too. |
@lmiller1990, Thanks a million for pointing to create a minimal reproducible project. It turns out it is caused by a complex type in prop type. in Test file, the mount does not agree with the shape literal type. using |
Juuust in case anyone hits this again, my problem wasn't with my Shims or anything else, instead it was where I'd imported a JSON file as a prop but I needed to cast it, like |
I want to confirm this comment. We initially added the shim #194 (comment) to suppress the errors, but ultimately it was an genuine error. The problem for us was Volar not picking up the TS error, but there was an inconsistency in the shape of the TS types expected from the |
Another way to solve the issue is to use function getWrapper(): VueWrapper<InstanceType<typeof PatientInfo>> {
return mount(PatientInfo);
} |
For those coming from Google/elsewhere: If you have some problems with typing, for example when writing tests with
ts-jest
and using SFC (.vue
) files, the work-around is to asas any
. Eg:Or try this shim:
In the future we aim to have type inference with
vue
files too. For now, you may need to useas any
to avoid compilation errors in your tests.Original issue:
No idea what's going on.
Some days I wonder if TS is actually making the DX better or worse, lol.
The text was updated successfully, but these errors were encountered: