我很困惑为一个简单的登录组件编写单元测试规范，如下所示：
登录
<script>
export default {
data () {
return {
email: '',
password: ''
}
},
methods: {
async login () {
this.$store.dispatch('login', {data: {email: this.email, password: this.password}})
}
}
}
</script>
Vuex auth模块操作和axios调用
const actions = {
login (context, payload) {
AuthService.login(payload.data).then((response) => {
if (!response.data.success) {
context.commit('flash', {message: response.data.message, variant: 'danger'})
} else {
context.commit('isAuthenticated', {isAuthenticated: true})
router.push({name: 'dashboard'})
context.commit('flash', {message: response.data.message, variant: 'success'})
}
})
},
...
}
我要测试的是Login组件的 login 函数，这样：
-
当用户在登录按钮操作上传递有效凭据时
-
vuex.store
login动作被调用 -
反过来调用axios方法
-
我们得到了一些数据的200响应
-
我们将用户重定向到仪表板
-
set vuex is_authenticated = true
-
当用户在登录按钮操作上传递无效凭据时
-
vuex.store
login动作被调用 -
反过来调用axios方法
-
我们得到一些数据的401响应
-
我们使用flash-component闪烁消息
由于代码可见，功能分为不同的范围，例如从Login组件到vuex，然后是axios .
我的问题是在为上述组件编写单元测试时应该停止的地方？如果我不停止在Login组件并开始模拟vuex和axios我觉得我测试太多，否则我觉得我没有测试任何东西，因为vuex和axios中的大多数代码都相关 .
我看到的这类代码的另一个问题是功能分布在不同的组件（vuex，axios）而不是单个组件，即Login . 请建议任何重构，以使代码更易于维护/测试，并减少单元测试耦合 .