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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo optimizar el código montando el componente de Vue en el gancho beforeEach utilizando Typescript?

¿Cómo puedo optimizar el código montando el componente de Vue en el gancho beforeEach utilizando Typescript?

18 Jun, 2023 Programación

Aquí está mi código. Quiero optimizar este caso.

describe("ID almacenada", () => {

it("ID vacío", () => {

// cuando
const wrapper = mount(SigninPage, options);
const vm = wrapper.vm;

});

it("ID existe", () => {

// cuando
localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID, STORED_ID);
const wrapper = mount(SigninPage, options);
const vm = wrapper.vm;

});

});

¿Cómo puedo utilizar el gancho beforeEach de la siguiente manera usando TypeScript?

Quiero utilizar el gancho beforeEach. Pero no puedo ejecutar la prueba debido a tsc. Creo que será posible cuando los tipos de variables sean correctos.

describe("ID almacenada", () => {

// problema
let wrapper: VueWrapper<¿?>;
let vm: ¿?;

beforeEach(() => {
wrapper = mount(SigninPage);
vm = wrapper.vm;
});

it("ID vacío", () => {

  // const wrapper = mount(SigninPage, options);
  // const vm = wrapper.vm;

});

it("ID existe", () => {

  // ¿Debo guardarlo antes de que se monte el wrapper?
  localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID, STORED_ID);
  // const wrapper = mount(SigninPage, options);
  // const vm = wrapper.vm;

});

});
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para usar el hook beforeEach en Typescript, es necesario especificar los tipos correctos para las variables wrapper y vm.

    Aquí hay un ejemplo:

    import { VueWrapper } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import SigninPage from './SigninPage.vue';

describe("ID almacenado", () => {

  let wrapper: VueWrapper<signinpage>;
  let vm: SigninPage;

  beforeEach(() => {
    wrapper = mount(SigninPage);
    vm = wrapper.vm;
  });

  it("ID vacío", () => {
    // vm y wrapper se pueden utilizar aquí
  });

  it("ID existe", () => {
    localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID, "stored-id");
    // vm y wrapper se pueden utilizar aquí
  });

});

    En este ejemplo, importamos VueWrapper y mount de @vue/test-utils y especificamos el tipo correcto SigninPage para las variables wrapper y vm. Ahora, se puede acceder a vm y wrapper en beforeEach y en los casos de prueba.

Comments are closed.