import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Testeando Solid",
  "children": [{
    "depth": 2,
    "value": "Configuración de pruebas",
    "children": [{
      "depth": 3,
      "value": "Configurando Jest",
      "children": [{
        "depth": 4,
        "value": "Jest con Typescript (ts-jest)",
        "children": []
      }]
    }, {
      "depth": 3,
      "value": "Configurando uvu",
      "children": [{
        "depth": 4,
        "value": "Uvu con Typescript (ts-uvu)",
        "children": []
      }, {
        "depth": 4,
        "value": "Reportes de cobertura con Uvu",
        "children": []
      }, {
        "depth": 4,
        "value": "Modo Watch",
        "children": []
      }]
    }]
  }, {
    "depth": 2,
    "value": "Patrones de Prueba y Mejores Prácticas",
    "children": [{
      "depth": 3,
      "value": "Prueba de estado reactivo",
      "children": [{
        "depth": 4,
        "value": "Pruebas en Jest",
        "children": []
      }, {
        "depth": 4,
        "value": "Pruebas en uvu",
        "children": []
      }]
    }, {
      "depth": 3,
      "value": "Directivas de Pruebas",
      "children": [{
        "depth": 4,
        "value": "Pruebas en Jest",
        "children": []
      }, {
        "depth": 4,
        "value": "Pruebas en uvu",
        "children": []
      }]
    }, {
      "depth": 3,
      "value": "Probando Componentes",
      "children": [{
        "depth": 4,
        "value": "Pruebas en Jest",
        "children": []
      }, {
        "depth": 4,
        "value": "Pruebas en uvu",
        "children": []
      }]
    }]
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    h3: "h3",
    code: "code",
    h4: "h4",
    pre: "pre",
    span: "span",
    blockquote: "blockquote"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "testeando-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#testeando-solid",
        children: "#"
      }), "Testeando Solid"]
    }), "\n", jsx(_components.p, {
      children: "Para usar su código Solid en producción, necesita probarse. Como no desea probar todo manualmente, necesita pruebas automatizadas. Probar el código sólido puede ser simple, una vez que haya configurado todo y conozca algunos patrones útiles para las pruebas."
    }), "\n", jsxs(_components.h2, {
      id: "configuración-de-pruebas",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#configuración-de-pruebas",
        children: "#"
      }), "Configuración de pruebas"]
    }), "\n", jsx(_components.p, {
      children: "Ofrecemos soporte para dos herramientas para correr tests:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "jest - Muy bien establecida y con muchas funcionalidades"
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "uvu - Solo tiene lo mínimo y necesario"
        }), "\n"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["Ambas opciones están basadas en ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-testing-library",
        children: "solid-testing-library"
      }), ", que integra which integrates ", jsx(_components.a, {
        href: "https://testing-library.com/",
        children: "Testing Library"
      }), " a Solid. Testing Library simula un navegador liviano y provee una API para interactuar con el mismo desde tus tests."]
    }), "\n", jsx(_components.p, {
      children: "Mantenemos un template para empezar a usar tests con Jest en Solid. Recomendamos que tu proyecto se base en este template, o también puedes instalar el template en un proyecto nuevo y copiar su configuración a tu proyecto existente."
    }), "\n", jsxs(_components.p, {
      children: ["Los templates usan la herramienta ", jsx(_components.a, {
        href: "https://github.com/Rich-Harris/degit",
        children: "degit"
      }), " para su instalación."]
    }), "\n", jsxs(_components.h3, {
      id: "configurando-jest",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#configurando-jest",
        children: "#"
      }), "Configurando Jest"]
    }), "\n", jsxs(_components.p, {
      children: ["La intragración de Jest se basa en la configuración de Jest ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-jest",
        children: "solid-jest/preset/browser"
      }), ", la cual le permite usar Solid como si lo utilizara en el navegador. Esto usa Babel para transformar a código Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Utiliza ", jsx(_components.a, {
        href: "https://github.com/testing-library/jest-dom",
        children: "jest-dom"
      }), " para extender ", jsx(_components.code, {
        children: "expect"
      }), " con muchos matchers personalizados para ayudarlo a escribir sus tests."]
    }), "\n", jsxs(_components.h4, {
      id: "jest-con-typescript-ts-jest",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#jest-con-typescript-ts-jest",
        children: "#"
      }), "Jest con Typescript (", jsx(_components.code, {
        children: "ts-jest"
      }), ")"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-bash",
        children: ["$ npx degit solidjs/templates/ts-jest my-solid-project\n$ ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-solid-project\n$ npm install ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o pnpm install o yarn install"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Notar que este template no tiene chequeo de tipos durante el testing; puedes usar un IDE o un comando personalizado ", jsx(_components.code, {
        children: "tsc --noEmit"
      }), " en el archivo ", jsx(_components.code, {
        children: "package.json"
      }), " para activar dichos chequeos."]
    }), "\n", jsxs(_components.h3, {
      id: "configurando-uvu",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#configurando-uvu",
        children: "#"
      }), "Configurando uvu"]
    }), "\n", jsxs(_components.p, {
      children: ["También mantenemos un template para comenzar para ", jsx(_components.code, {
        children: "uvu"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Incluye ", jsx(_components.a, {
        href: "https://www.npmjs.com/package/solid-dom-testing",
        children: "solid-dom-testing"
      }), " para ayudar a escribir aserciones útiles con Testing Library."]
    }), "\n", jsxs(_components.h4, {
      id: "uvu-con-typescript-ts-uvu",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#uvu-con-typescript-ts-uvu",
        children: "#"
      }), "Uvu con Typescript (", jsx(_components.code, {
        children: "ts-uvu"
      }), ")"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-bash",
        children: ["$ npx degit solidjs/templates/ts-uvu my-solid-project\n$ ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-solid-project\n$ npm install ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o pnpm install o yarn install"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h4, {
      id: "reportes-de-cobertura-con-uvu",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reportes-de-cobertura-con-uvu",
        children: "#"
      }), "Reportes de cobertura con Uvu"]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Desafortunadamente, debido a una ", jsx(_components.a, {
          href: "https://github.com/babel/babel/issues/4289",
          children: "limitación de babel"
        }), " no podemos obtener mapas de origen desde un JSX transpilado, lo que resulta en que los componentes muestren 0% de cobertura. Sí funciona para código que no contiene JSX."]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Si deseas tener cobertura de código en tus tests, la herramienta preferida para uvu es c8. Para instalarla y configurarla, corre:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm i --save-dev c8 ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn add -D or pnpm"
        }), "\n> npm set-script ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"test:coverage\""
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"c8 uvu -r solid-register\""
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Ahora, al correr ", jsx(_components.code, {
        children: "npm run test:coverage"
      }), ", podrás ver la cobertura de tests para tu código."]
    }), "\n", jsxs(_components.p, {
      children: ["Si deseas tener buenos reportes de cobertura para HTML, puedes usar ", jsx(_components.code, {
        children: "c8 -r html"
      }), " en lugar de ", jsx(_components.code, {
        children: "c8"
      }), " para habilitar los reportes html."]
    }), "\n", jsxs(_components.h4, {
      id: "modo-watch",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#modo-watch",
        children: "#"
      }), "Modo Watch"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "uvu"
      }), " no tiene un modo watch por defecto, pero puedes usar ", jsx(_components.code, {
        children: "chokidar-cli"
      }), " para conseguir lo mismo:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm i --save-dev chokidar-cli ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn add -D o pnpm"
        }), "\n> npm set-script ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"test:watch\""
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"chokidar src/**/*.ts src/**/*.tsx -c \\\"uvu -r solid-register\\\"\n# use .js/.jsx en lugar de .ts/.tsx\n"
        })]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Ahora, si corres ", jsx(_components.code, {
        children: "npm run test:watch"
      }), ", las pruebas correran cada vez que cambies un archivo."]
    }), "\n", jsxs(_components.h2, {
      id: "patrones-de-prueba-y-mejores-prácticas",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#patrones-de-prueba-y-mejores-prácticas",
        children: "#"
      }), "Patrones de Prueba y Mejores Prácticas"]
    }), "\n", jsx(_components.p, {
      children: "Ahora que ha instalado sus herramientas de prueba, debe comenzar a usarlas. Para hacer esto más fácil, Solid admite algunos patrones agradables."
    }), "\n", jsxs(_components.h3, {
      id: "prueba-de-estado-reactivo",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#prueba-de-estado-reactivo",
        children: "#"
      }), "Prueba de estado reactivo"]
    }), "\n", jsxs(_components.p, {
      children: ["Es posible que desee mantener partes de su estado separadas de los componentes para facilitar el mantenimiento o poder admitir múltiples vistas. En este caso, la interfaz contra la que estarás probando es el propio estado. Tenga en cuenta que fuera de una [raíz reactiva] (", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#createroot",
        children: "https://www.solidjs.com/docs/latest/api#createroot"
      }), ") no se realiza un seguimiento del estado y las actualizaciones no dispararán efectos ni memos."]
    }), "\n", jsxs(_components.p, {
      children: ["Además, dado que los efectos se activan asincrónicamente, puede ser útil envolver nuestras afirmaciones en un efecto final. Alternativamente, para observar una secuencia de efectos sobre múltiples cambios, puede ayudar retornar las herramientas necesarias desde ", jsx(_components.code, {
        children: "createRoot"
      }), " y ejecutarlas en una función de prueba asíncrona (ya que ", jsx(_components.code, {
        children: "createRoot"
      }), " en sí no puede tomar una función ", jsx(_components.code, {
        children: "asíncrona"
      }), ")."]
    }), "\n", jsxs(_components.p, {
      children: ["Como ejemplo, probemos ", jsx(_components.code, {
        children: "createLocalStorage"
      }), " del ", jsx(_components.a, {
        href: "https://www.solidjs.com/examples/todos",
        children: "ejemplo de tareas pendientes"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createEffect } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createStore, ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Store"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "SetStoreFunction"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/store\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " createLocalStore<T>(", jsx(_components.span, {
          className: "hljs-attr",
          children: "initState"
        }), ": T): [", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Store"
        }), "<T>, ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "SetStoreFunction"
        }), "<T>] {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(initState);\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), ") ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "parse"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), "));\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " (", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), " = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "stringify"
        }), "(state)));\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [state, setState];\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["En lugar de crear un componente TODO, podemos probar este modelo de forma aislada; cuando hacemos eso, debemos tener en cuenta que 1. los cambios reactivos solo funcionan cuando tienen un contexto de rastreo proporcionado por ", jsx(_components.code, {
        children: "render"
      }), " o ", jsx(_components.code, {
        children: "createRoot"
      }), " y 2. son asíncronos, pero podemos usar ", jsx(_components.code, {
        children: "createEffect"
      }), " para detectarlos. El uso de ", jsx(_components.code, {
        children: "createRoot"
      }), " tiene la ventaja de que podemos activar la eliminación manualmente:"]
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-jest",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-jest",
        children: "#"
      }), "Pruebas en Jest"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createLocalStore } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./main.tsx\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createRoot, createEffect } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "describe"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"createLocalStore\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "beforeEach"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeItem"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"todos\""
        }), ");\n\t});\n\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " initialState = {\n\t\t", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [],\n\t\t", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ",\n\t};\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"lee el estado pre-existente de localStorage\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), " {\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " savedState = { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"saved\""
        }), " };\n\t\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setItem"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"todos\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "stringify"
        }), "(savedState));\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createLocalStore"
        }), "(initialState);\n\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(state).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toEqual"
        }), "(savedState);\n\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t}));\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"almacena nuevo estado en el localStorage\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), " {\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createLocalStore"
        }), "(initialState);\n\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"newTitle\""
        }), ", ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"updated\""
        }), ");\n\t\t\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// to catch an effect, use an effect"
        }), "\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), "\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "parse"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ")).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toEqual"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"updated\""
        }), " });\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t\t})\n\t\t\t);\n\t\t}));\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"actualiza el estado múltiples veces\""
        }), ", ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { dispose, setState } = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), " {\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createLocalStore"
        }), "(initialState);\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " { dispose, setState };\n\t\t});\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"newTitle\""
        }), ", ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"first\""
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// wait a tick to resolve all effects"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "done"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setTimeout"
        }), "(done, ", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "));\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "parse"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ")).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toEqual"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"first\""
        }), " });\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"newTitle\""
        }), ", ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"second\""
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "done"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setTimeout"
        }), "(done, ", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "));\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "parse"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ")).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toEqual"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"first\""
        }), " });\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t});\n});\n"]
      })
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-uvu",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-uvu",
        children: "#"
      }), "Pruebas en uvu"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createLocalStore } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./main\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { suite } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"uvu\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " * ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "as"
        }), " assert ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"uvu/assert\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createEffect, createRoot } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " todoTest = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "suite"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"createLocalStore\""
        }), ");\n\ntodoTest.", jsx(_components.span, {
          className: "hljs-property",
          children: "before"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "each"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeItem"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"todos\""
        }), ");\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " initialState = {\n\t", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [],\n\t", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ",\n};\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todoTest"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"lee el estado pre-existente de localStorage\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " savedState = { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"saved\""
        }), " };\n\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setItem"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"todos\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "stringify"
        }), "(savedState));\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createLocalStore"
        }), "(initialState);\n\t\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "equal"
        }), "(state, savedState);\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t})\n);\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todoTest"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"almacena nuevo estado en el localStorage\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [_, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createLocalStore"
        }), "(initialState);\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"newTitle\""
        }), ", ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"updated\""
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// to catch an effect, we need an effect"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), "\n\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "equal"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "JSON"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "parse"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "localStorage"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "todos"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), "), { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [], ", jsx(_components.span, {
          className: "hljs-attr",
          children: "newTitle"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"updated\""
        }), " });\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t})\n\t\t);\n\t})\n);\n\ntodoTest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "directivas-de-pruebas",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#directivas-de-pruebas",
        children: "#"
      }), "Directivas de Pruebas"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#use%3A___",
        children: "Directivas"
      }), " permiten usar refs de forma reutilizable. Son básicamente funciones que siguen el patrón ", jsx(_components.code, {
        children: "(ref: HTMLElement, data: Accessor<any>) => void"
      }), ". En nuestro [tutorial de directivas] (", jsx(_components.a, {
        href: "https://www.solidjs.com/tutorial/bindings_directives?solved",
        children: "https://www.solidjs.com/tutorial/bindings_directives?solved"
      }), "), definimos la directiva ", jsx(_components.code, {
        children: "clickOutside"
      }), " que debe llamar al callback envuelto en el argumento de acceso."]
    }), "\n", jsx(_components.p, {
      children: "Ahora podríamos crear un componente y usar la directiva allí, pero luego estaríamos probando el uso de directivas en lugar de probar directamente la directiva. Es más sencillo probar la superficie de la directiva al proporcionar un nodo montado y el descriptor de acceso:"
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-jest-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-jest-1",
        children: "#"
      }), "Pruebas en Jest"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// click-outside.test.ts"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " clickOutside ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click-outside\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createRoot } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { fireEvent } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-testing-library\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "describe"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"clickOutside\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ref = ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createElement"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"div\""
        }), ");\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "beforeAll"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "appendChild"
        }), "(ref);\n\t});\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "afterAll"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeChild"
        }), "(ref);\n\t});\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"se disparará al dar click afuera\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(\n\t\t\t", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), "\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), " {\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " clickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ";\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(ref, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\t\tclickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ";\n\t\t\t\t\t});\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(clickedOutside).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toBeTruthy"
        }), "();\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t\t\t});\n\t\t\t\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ");\n\t\t\t\t})\n\t\t));\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"no se disparará al hacer click dentro\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(\n\t\t\t", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), "\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), " {\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " clickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ";\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(ref, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\t\tclickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ";\n\t\t\t\t\t});\n\t\t\t\t\tref.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(clickedOutside).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toBeFalsy"
        }), "();\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t\t\t});\n\t\t\t\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(ref);\n\t\t\t\t})\n\t\t));\n});\n"]
      })
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-uvu-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-uvu-1",
        children: "#"
      }), "Pruebas en uvu"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// click-outside.test.ts"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " clickOutside ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click-outside.tsx\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createRoot } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { fireEvent } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-testing-library\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " clickTest = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "suite"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"clickOutside\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ref = ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createElement"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"div\""
        }), ");\n\nclickTest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "before"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "appendChild"
        }), "(ref);\n});\n\nclickTest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "after"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeChild"
        }), "(ref);\n});\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickTest"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"se disparará al dar click afuera\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(\n\t\t", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), "\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), " {\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " clickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ";\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(ref, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\tclickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ";\n\t\t\t\t});\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ok"
        }), "(clickedOutside);\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t\t});\n\t\t\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ");\n\t\t\t})\n\t)\n);\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickTest"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"no se disparará al hacer click dentro\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRoot"
        }), "(\n\t\t", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "dispose"
          }), ") =>"]
        }), "\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), ">(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "resolve"
          }), ") =>"]
        }), " {\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " clickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ";\n\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(ref, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\tclickedOutside = ", jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ";\n\t\t\t\t});\n\t\t\t\tref.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t\t\t\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "is"
        }), "(clickedOutside, ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ");\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispose"
        }), "();\n\t\t\t\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t\t\t});\n\t\t\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(ref);\n\t\t\t})\n\t)\n);\n\nclickTest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "probando-componentes",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#probando-componentes",
        children: "#"
      }), "Probando Componentes"]
    }), "\n", jsx(_components.p, {
      children: "Tomemos un componente muy simple de contador de clics que queremos probar:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// main.tsx"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal, ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Counter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " = ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n\t\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "role"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'button'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c + 1)}>\n\t\t\tCount: {count()}\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n\t);\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Aquí usamos ", jsx(_components.code, {
        children: "solid-testing-library"
      }), ". Es muy importante que los helpers sean ", jsx(_components.code, {
        children: "render"
      }), " para renderizar un componente de una forma controlada, ", jsx(_components.code, {
        children: "fireEvent"
      }), " para despachar eventos de una forma similar a los eventos de usuario y ", jsx(_components.code, {
        children: "screen"
      }), " para proveer selectores globales. También usamos aserciones útiles que fueron agregadas a ", jsx(_components.code, {
        children: "expect"
      }), " provistas por ", jsx(_components.code, {
        children: "@testing-library/jest-dom"
      }), "."]
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-jest-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-jest-2",
        children: "#"
      }), "Pruebas en Jest"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// main.test.tsx"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Counter"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./main\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { cleanup, fireEvent, render, screen } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-testing-library\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "describe"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Counter\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "afterEach"
        }), "(cleanup);\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"comienza en cero\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " />"]
          })
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " button = screen.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getByRole"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"button\""
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(button).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toBeInTheDocument"
        }), "();\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(button).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toHaveTextContent"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 0\""
        }), ");\n\t});\n\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "test"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"aumenta su valor cada click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " />"]
          })
        }), ");\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " button = screen.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getByRole"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"button\""
        }), ");\n\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(button);\n\t\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// el bucle de eventos requiere una Promesa para resolver y finalizar"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(button).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toHaveTextContent"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 1\""
        }), ");\n\t\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(button);\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\t\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "expect"
        }), "(button).", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toHaveTextContent"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 2\""
        }), ");\n\t});\n});\n"]
      })
    }), "\n", jsxs(_components.h4, {
      id: "pruebas-en-uvu-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pruebas-en-uvu-2",
        children: "#"
      }), "Pruebas en uvu"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// main.test.tsx"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { suite } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"uvu\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " * ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "as"
        }), " assert ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"uvu/assert\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Counter"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"main\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { fireEvent, render, screen } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-testing-library\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { isInDocument, hasTextContent } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-dom-testing\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " testCounter = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "suite"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Counter\""
        }), ");\n\ntestCounter.", jsx(_components.span, {
          className: "hljs-property",
          children: "after"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "each"
        }), "(cleanup);\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "testCounter"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"comienza en cero\""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { getByRole } = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " />"]
          })
        }), ");\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " button = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getByRole"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"button\""
        }), ");\n\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ok"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "isInDocument"
        }), "(button), ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"el botón no está en el DOM\""
        }), ");\n\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ok"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "hasTextContent"
        }), "(button, ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 0\""
        }), "), ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"contiene texto incorrecto\""
        }), ");\n});\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "testCounter"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"aumenta su valor cada click\""
        }), ", ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n\t", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " />"]
          })
        }), ");\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " button = screen.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getByRole"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"button\""
        }), ");\n\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(button);\n\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// el bucle de eventos requiere una Promesa para resolver y finalizar"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ok"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "hasTextContent"
        }), "(button, ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 1\""
        }), "), ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"el conteo no es 1 después del primer click\""
        }), ");\n\tfireEvent.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "click"
        }), "(button);\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "resolve"
        }), "();\n\tassert.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ok"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "hasTextContent"
        }), "(button, ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Count: 2\""
        }), "), ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"el conteo no es 2 después del segundo click\""
        }), ");\n});\n\ntestCounter.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=testing-f4047fbe.js.map
