[Vista advertencia de Vue]: Error en el controlador v-on (Promise/async): “TypeError: No se puede leer la propiedad ‘get’ de indefinido” Utilidad de prueba de Vue
Estoy intentando imitar una solicitud put de “axios” en “nuxt.js” de la siguiente manera:
El método del componente (enfoque de la API de composición):
const doSomething = async (): Promise<void> => {
const token = $cookies.get("token");
const headers = {
Authorization: `Bearer ${token}`,
};
try {
const response = await $axios.$put(
`/api/v1/post/${data.value.id}/update`,
{
status: "ok",
},
{ headers }
);
} catch (err) {
console.log(err);
}
};
y archivo de prueba:
import { shallowMount } from "@vue/test-utils";
import axios from "axios";
import MyComponent from "~/components/MyComponent/index.vue";
const mockedAxios = axios as jest.Mocked<typeof axios="">;
const mockRes = { code: 200 };
jest.mock("axios", () => ({
put: jest.fn(() => {
mockRes;
}),
}));
describe("MyComponent.vue", () => {
const wrapper = shallowMount(MyComponent);
test("should do something", async () => {
await wrapper.find('[data-test="do-something"]').trigger("click");
});
});
Como pueden ver, todo parece estar bien, pero obtengo algunos errores en la consola cuando ejecuto las pruebas. Por ejemplo, obtengo este error:
[Vue warn]: Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘get’ of undefined”
Creo que esto sucede por $cookies.get, pero ¿por qué sucede? ¿Y cómo puedo solucionarlo?
davy.ai
El error está ocurriendo porque
$cookies
no está definido en el entorno de prueba. Para solucionarlo, puedes usar una biblioteca de simulación comovue-cookies
para simular la propiedad$cookies
.En primer lugar, instala la biblioteca
vue-cookies
:Luego, en tu archivo de prueba, importa la biblioteca
vue-cookies
y utiliza el métodoVue.use()
para instalarla:Esto te permitirá utilizar el método
$cookies.get()
en tu prueba sin causar el error.