Skip to content

Instantly share code, notes, and snippets.

@kbitsr

kbitsr/vite-testing-config.md

Forked from Klerith/vite-testing-config.md
Last active October 11, 2025 06:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kbitsr/2e7bcc9e1b6a971f5f2a7be6e0aa2129 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kbitsr/2e7bcc9e1b6a971f5f2a7be6e0aa2129 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kbitsr revised this gist Oct 11, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@ module.exports = {
    }
    ```

    __jest.setup.cjs__
    __jest.setup.js__
    ```
    // En caso de necesitar la implementación del FetchAPI
    import 'whatwg-fetch'; // <-- yarn add whatwg-fetch
  2. kbitsr revised this gist Mar 26, 2024. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,13 +3,13 @@

    1. Instalaciones:
    ```
    yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react
    yarn add --dev @testing-library/react @types/jest jest-environment-jsdom
    npm install --dev jest babel-jest @babel/preset-env @babel/preset-react
    npm install --dev @testing-library/react @types/jest jest-environment-jsdom
    ```

    2. Opcional: Si usamos Fetch API en el proyecto:
    ```
    yarn add --dev whatwg-fetch
    npm install --dev whatwg-fetch
    ```

    3. Actualizar los scripts del __package.json__
    @@ -19,7 +19,7 @@ yarn add --dev whatwg-fetch
    "test": "jest --watchAll"
    ```

    4. Crear la configuración de babel __babel.config.js__
    4. Crear la configuración de babel __babel.config.cjs__
    ```
    module.exports = {
    presets: [
    @@ -31,15 +31,15 @@ module.exports = {

    5. Opcional, pero eventualmente necesario, crear Jest config y setup:

    __jest.config.js__
    __jest.config.cjs__
    ```
    module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
    }
    ```

    __jest.setup.js__
    __jest.setup.cjs__
    ```
    // En caso de necesitar la implementación del FetchAPI
    import 'whatwg-fetch'; // <-- yarn add whatwg-fetch
  3. @Klerith Klerith revised this gist Apr 28, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,7 @@ module.exports = {
    ```

    5. Opcional, pero eventualmente necesario, crear Jest config y setup:

    __jest.config.js__
    ```
    module.exports = {
  4. @Klerith Klerith revised this gist Apr 28, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ yarn add --dev @testing-library/react @types/jest jest-environment-jsdom
    yarn add --dev whatwg-fetch
    ```

    3. Actualizar los scripts del __package.json___
    3. Actualizar los scripts del __package.json__
    ```
    "scripts: {
    ...
  5. @Klerith Klerith revised this gist Apr 28, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ module.exports = {
    ```

    5. Opcional, pero eventualmente necesario, crear Jest config y setup:
    __jest.config.js___
    __jest.config.js__
    ```
    module.exports = {
    testEnvironment: 'jest-environment-jsdom',
  6. @Klerith Klerith revised this gist Apr 28, 2022. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    # Instalación y configuracion de Jest + React Testing Library
    ## En proyectos de React + Vite

    1. Instalaciones:
    ```
    yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react
  7. @Klerith Klerith created this gist Apr 28, 2022.
    44 changes: 44 additions & 0 deletions vite-testing-config.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    1. Instalaciones:
    ```
    yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react
    yarn add --dev @testing-library/react @types/jest jest-environment-jsdom
    ```

    2. Opcional: Si usamos Fetch API en el proyecto:
    ```
    yarn add --dev whatwg-fetch
    ```

    3. Actualizar los scripts del __package.json___
    ```
    "scripts: {
    ...
    "test": "jest --watchAll"
    ```

    4. Crear la configuración de babel __babel.config.js__
    ```
    module.exports = {
    presets: [
    [ '@babel/preset-env', { targets: { esmodules: true } } ],
    [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
    };
    ```

    5. Opcional, pero eventualmente necesario, crear Jest config y setup:
    __jest.config.js___
    ```
    module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
    }
    ```

    __jest.setup.js__
    ```
    // En caso de necesitar la implementación del FetchAPI
    import 'whatwg-fetch'; // <-- yarn add whatwg-fetch
    ```