fix: ensure proper resolve condition set for vitest env

[DylanPiercey]

Description

Ensure browser export condition is configured when in test mode and targeting a dom environment.

Motivation and Context

Workaround for vitest-dev/vitest#2603 which causes the incorrect Marko runtime to be loaded in the brower env for that test runner.

Checklist:

• I have updated/added documentation affected by my changes.
• I have added tests to cover my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: f195752

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@marko/vite	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (c7f0c6b) 86.60% compared to head (f195752) 86.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #81      +/-   ##
==========================================
- Coverage   86.60%   86.00%   -0.61%     
==========================================
  Files           9        9              
  Lines         545      550       +5     
  Branches      138      141       +3     
==========================================
+ Hits          472      473       +1     
- Misses         64       68       +4     
  Partials        9        9              

Files	Coverage Δ
src/index.ts	87.01% <20.00%> (-0.94%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[vwong]

@DylanPiercey Ok, so how do I use this workaround? I updated to 3.0.1, and the following still gives me TypeError: _marko_registerComponent is not a function:

// @vitest-environment jsdom

import { fireEvent, render } from "@marko/testing-library";
import { describe, expect, it } from "vitest";
import template from "./index.test.marko";

describe("<my-component/>", () => {
  it("does stuff", async () => {
    const { getByLabelText } = await render(template);
    const input = getByLabelText("the-label") as HTMLInputElement;

    await fireEvent.input(input, "form-input");
  });
});

It doesn't matter what is in the template, even a blank file.

[DylanPiercey]

@vwong can you ensure you're on the latest version of everything and that the vitest cache is cleared at ./node_modules/.vitest?

[DylanPiercey]

Ah dang I think I see the issue. It's that you're using comments to define the test environment. My work around only works if the environment is configured in your vite/vitest config.

[vwong]

Ah yes of course, now the change makes more sense. So, to handle a mix of node and jsdom tests, I have to run vitest twice with different config each time, right?

[DylanPiercey]

@vwong you can also use the workspaces feature of vitest (example config):

vitest.workspace.ts

import marko from "@marko/vite";
import { defineWorkspace } from "vitest/config";

export default defineWorkspace([
  {
    test: {
      name: "server",
      environment: "node",
      include: ["src/**/{*.,}test.server.ts"],
    },
    plugins: [marko()],
  },
  {
    test: {
      name: "browser",
      environment: "jsdom",
      include: ["src/**/{*.,}test.browser.ts"],
    },
    plugins: [marko()],
  },
]);

[vwong]

Thanks, works a charm now!