composition-api
composition-api copied to clipboard
fix: useFetch in jest unit tests
🐛 The bug
When unit testing a component that uses useFetch composable, I'm getting weird error.
🛠️ To reproduce Steps to reproduce the behavior:
- Create a component that uses setup function with useFetch composable inside of it
- Write a test suite with any unit test of said component
- See error
I'd be very grateful for a link to a gist or repo that reproduces the bug.
🌈 Expected behaviour The test suite runs smoothly
ℹ️ Additional context My component
export default defineComponent({
setup() {
const { fetch } = useFetch(async () => {
//
});
return {
//
};
},
My test suite
describe('MainSearch', () => {
let wrapper!: Wrapper<any>;
const factory = (data?: object) => shallowMount(MainSearchComponent, {
stubs: {
...
},
vuetify: new Vuetify(),
});
beforeEach(() => {
wrapper = factory();
});
afterEach(() => {
wrapper.destroy();
});
it('should match snapshot', () => {
expect(wrapper.html())
.toMatchSnapshot();
});
@FloryanFilip I can't reproduce the error with your code. Note that useFetch
is quite tightly coupled with Nuxt and it needs a number of global properties to be present on the instance in order to actually execute fetch()
, which is probably why you're getting these errors (though not in your code snippets above).
@danielroe what do you mean by number of global properties? How can I make sure i have these?
I would also be interested in what setup steps are missing. I created a reproduction repo here
I'm facing the same issue! any updates on this @danielroe ?
Any updates ? Same issue.
Yea, same here. Can't test a composable with "useFetch" inside.
The useFetch don't execute outside of setup env.