feat: vitest support

[nmoon1]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Describe the Feature Request

Add support for vitest testing framework.

Describe the Use Case

Vitest resolves dependency exports using the Node.js resolution with no way to override this behavior (vitest-dev/vitest#4233). This results in the following error when running vitest for tests that use React wrappers of Stencil web-components:

Error: require() of ES Module C:\vite-test-app\node_modules\@lit\react\node\development\index.js from C:\vite-test-app\node_modules\@stencil\react-output-target\dist\react.cjs not supported.
Instead change the require of index.js in C:\vite-test-app\node_modules\@stencil\react-output-target\dist\react.cjs to a dynamic import() which is available in all CommonJS modules.

The import of @stencil/react-output-target/runtime is resolved via the node condition to the cjs bundle when we actually want the ESM version.

Describe Preferred Solution

The Node.js resolution algorithm will respect import conditions. Adding this condition to the exports field of the package.json and pointing it to the ESM bundle results in the correct import when running vitest. Example:

// @stencil/react-output-target/package.json
...
"exports": {
    ".": {
      "types": "./dist/react-output-target/index.d.ts",
      "node": {
        "default": "./dist/react-output-target.cjs"
      },
      "default": "./dist/react-output-target.js"
    },
    "./runtime": {
      "types": "./dist/react/index.d.ts",
      "browser": {
        "default": "./dist/react.js"
      },
      "import": {
        "default": "./dist/react.js" // adding this condition
      }
      "node": {
        "default": "./dist/react.cjs"
      },
      "default": "./dist/react.js"
    },
    "./ssr": {
      "types": "./dist/react/ssr.d.ts",
      "browser": {
        "default": "./dist/ssr.js"
      },
      "default": "./dist/ssr.js"
    }
  } 

Describe Alternatives

Vitest does not allow you specify mainFields or conditions priority like Vite does. However, it does let you alias imports to specific files. Adding the following to my vite.config.js does work around the issue.

import { resolve } from "node:path";
export default defineConfig({   
    ...
    test: {
        alias: {
            "@stencil/react-output-target/runtime": resolve(__dirname, "node_modules/@stencil/react-output-target/dist/react.js"),
        }
    }
)} 

Related Code

No response

Additional Information

No response

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!

[rschaufler]

@nmoon1 thank you for pointing this out. I am using vitest and my tests broke with @stencil/react-output-target 0.8.2. Prior to that, using version 0.8.1, my tests worked with vitest. I suggest that there might have been a change between this two versions that broke this functionality. Although, i am not sure if my issue is directly related to the issue you have.