测试套件无法运行 TypeError:无法设置 null Running in Jest 的属性“content" [英] Test suite failed to run TypeError: Cannot set property 'content' of null Running in Jest
问题描述
我正在编写一个基于 Vue 的项目的测试，我是框架 Jest 和 Vue 测试实用程序的新手，我还没有找到类似问题的解决方案，我尝试了几个组件，但错误总是相似
>example.test.js
从'@vue/test-utils'导入{shallowMount}从 './Foo.vue' 导入 Foo描述('Foo'，()=> {it('渲染一个 div', () => {const 包装器 = 浅安装(Foo)期望(wrapper.contains('div')).toBe(true)})})<代码>● 测试套件运行失败类型错误:无法设置 null 的属性内容"6 |让 apiBaseUrl = document.head.querySelector('meta[name="apiBaseUrl"]');7 |如果(！apiBaseUrl){>8 |apiBaseUrl.content = '/api/';|^9 |}10 |11 |让 newAxios = axios.create({api.js
let apiBaseUrl = document.querySelector('meta[name=apiBaseUrl"]');如果(！apiBaseUrl){apiBaseUrl.content = '/api/';}让 newAxios = axios.create({标题:{//IE11 的修复 - 我们需要定义 Pragma 标头Pragma: '无缓存',//'X-Requested-With': 'XMLHttpRequest'},withCredentials: 真,baseURL: apiBaseUrl.content,paramsSerializer:函数(参数){返回 qs.stringify(params)}});index.html
<元字符集=utf-8"><meta http-equiv="X-UA-Compatible";内容=IE=边缘"><元名称=视口"内容=宽度=设备宽度，初始比例=1.0"><meta name="apiBaseUrl";内容=<%= VUE_APP_BASE_API_URL %>"><link rel="icon";href=<%= BASE_URL %>favicon.ico"><title>test</title>这是我的组件的真实代码，允许用户识别
<div类=登录"><div class="login--headline"><路由器链接标签=a"；:to="{name: 'home'}";class="登录--`headline-logo">`*****<脚本>从 'vuex' 导入 {mapActions, mapGetters}；从@components/account/PasswordReset"导入ResetPassword；从@components/account/RegisterUser"导入注册用户；导出默认{名称:登录"，组件: {注册用户，******重设密码},数据() {返回 {当前模式:登录"，密码忘记模式:假，注册模式:假，电子邮件:"，密码:"，记住我:假的，电子邮件规则:[v =>!! v ||'E-Mail wird benötigt',],密码规则:[v =>!! v ||'Passwort wird benötigt',],有效:假，}},计算:{...mapGetters({isAdministrator: '账户/isAdministrator',})},方法: {...mapActions({handleLogin: '账户/handleLogin',addSnackbarFromError: 'app/addSnackbarFromError',}),发送() {如果 (this.$refs.form.validate()) {this.handleLogin({记住我:这个.记住我，电子邮件:this.email，密码:this.password，}).then(() => {window.localStorage.setItem('logged_in', true);如果(this.$route.query.redirect){this.$router.push(decodeURIComponent(this.$route.query.redirect));} 别的 {如果(this.$store.getters[account/isAdministrator"]){this.$router.push({name: 'userNotificationsOverview'});} 别的 {this.$router.push({name: 'startingSite'});}}}).catch((错误) => {this.password = '';this.addSnackbarFromError(error)})}}}}
在 Jest 中测试组件时，该组件是独立挂载的，来自其他组件或 Vue 应用程序外部的 DOM 将不可用.只有来自组件本身的 DOM 及其子组件才可用.
在这种情况下，我建议找到另一种方法将基本 URL 传递给您的组件，例如通过道具，或者如果 document.querySelector()document.querySelector()返回NULL.
I am writing a test on a Vue based project, and I am new to the Framwork Jest and Vue testing Utils, I have not found solutions for similar problems, I have tried with several components but the error is always similar
exemple.test.js
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
const wrapper = shallowMount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
● Test suite failed to run
TypeError: Cannot set property 'content' of null
6 | let apiBaseUrl = document.head.querySelector('meta[name="apiBaseUrl"]');
7 | if(!apiBaseUrl) {
> 8 | apiBaseUrl.content = '/api/';
| ^
9 | }
10 |
11 | let newAxios = axios.create({
api.js
let apiBaseUrl = document.querySelector('meta[name="apiBaseUrl"]');
if(!apiBaseUrl) {
apiBaseUrl.content = '/api/';
}
let newAxios = axios.create({
headers: {
// A fix for IE11 - we need to define Pragma header
Pragma: 'no-cache',
// 'X-Requested-With': 'XMLHttpRequest'
},
withCredentials: true,
baseURL: apiBaseUrl.content,
paramsSerializer: function (params) {
return qs.stringify(params)
}
});
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="apiBaseUrl" content="<%= VUE_APP_BASE_API_URL %>" >
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
</head>
this is the real code of my Component , that allows the User to identify
<template>
<div class="login">
<div class="login--headline">
<router-link tag="a" :to="{name: 'home'}" class="login--`headline-logo">`
*****
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex';
import ResetPassword from "@components/account/PasswordReset";
import RegisterUser from "@components/account/RegisterUser";
export default {
name: "Login",
components: {
RegisterUser,
******
ResetPassword
},
data() {
return {
currentMode: "login",
passwordForgotMode: false,
registerMode: false,
email: "",
password: "",
rememberMe: false,
emailRules: [
v => !!v || 'E-Mail wird benötigt',
],
passwordRules: [
v => !!v || 'Passwort wird benötigt',
],
valid: false,
}
},
computed: {
...mapGetters({
isAdministrator: 'account/isAdministrator',
})
},
methods: {
...mapActions({
handleLogin: 'account/handleLogin',
addSnackbarFromError: 'app/addSnackbarFromError',
}),
send() {
if (this.$refs.form.validate()) {
this.handleLogin({
rememberMe: this.rememberMe,
email: this.email,
password: this.password,
})
.then(() => {
window.localStorage.setItem('logged_in', true);
if (this.$route.query.redirect) {
this.$router.push(decodeURIComponent(this.$route.query.redirect));
} else {
if (this.$store.getters["account/isAdministrator"]) {
this.$router.push({name: 'userNotificationsOverview'});
} else {
this.$router.push({name: 'startingSite'});
}
}
})
.catch((error) => {
this.password = '';
this.addSnackbarFromError(error)
})
}
}
}
}
When testing a component in Jest, that component is mounted standalone, and the DOM from other components or from outside the Vue application will not be available. Only the DOM from the component itself, and its children will be available.
In this case, I'd suggest to find another way to pass the base URL to your component, via for example a prop, or to have a fallback URL for your tests if document.querySelector() returns NULL.
这篇关于测试套件无法运行 TypeError:无法设置 null Running in Jest 的属性“content"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
