solid-jest icon indicating copy to clipboard operation
solid-jest copied to clipboard

Doesn't work with TypeScript

Open aminya opened this issue 4 years ago • 5 comments

Unless I add @babel/preset-typescript myself, it doesn't work.

I am simplifying my babel.config.json because Parcel has switched to SWC, which handles everything in the build process. But that doesn't work for the jest tests.

aminya avatar May 13 '21 07:05 aminya

I fixed the issue by using a custom babel.config.js:

// base config used in all situations
const config = {
  presets: ["babel-preset-solid"],
  plugins: []
}

module.exports = (api) => {
  if (api.env("test")) {
    // modify the config for Jest
    config.presets.push("@babel/preset-typescript")
    config.plugins.push("@babel/plugin-transform-modules-commonjs")
  }
  return config
}

aminya avatar May 13 '21 08:05 aminya

Hmm.. I wonder if it is as easy as adding it here: https://github.com/solidui/solid-jest/blob/main/preset/browser/transform.js#L4 and the equivalent on the server. I'm just thinking that the config only is setup to transform JSX files and whether adding that is sufficient. So far I have been just adding it for TypeScript projects as needed. Things like create-solid already are setup this way.

I can get around to testing this, but if you have a project handy and can confirm that is sufficient I can go and add that easily.

ryansolid avatar May 13 '21 09:05 ryansolid

I made it working with babel. https://github.com/aminya/solid-simple-table/actions/runs/838498775

Here is my config:

// base config used in all situations
const config = {
  presets: ["babel-preset-solid"],
  plugins: [],
}

module.exports = (api) => {
  if (api.env("test")) {
    // modify the config for Jest
    config.presets.push("@babel/preset-typescript", [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
          esmodules: false,
        },
      },
    ])
  }
  return config
}

aminya avatar May 13 '21 09:05 aminya

There is also an esbuild-jest package. If we can use that instead, that would be much faster! I couldn't configure esbuild-jest, but you may be able to do this with the help of esbuild-plugin-solid https://www.npmjs.com/package/esbuild-jest

aminya avatar May 13 '21 09:05 aminya

https://jestjs.io/docs/getting-started#using-typescript

The jest docs are already quite clear about how to add TypeScript support, shouldn't that be enough? Seems like a separate concern from transforming solid components.

Also, looks like esbuild-jest doesn't support the jsx=preserve option added in esbuild v0.12.1 which would be required to use it in a solid project.

maxmilton avatar May 31 '21 06:05 maxmilton