Skip to content

Instantly share code, notes, and snippets.

@juan9900

juan9900/vite-testing-config.md

Forked from Klerith/vite-testing-config.md
Last active December 15, 2022 14:54
Show Gist options
  • Save juan9900/b44f0525cb7ce6d65c1e0c72995529e4 to your computer and use it in GitHub Desktop.
Save juan9900/b44f0525cb7ce6d65c1e0c72995529e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. juan9900 revised this gist Dec 15, 2022. No changes.
  2. @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 = {
  3. @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: {
    ...
  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
    @@ -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',
  5. @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
  6. @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
    ```