Javascript 如何为测试禁用vue.js转换？

我有一个vue.js组件，它使用

元素为隐藏/显示设置动画

为了加快测试速度，我想禁用动画。我该怎么做

*{transition:none！important}

建议在这里使用：但它似乎没有什么不同

我在这里创作了一把小提琴：

运行“测试”最后一次输出为“3.显示应为“无”，为：块”。如果我将超时时间增加到100，或者删除

元素，我将得到预期的输出“3.显示应为“无”，它是：无”

那么，如何禁用动画，以便摆脱

setTimeout

调用呢

编辑：

我尝试删除所有css样式，但仍然有相同的问题。因此，只要使用

元素就可以触发问题

编辑2:

将小提琴更新为没有样式，只有

元素。还包括对

$nextTick（）

的调用，以确保这不是它行为异常的原因

将调用改为

wait100

改为

wait10

，您将看到测试开始失败

编辑3:

将示例代码放在这里，这样每个人都可以更轻松地使用：）

newvue({
el:“#应用程序”，
模板：`
运行测试
你好，世界

`,
数据（）{
返回{
秀:假,，
};
},
方法：{
测试（）{
const wait10==>newpromise（resolve=>setTimeout（resolve，10））；
const wait100==>newpromise（resolve=>setTimeout（resolve，100））；
const show段落==>this.show=true；
const hideParagraph=\u=>this.show=false；
const p=document.querySelector（'p'）；
显示段落（）；
这个.$nextTick（）
.然后（等待10）
.然后（（）=>{
const display=getComputedStyle（p）；
assertEqual（显示“块”）；
})
.然后（hideParagraph）
.然后（这是$nextTick）
.然后（等待100）
.然后（（）=>{
const display=getComputedStyle（p）；
assertEqual（显示“无”）；
});
}
}
});
函数assertEqual（a，b）{
如果（a！==b）{
console.error（'预期“+a+”等于“+b+”）；
}
};
您可以在Vue上设置一个变量以指示测试，如果正在测试，则可以设置为中止

对于我的示例，您可以通过复选框控制测试变量的值。第一个测试结果指示发生任何事情之前的状态，因此它将与上一次运行的第三个测试结果相同。除此之外，您可以翻转测试开关，每次都可以获得预期的结果

我已经修改了代码，将fadeTransition作为一个带有插槽的独立组件进行隔离，但是我还没有找到一种方法来消除模板中为它添加的标记


newvue({
el:“#应用程序”，
模板：`
测试

运行测试
你好，世界

`,
组成部分：{
时尚转换：{
模板：`
`,
方法：{
基尔转换（el，完成）{
如果（Vue.测试）完成（）；
}
}
}
},
数据（）{
返回{
秀:假,，
测试：正确
};
},
方法：{
测试（）{
const p=document.querySelector（“#transition”）；
let display=getComputedStyle（p）；
console.log（'1.显示应为“无”，为：'，显示）；
this.show=true；
这个.$nextTick（（）=>{
display=getComputedStyle（p）；
console.log（'2.显示应该是“block”，它是：'，Display）；
this.show=false；
这个.$nextTick（（）=>{
display=getComputedStyle（p）；
console.log（'3.显示应为“无”，为：'，显示）；
});
});
}
}
});
。淡入激活状态，
.淡入淡出激活状态{
转变：不透明度。5s；
}
.淡入，
.淡出{
不透明度：0
}

我在
时遇到了这个问题。我的解决方案是在测试期间使用以下代码替换它

Vue.component('transition-group', {
    props: ['tag'],
    render(createElement) {
        return createElement(this.tag || this.$vnode.data.tag || 'span', this.$slots.default);
    },
});

这是将
转换为带有可选动态定义标记的
镜像的最低要求

我可能需要对
执行同样的操作。如果是这样，它可能会更简单，因为
没有标记属性。
当env进行
测试时，我基本上将所有的
转换
和
转换组
更改为一个具有渲染功能的div

if (process.env.NODE_ENV === 'testing') {
  const div = {
    functional: true,
    render: (h, { data, children }) => h('div', data, children),
  }

  Vue.component('transition', div)
  Vue.component('transition-group', div)
}

可能不是最简单的测试方法，但是对于其他场景，可以考虑使用V-BIN绑定一个没有关联CSS转换的转换名称。p>
v-bind:name=“我的变量”
this.myVar=“None”
我的用例略有不同，但要求相同：我想禁用移动屏幕的某些过渡效果

我的解决方案是只包装成一个组件。这也适用于测试（如果使用例如process.env.NODE_env==“testing”设置了“disable”）


导出默认值{
道具：{
禁用：布尔，
名称：String，
模式：字符串，
},
};

纯粹为了测试，我认为Bill Criswell的答案可能是最清晰的。
对我来说，每次都是这样，这告诉我我们仍然不了解这里到底发生了什么。这就是我不想选择这个作为公认答案的原因之一。对不起。另外，我也不喜欢用那些只用于测试的东西来弄脏我的模板。那么有没有办法从我的测试代码中添加这些道具呢？更新了一些关于不同结果的说明。
<template>
  <transition v-if="!disable" :name="name" :mode="mode">
    <slot></slot>
  </transition>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    disable: Boolean,
    name: String,
    mode: String,
  },
};
</script>