1

Estoy usando vite en mi proyecto con react-ts y a la hora de ejecutar un test me ha saltado el siguiente error:

 baseURL: import.meta.env.VITE_BASE_URL,
                  ^^^^

SyntaxError: Cannot use 'import.meta' outside a module

No puedo usar el process.env ya que uso vite, pero el test no me pilla el import.meta El test tiene la siguiente estructura, pero el problema está en que el import.meta no funciona:

import React from 'react'; 
import '@testing-library/jest-dom/extend-expect';
import { render, fireEvent, cleanup } from '@testing-library/react';

import ButtonComponent from './ButtonComponent';

test('render button content', () => {
    const component = render(<ButtonComponent quantity={quantity} data={undefined} from="XXX"/>);
    const button = component.getByTestId('button');

    expect(component).toBeTruthy();

    expect(button).toBeInTheDocument();
    expect(component.getByText(/serial/i));
});

¿Alguien sabe qué puedo hacer para que jest (react-testing-library) me funcione bien con vite?

4
  • Puede que esto te ayude. Puedes checar también estas posibles soluciones.
    – Jaime
    Commented el 18 may. 2022 a las 11:13
  • La cosa es que no tengo ningun jest.config.js ni nada de eso, solo un vite.config.ts
    – Héctor
    Commented el 18 may. 2022 a las 11:29
  • Te dejo este gist con la configuración introducir la descripción del enlace aquí Pero lo de las variables de entorno no funciona, creo que la única solución es pasar a vitest, pero aún así, estoy buscando, si encuentro algo te digo Commented el 20 jul. 2022 a las 17:22
  • Lo mejor que he aprendido luego de prueba y error con varios de estas formas con babel config o vite config o usando dotenv es que lo mejor es crear un archivo con las .env vars y luego hacer un mock de este en el test. Esta es la forma más fácil sin hacer configuraciones raras ni instalar ningún paquete extra stackoverflow.com/a/74882007/17638569
    – Luis
    Commented el 8 jun. 2023 a las 4:05

1 respuesta 1

2

Con esto te tendría que funcionar.

Creamos un fichero, yo lo creo en una carpeta helpers con el siguiente código. (Nombre del fichero getEnviroments.js) getEnviroments.js

export const getEnviroments = () =>{
import.meta.env;
return {
    ...import.meta.env
}

}

En el fichero jest.setup.js ( es posible que sea necesario instalar dotenv ) jest.setup.js

require('dotenv').config({
    path: '.env'
})

jest.mock('./src/helpers/getEnviroments',()=>({
    getEnviroments: () => ({...process.env})
}))

Ya podemos usar en los ficheros test process.env

Dejo enlace al Gist con toda la configuración de React Testing Library con Vite https://gist.github.com/AlexAlonsoMontero/981815de517902322f7a1c6b7bae9baf

1
  • Debería estar marcada como solución!
    – rafa_pe
    Commented el 21 oct. 2022 a las 14:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.