Cannot test with tsx syntax

[zhaoyao91]

I am trying to use solid-testing-library + ts-jest

The config and test are simple:

// jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
};

// button.test.tsx

import { cleanup, render } from "solid-testing-library";

test("1 + 1 = 2", () => {
  expect(1 + 1).toBe(2);
});

it("should render a button", () => {
  const result = render(() => <button>Test Button</button>);
  console.log(result);
  cleanup();
});

// babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "defaults",
        "modules": false
      }
    ],
    "@babel/preset-typescript",
    [
      "babel-preset-solid",
      {
        "delegateEvents": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}

// ts.config.json

{
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "Node",
    "strict": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

but it always complains

Not sure what is going wrong. Could you please share how you test your solid libs?

[zhaoyao91]

I've made some changes so the tests run:

// jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "\\.[jt]sx?$": "babel-jest",
  },
};

// babel.config.js

const isTest = process.env.NODE_ENV === "test";

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: "defaults",
        modules: isTest ? "auto" : false,
      },
    ],
    "@babel/preset-typescript",
    [
      "babel-preset-solid",
      {
        delegateEvents: false,
      },
    ],
  ],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
  ],
};

but it complains that render is not a function ...

I am trying to solve ...

[zhaoyao91]

well, all done.

first, install solid-jest: https://github.com/ryansolid/solid-jest

then, update jest.config.js

module.exports = {
  preset: "solid-jest/preset/browser",
};

then, update babel config

module.exports = {
  env: {
    test: {
      presets: [["@babel/preset-env"]],
    },
  },

  presets: [
    ["@babel/preset-env", { targets: "defaults", modules: false }],
    "@babel/preset-typescript",
    ["babel-preset-solid", { delegateEvents: false }],
  ],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
  ],
};