Jest + Vue test utlis TypeError: Cannot set property 'content' of null [duplicate] - vue.js

Question

This question already has an answer here:
Test suite failed to run TypeError: Cannot set property 'content' of null Running in Jest
(1 answer)
Closed 1 year ago.
I am writing a test on a Vue project, and I am new to Framwork Jest and Vue testing utilities, have not found solutions to similar issues, have tried with multiple components but the error is still similar, I thought about Mock axios, it didn't work, if someone can help me I'm stuck,
if someone can offer me a solution or have an idea how it goes, it will be perfect
Api.js
import axios from 'axios'
import qs from 'qs';
import router from '#/router';
import defaultExport from '#/store';
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)
}
});
Login.vue
<script>
****
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)
})
}
}
}
}
</script>
Test.test.js
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuex from 'vuex';
import Login from "#pages/Login";
let wrapper;
let store;
let actions;
let mutations;
let state;
const localVue = createLocalVue();
localVue.use(Vuex);
beforeEach(() => {
actions = {
someAction: jest.fn()
};
mutations = {
someMutation: jest.fn()
};
state = {
key: {}
};
store = new Vuex.Store({
actions,
mutations,
state,
});
wrapper = shallowMount(Login, {
propsData: {},
attachTO: '#root',
mocks: {},
stubs: {},
methods: {},
store,
localVue,
});
});
afterEach(() => {
wrapper.destroy();
});
describe('Component', () => {
test('is a Vue instance', () => {
expect(wrapper.contains('h2')).toBe(true)
});
});
● Test suite failed to run
TypeError: Cannot set property 'content' of null
let apiBaseUrl = document.querySelector('meta[name="apiBaseUrl"]');
7 | if(!apiBaseUrl) {
> 8 | apiBaseUrl.content = '/api/';
| ^
9 | }
10 |
11 | let newAxios = axios.create({

Answer 1

The bug is here:
if(!apiBaseUrl) {
^^^^^^^^^^^
apiBaseUrl.content = '/api/';
}
The !apiBaseUrl condition checks that apiBaseUrl is falsy (null or undefined), and then tries to use it, leading to the error you observed.
Simply remove the ! operator from the condition to fix that error:
if(apiBaseUrl) {
apiBaseUrl.content = '/api/';
}