Vuejs和测试其组件相对较新.使用vue test utils和jest进行测试.获取以下错误

这个vue文件由模板、组件和样式组成.下面是SignupLayout的一部分.出现错误的vue-

<style lang="sass">
@import '../stylesheets/colors'
html[path="/signup"], html[path="/login"]
  height: 100%
  background-image: url("../assets/background.jpg")
  background-size: cover
  background-position: center
  background-repeat: no-repeat
  overflow: hidden

  #signup-layout
    #change-language-button
      .lang-menu
        color: $alto

</style>

测试文件-

import Vue from 'vue';
import Vuex from 'vuex'
import SignupLayout from '../src/components/SignupLayout.vue';
import { mount, shallow, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue()

localVue.use(Vuex)

jest.resetModules()

describe('Signup.test.js', () => {
    let cmp
    let actions
    let store
    let getters
    let state

    beforeEach(() => {


        state = {
            email: 'abc@gmail.com'
        }
 
        getters = {
            CURRENT_USER_EMAIL: state => state.email
        }

        store = new Vuex.Store({
            getters
        })


    })

    it('has received ["Login"] as the title property', () => {
        cmp = shallow(SignupLayout, {
            store,
            localVue,
            propsData: {
                title: ['Login']
            },
            data: {
                email: 'abc@dsf.com'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

搞不清t美元和sass有什么关系.任何帮助都将不胜感激.被困在这里一段时间了.

推荐答案

错误不在<style>标记中,因为Jest将编译Vue组件并提取JS代码.所以现在可以忽略线路错误(我不确定如何修复).

但是根据您的错误消息,问题似乎与vue i18n的使用有关,而在测试文件中声明Vue组件时,您缺少vue i18n.try 将以下行添加到测试文件:

import i18n from 'path-to-your-i18n-file'

// ...

cmp = shallow(SignupLayout, {
  store,
  localVue,
  propsData: {
      title: ['Login']
  },
  data: {
      email: 'abc@dsf.com'
  },
  i18n // <- add the i18n object here
})

Vue.js相关问答推荐

Vue3组合-如何在组件卸载时注销回调

Vue Js Composition Api 未定义(读取名称)

Nuxt 2.15.7 的构建错误 - 无法解析 CSS @font-face URL

Vue:根元素内容和内容分发槽

使用带有 v-date-picker 的 new Date() 不起作用

如何在 Vuetify v-data-table 上对齐标题

作用域slots和 IE11 的问题

如何在 vue.js 构建中重命名 index.html?

Vue.js 中的 mount挂载是什么意思?

可以同时使用 Tailwind css 和 Bootstrap 4 吗?

根据 URL 有条件地隐藏视图组件

如何根据生产或开发模式读取不同的 .env 文件?

为什么当我 Select 第二个输入框时音译transliteration不起作用?

Vuetify 2 个工具栏和 1 个导航抽屉,navigation drawer导航抽屉上方有 1 个工具栏

在Vue中单击路由链接上的激活方法

找不到模块 'babel-core' 但已安装 @babel/core

将登录页面包含在单页应用程序中是否不安全?

更改时(change)调用函数

如何从浏览器的源中删除 webpack://

Vue.js 显示空格(换行符)