vue-test-utils包装器.查找返回不存在0

Question

我的组件具有两个按钮：

<a id="config-delete-button" class="btn btn-sm btn-danger pull-right" v-if="is_this_admin && !configDeleted" @click="deleteConfig">Delete</a>
<a id="config-undelete-button" class="btn btn-sm btn-primary pull-right" v-if="is_this_admin && configDeleted" @click="unDeleteConfig">Undelete</a>

在我的测试中，删除测试柜通过wrapper.find无法找到按钮。但是Undelete TestCase无法找到Undelete按钮。

测试代码：

describe ('config undelete method', () => {
        it ('positive case', async () => {
            stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
            stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).returns(Promise.resolve(1));
            const wrapper = shallow(ConfigDescribeComponent, {
                localVue,
                propsData: {
                    name: JSON.stringify("linux_rhel7"),
                    config_type:JSON.stringify("client")
                },
                computed: {
                    api: function () {
                        return ctlApi;
                    }
                }
            });
            await flushPromises();
            wrapper.vm.configDeleted = true;
            // Circumvent any sweetAlert popups by forcing resolve
            const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
            wrapper.setMethods({ $sweetAlert: stub_sweetAlert });
            // Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
            const unDeleteButton = wrapper.findAll('#config-undelete-button').at(0);
            unDeleteButton.trigger('click');
            await flushPromises();
            // Wait until Vue has performed the actual DOM update after we trigger some state change.
            localVue.nextTick(() => {
                stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).should.have.been.called;
            });
        });
});
describe ('config delete method', () => {
        it ('positive case', async () => {
            stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
            stub.withArgs(apiCalls.configDelete.method, sinon.match.any).returns(Promise.resolve(1));
            const wrapper = shallow(ConfigDescribeComponent, {
                localVue,
                propsData: {
                    name: JSON.stringify("linux_rhel7"),
                    config_type:JSON.stringify("client")
                },
                computed: {
                    api: function () {
                        return ctlApi;
                    }
                }
            });
            await flushPromises();
            // Circumvent any sweetAlert popups by forcing resolve
            const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
            wrapper.setMethods({ $sweetAlert: stub_sweetAlert });
            // Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
            const deleteButton = wrapper.findAll('#config-delete-button').at(0);
            deleteButton.trigger('click');
            await flushPromises();
            // Wait until Vue has performed the actual DOM update after we trigger some state change.
            localVue.nextTick(() => {
                stub.withArgs(apiCalls.configDelete.method, sinon.match.any).should.have.been.called;
            });
        });
});

这里有任何依赖性吗？像包装器一样，仍然具有删除按钮的先前数据，并且无法刷新它？这两个电话在另一个描述电话内。在那里，我在ereach之前初始化存根，并在Aftereach

Answer 1

您可以尝试

describe ('config undelete method', () => {
    beforeEach(() => {
       jest.resetModules();
       jest.clearAllMocks();
    });
    it ('positive case', async () => {
    ...