algunas pruebas automáticas

package.json

@@ -7,13 +7,18 @@
     "dist",
     "src"
   ],
+  "repository": {
+    "url": "https://github.com/matiasagbenitez/mb-product-card",
+    "type": "git"
+  },
   "engines": {
     "node": ">=10"
   },
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -47,17 +52,37 @@
     }
   ],
   "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
     "@rollup/plugin-image": "^3.0.3",
     "@size-limit/preset-small-lib": "^11.0.2",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-test-renderer": "^18.0.7",
+    "babel-jest": "^29.7.0",
     "husky": "^9.0.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^25.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.0.2",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
     "typescript": "^3.9.10"
+  },
+  "keywords": [
+    "react",
+    "product",
+    "card",
+    "matias",
+    "benitez"
+  ],
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
   }
 }

test/blah.test.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
+// import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../src';
 
 describe('it', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
+    // ReactDOM.render(<Thing />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 });

test/components/ProductCard.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductCard } from '../../src/components';
+import { product1 } from '../data/products';
+
+const { act } = renderer;
+
+describe('ProductCard', () => {
+  test('Debe de mostrar el componente correctamente', () => {
+    const wrapper = renderer.create(
+      <ProductCard product={product1}>
+        {() => <h1>Product Card</h1>}
+      </ProductCard>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  test('Debe de incrementar el contador', () => {
+    const wrapper = renderer.create(
+      <ProductCard product={product1}>
+        {({ count, increaseBy }) => (
+          <>
+            <h1>Product Card</h1>
+            <span>{count}</span>
+            <button onClick={() => increaseBy(1)}></button>
+          </>
+        )}
+      </ProductCard>
+    );
+
+    let tree = wrapper.toJSON();
+    expect(tree).toMatchSnapshot();
+
+    act(() => {
+      (tree as any).children[2].props.onClick();
+    });
+
+    tree = wrapper.toJSON();
+
+    expect((tree as any).children[1].children[0]).toBe('1');
+  });
+});

test/components/ProductImage.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductImage, ProductCard } from '../../src/components';
+import { product2 } from '../data/products';
+
+describe('ProductImage', () => {
+  test('Debe de mostrar el componente correctamente con la imagen personalizada', () => {
+    const wrapper = renderer.create(<ProductImage img="https://hola.jpg" />);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  test('Debe de mostrar el componente con la imagen del producto', () => {
+    const wrapper = renderer.create(
+      <ProductCard product={product2}>{() => <ProductImage />}</ProductCard>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

test/components/ProductTitle.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductTitle, ProductCard } from '../../src/components';
+import { product1 } from '../data/products';
+
+describe('ProductTitle', () => {
+  test('Debe de mostrar el componente correctamente con el titulo personalizado', () => {
+    const wrapper = renderer.create(
+      <ProductTitle title="Custom Product" className="custom-class" />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  test('Debe de mostrar el componente con el nombre del producto', () => {
+    const wrapper = renderer.create(
+      <ProductCard product={product1}>{() => <ProductTitle />}</ProductCard>
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

test/components/__snapshots__/ProductCard.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductCard Debe de incrementar el contador 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+  <span>
+    0
+  </span>
+  <button
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`ProductCard Debe de mostrar el componente correctamente 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+</div>
+`;
+
+exports[`ProductCard debe de incrementar el contador 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+  <span>
+    0
+  </span>
+  <button
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`ProductCard debe de mostrar el componente correctamente 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+</div>
+`;

test/components/__snapshots__/ProductImage.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductImage Debe de mostrar el componente con la imagen del producto 1`] = `
+<div
+  className="productCard undefined"
+>
+  <img
+    alt="Product"
+    className="productImg undefined"
+    src="./coffee-mug.png"
+  />
+</div>
+`;
+
+exports[`ProductImage Debe de mostrar el componente correctamente con la imagen personalizada 1`] = `
+<img
+  alt="Product"
+  className="productImg undefined"
+  src="https://hola.jpg"
+/>
+`;
+
+exports[`ProductImage debe de mostrar el componente con la imagen del producto 1`] = `
+<div
+  className="productCard undefined"
+>
+  <img
+    alt="Product"
+    className="productImg undefined"
+    src="./coffee-mug.png"
+  />
+</div>
+`;
+
+exports[`ProductImage debe de mostrar el componente correctamente con la imagen personalizada 1`] = `
+<img
+  alt="Product"
+  className="productImg undefined"
+  src="https://hola.jpg"
+/>
+`;

test/components/__snapshots__/ProductTitle.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductTitle Debe de mostrar el componente con el nombre del producto 1`] = `
+<div
+  className="productCard undefined"
+>
+  <span
+    className="productDescription undefined"
+  >
+    Coffee Mug - Sin Imagen
+  </span>
+</div>
+`;
+
+exports[`ProductTitle Debe de mostrar el componente correctamente con el titulo personalizado 1`] = `
+<span
+  className="productDescription custom-class"
+>
+  Custom Product
+</span>
+`;

test/data/products.ts

@@ -0,0 +1,11 @@
+export const product1 = {
+    id: '1',
+    title: 'Coffee Mug - Sin Imagen',
+    // img: './coffee-mug.png'
+  }
+
+export const product2 = {
+    id: '2',
+    title: 'Coffee Mug - Con Imagen',
+    img: './coffee-mug.png'
+}