es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

[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?

Tags:  , , ,

Answer

  1. Avatar for 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 como vue-cookies para simular la propiedad $cookies.

    En primer lugar, instala la biblioteca vue-cookies:

    npm install vue-cookies --save-dev
    

    Luego, en tu archivo de prueba, importa la biblioteca vue-cookies y utiliza el método Vue.use() para instalarla:

    import VueCookies from 'vue-cookies';
    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", () => {
      beforeAll(() => {
        Vue.use(VueCookies);
      });
    
      const wrapper = shallowMount(MyComponent);
    
      test("should do something", async () => {
        await wrapper.find('[data-test="do-something"]').trigger("click");
      });
    });
    

    Esto te permitirá utilizar el método $cookies.get() en tu prueba sin causar el error.

Comments are closed.