Start component testing

packages/components/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

packages/components/package.json

@@ -43,7 +43,11 @@
     "@types/react": "^18.0.18",
     "@types/styled-components": "^5.1.26",
     "@types/webpack": "^5.28.0",
+    "canvas": "^2.10.1",
     "cross-env": "^7.0.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "jsdom": "^20.0.0",
     "mini-css-extract-plugin": "^2.6.1",
     "postcss-cli": "^10.0.0",
     "postcss-import": "^15.0.0",
@@ -53,6 +57,7 @@
     "react-scripts": "^5.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.1.8",
+    "ts-jest": "^29.0.2",
     "ts-loader": "^9.4.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.8.3",
@@ -75,7 +80,8 @@
     "all": "yarn bundle && yarn build",
     "lint": "prettier --check .",
     "format": "prettier --write .",
-    "prepack": "yarn run build:cjs && yarn run bundle"
+    "prepack": "yarn run build:cjs && yarn run bundle",
+    "test": "jest"
   },
   "eslintConfig": {
     "extends": [

packages/components/src/components/DistributionChart.tsx

@@ -85,7 +85,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
 
     const spec = buildVegaSpec(props);
 
-    let widthProp = width ? width : size.width;
+    let widthProp = width ? width : (isFinite(size.width) ? size.width : 400);
     if (widthProp < 20) {
       console.warn(
         `Width of Distribution is set to ${widthProp}, which is too small`
@@ -96,6 +96,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
       shape.discrete.concat(shape.continuous)
     );
     
+    const vegaData = {data: shapes.value, domain, samples}
+
+    console.log(vegaData)
+
     return (
       <div style={{ width: widthProp }}>
         {logX && shapes.value.some(hasMassBelowZero) ? (
@@ -105,7 +109,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
         ) : (
           <Vega
             spec={spec}
-            data={{ data: shapes.value, domain, samples }}
+            data={vegaData}
             width={widthProp - 10}
             height={height}
             actions={actions}

packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx

@@ -298,7 +298,7 @@ export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
           {() => (
             <div>
               <span>No display for type: </span>{" "}
-              <span className="font-semibold text-slate-600">{value.tag}</span>
+              <span className="font-semibold text-slate-600">{(value as {tag: string}).tag}</span>
             </div>
           )}
         </VariableList>

packages/components/test/basic.test.tsx

@@ -0,0 +1,13 @@
+import {render} from '@testing-library/react'
+import React from 'react'
+import '@testing-library/jest-dom'
+import { SquiggleChart } from '../src/index'
+
+test('Logs no warnings or errors', async () => {
+
+  const { unmount } = render(<SquiggleChart code={"normal(0, 1)"} />)
+  unmount()
+
+  expect(console.warn).not.toBeCalled()
+  expect(console.error).not.toBeCalled()
+})

packages/components/test/setup.js

@@ -0,0 +1,8 @@
+global.console = {
+  ...console,
+  log: jest.fn(console.log),
+  debug: jest.fn(console.debug),
+  info: jest.fn(console.info),
+  warn: jest.fn(console.warn),
+  error: jest.fn(console.error),
+};