Back to Intro to Storybook
Chapters
  • Empezando
  • Componente Simples
  • Componente Compuesto
  • Datos
  • Pantallas
  • Desplegar
  • Testing
  • Complementos
  • Conclusión
  • Contribuir

Tutorial Storybook para Svelte

Configurar Svelte Storybook en tu entorno de desarrollo
Esta traducción de la comunidad aún no se ha actualizado a la última versión de Storybook. Ayúdanos a actualizarlo aplicando los cambios en la guía en español para esta traducción. Pull requests son bienvenidos.

Storybook se ejecuta junto con tu aplicación en modo desarrollo. Te ayuda a crear componentes de interfaz de usuario aislados de la lógica y el contexto de tu aplicación. Esta edición de Aprende Storybook es para Svelte; existe otras ediciones para Vue, Angular, React y React Native.

Storybook and your app

Configurar Storybook con Svelte

Necesitaremos seguir algunos pasos para configurar el proceso de build de nuestro entorno. Para iniciar, vamos a usar Degit para configurar nuestro sistema de build, y añadiremos Storybook y Jest para testear nuestra aplicación creada. Vamos a ejecutar los siguientes comandos:

# Create our application:
npx degit sveltejs/template taskbox

cd taskbox

# Install the dependencies
npm install

# Add Storybook:
npx storybook init

Configurar Jest con Svelte

Tenemos dos de las tres modalidades configuradas en nuestra aplicación, pero aún necesitamos una, tenemos que configurar Jest para habilitar las pruebas.

Vamos a ejecutar los siguientes comandos:

Copy
npm install -D jest @testing-library/svelte jest-transform-svelte @testing-library/jest-dom

Creamos una nueva carpeta llamada __mocks__, con dos archivos:

  • El primero llamado fileMock.js con el siguiente contenido:
    Copy
    fileMock.js
    module.exports = 'file-stub';
    
  • El segundo llamado styleMock.js con el siguiente contenido:
    Copy
    styleMock.js
    module.exports = {};
    

Cree un archivo .babelrc en la raíz del proyecto con lo siguiente:

Copy
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Y un nuevo campo en package.json:

Copy
{
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": "jest-transform-svelte"
    },
    "moduleFileExtensions": ["js", "svelte", "json"],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss|stylesheet)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
    "testPathIgnorePatterns": ["/node_modules/", "/build/", "/storybook-static/"]
  }
}

Y se requiere un nuevo script para ejecutar Jest:

{
  "scripts": {
    "test": "jest --watchAll"
  }
}
El uso de la bandera `--watchAll` en el script es para evitar que Jest arroje un error, porque en esta etapa todavía no hay un repositorio configurado. Eso se abordará más adelante.

Para asegurarnos de que todo funciona correctamente, necesitamos crear un archivo de prueba. En la carpeta src, agregue un archivo llamado Sample.test.js con lo siguiente:

Copy
Sample.test.js
// Sample.test.js

function sum(a, b) {
  return a + b;
}
describe('Sample Test', () => {
  it('should return 3 as the result of the function', () => {
    // set timeout to prevent false positives with tests
    expect(sum(1, 2)).toBe(3);
  });
});

Ahora podemos comprobar rápidamente que los diversos entornos de nuestra aplicación funcionan correctamente:

# Run the test runner (Jest) in a terminal:
npm run test

# Start the component explorer on port 6006:
npm run storybook

# Run the frontend app proper on port 5000:
npm run dev

Nuestras tres modalidades del frontend de la aplicación: test automatizado (Jest), desarrollo de componentes (Storybook) y la propia aplicación.

3 modalities

Dependiendo de en qué parte de la aplicación estés trabajando, es posible que quieras ejecutar uno o más de estos simultáneamente. Dado que nuestro objetivo actual es crear un único componente de UI, seguiremos ejecutando Storybook.

Reusa CSS

Taskbox reutiliza elementos de diseño de la aplicación de ejemplo de este Tutorial de GraphQL y React, por lo que no necesitaremos escribir CSS en este tutorial. Copia y pega este CSS compilado dentro del archivo src/index.css.

Taskbox UI

Si deseas modificar los estilos, los archivos fuente de CSS en formato LESS son proporcionados en el mismo repositorio de GitHub.

Añadiendo recursos

Para que coincida con el diseño previsto del tutorial, deberá transferir las carpetas de los iconos y las fuentes a la carpeta pública.

Svn (Subversion) se usó para facilitar la transferencia de carpetas de GitHub. Si no tiene instalado Subversion o simplemente desea hacerlo manualmente, puede obtener las carpetas directamente aquí.

Copy
svn export https://github.com/chromaui/learnstorybook-code/branches/master/src/assets/font src/assets/font
svn export https://github.com/chromaui/learnstorybook-code/branches/master/src/assets/icon src/assets/icon

Finalmente necesitamos actualizar nuestro script storybook para servir el directorio public (en package.json):

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"
  }
}

Después de añadir los estilos y recursos, nuestra aplicación se renderizará de forma un poco extraña. Está bien. No estamos trabajando en la aplicación ahora mismo. ¡Comenzamos con la construcción de nuestro primer componente!

Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Componente Simples
Construye un componente simple en aislamiento
✍️ Edit on GitHub – PRs welcome!
Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI