- 
 
 - 
  Notifications
 
You must be signed in to change notification settings  - Fork 33.8k
 
Checked for undefined/null on component during destroy #8128
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
Conversation
Did you make sure it also fails without vue test utils?
Good point, no it doesn't if I just do the $mount myself. So it sounds like something is going on over there with the VNode lifecycle too, but the fix here seems relevant as well, since it seems harmless to null check before operating on the object. Of course unless it was left out explicitly so that this sort of thing would happen to help track down other bugs lol
I think you should share the test that caused the error (a boiled down version is better 😄 ). pinging @eddyerburgh just in case but I will also look at it
I thought you might want that, here is the most boiled down version I have that still fails:
<template>
 <div class="tasks__task-container col-sm-6">
 <transition name="fade" mode="out-in">
 <div v-if="!isEditing" key="editing">
 </div>
 <task-form
 v-else
 key="editing"
 ></task-form>
 </transition>
 </div>
</template>
<script>
import TaskForm from './task-form.vue'
export default {
 components: { TaskForm, },
 props: {
 task: {
 type: Object,
 default: () => {},
 },
 isCreator: Boolean,
 isParticipant: Boolean,
 },
 data() {
 return {
 isCreating: false,
 isEditing: false,
 }
 },
}
</script>
and the spec (using jest if that helps):
import { shallow } from '@vue/test-utils'
import Vue from 'vue'
import TaskItem from './task-item.vue'
describe('Test suite for Task Item', () => {
 let wrapper
 let vm
 beforeEach(() => {
 wrapper = shallow(TaskItem, {
 propsData: {
 task: {
 id: 55,
 },
 isCreator: false,
 isParticipant: false,
 },
 });
 ({ vm } = wrapper)
 })
 it('shows the tasks form when isEditing, otherwise shows the task', () => {
 vm.isEditing = true
 })
})
Uh oh!
There was an error while loading. Please reload this page.
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
The PR fulfills these requirements:
devbranch for v2.x (or to a previous version branch), not themasterbranchfix #xxx[,#xxx], where "xxx" is the issue number)If adding a new feature, the PR's description includes:
Other information:
When we run our test suite with relatively new ( >beta13 ) on vue-test-utils we end up with this issue failing a portion of our test suite as it appears somehow that
componentInstanceis undefined by the time this hook gets called.I spent about an hour trying to find where to put a test where the destroy hook gets called, but couldn't figure out how to test it properly. I even attempted to find a good spot by having that function
throw, but even that wasn't very helpful, so I'd love some help with that.I'm also happy to help with code there, or whatever, but I could use some guidance since there is a lot of complexity going on around this area of the code, the stack trace we got was: