search

webdriverio / create-wdio

One-line installer for WebdriverIO
https://webdriver.io
MIT License
21 stars 9 forks source link

Cannot run tests with Lit + Vite #759

Open voxelstack opened 2 weeks ago

voxelstack commented 2 weeks ago

pnpm wdio fails on a Lit + Vite project.

Steps to reproduce

pnpm create vite@latest litvitewdio --template lit-ts
cd litvitewdio
pnpm install
#
pnpm create wdio@latest .
# Project found, correct? (Y)
# Type (Component or unit testing)
# Framework for components (Lit)
# Framework (Mocha)
# Typescript? (Y)
# Autogenerate test files? (Y)
# Location (default)
# Reporter (spec)
# Plugin (wait-for, Testing Library)
# Visual testing? (Y)
# Service (vite)
# run npm install? (N)
pnpm install @wdio/browser-runner@latest @wdio/mocha-framework@latest @wdio/spec-reporter@latest wdio-wait-for @testing-library/webdriverio wdio-vite-service @wdio/visual-service lit --save-dev
npm.cmd pkg set scripts.wdio="wdio run ./wdio.conf.ts"

Expected

Example test runs and passes

Actual

pnpm wdio
node:internal/modules/run_main:129
    triggerUncaughtException(
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'tsx' imported from F:\sandbox\litvitewdio\
Did you mean to import "tsx/dist/loader.mjs"?
    at packageResolve (node:internal/modules/esm/resolve:854:9)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1169:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:540:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:509:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:472:34)
    at asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:118:36)
    at runEntryPointWithESMLoader (node:internal/modules/run_main:147:19)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:166:5) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v20.17.0
pnpm install --save-dev tsx
pnpm wdio
Execution of 1 workers started at 2024-08-27T14:26:08.692Z
...
ERROR @wdio/runner: Failed to run browser tests with cid 0-0: Error: WebDriver Bidi command "browsingContext.navigate" failed with error: invalid argument - Invalid URL: /?cid=0-0&spec=/F:/sandbox/litvitewdio/src/Component.test.ts
[0-0]     at BidiHandler.send (F:\sandbox\litvitewdio\node_modules\.pnpm\webdriver@9.0.7\node_modules\webdriver\build\index.js:141:23)
[0-0]     at BidiHandler.browsingContextNavigate (F:\sandbox\litvitewdio\node_modules\.pnpm\webdriver@9.0.7\node_modules\webdriver\build\index.js:409:31)
[0-0]     at Browser.wrapCommandFn (F:\sandbox\litvitewdio\node_modules\.pnpm\@wdio+utils@9.0.6\node_modules\@wdio\utils\build\index.js:1368:32)
[0-0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[0-0]     at async Browser.url3 (F:\sandbox\litvitewdio\node_modules\.pnpm\webdriverio@9.0.7\node_modules\webdriverio\build\index.js:4298:5)
[0-0]     at async Browser.wrapCommandFn (F:\sandbox\litvitewdio\node_modules\.pnpm\@wdio+utils@9.0.6\node_modules\@wdio\utils\build\index.js:1368:23)
[0-0]     at async #runSpec (file:///F:/sandbox/litvitewdio/node_modules/.pnpm/@wdio+runner@9.0.7/node_modules/@wdio/runner/build/index.js:183:7)
[0-0]     at async #loop (file:///F:/sandbox/litvitewdio/node_modules/.pnpm/@wdio+runner@9.0.7/node_modules/@wdio/runner/build/index.js:171:19)
[0-0]     at async _BrowserFramework.run (file:///F:/sandbox/litvitewdio/node_modules/.pnpm/@wdio+runner@9.0.7/node_modules/@wdio/runner/build/index.js:153:24)
[0-0]     at async Runner.run (file:///F:/sandbox/litvitewdio/node_modules/.pnpm/@wdio+runner@9.0.7/node_modules/@wdio/runner/build/index.js:717:18)

Did I miss any steps?

voxelstack commented 2 weeks ago

Update: My bad on adding the "vite" service, I'm not testing an app.

Removing it the error changes to Cannot find package 'mocha', which I can fix with pnpm install mocha --save-dev.

Still, I get:

Error:  Test failed due to following error(s):
  - expect.js: Uncaught SyntaxError: The requested module '/node_modules/.pnpm/expect@29.7.0/node_modules/expect/build/index.js?v=20f5b1b3' does not provide an export named 'expect'

For these tests I have also changed the test to be as simple as it can:

import { expect } from "@wdio/globals";

describe("Lit component testing", () => {
    it("should increment value on click", async () => {
        expect(true).toBeTrue();
    });
});

From here on out I can install expect manually, but that just leads to another missing package and I can't imagine I'm supposed to manually add every single test dependency as a dev dependency to my project.

christian-bromann commented 2 weeks ago

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'tsx' imported from F:\sandbox\litvitewdio\

This is weird, since tsx is a dependency of @wdio/cli so I assume the package is accessible when running the CLI package.

I was able to verify that running the setup with pnpm causes problems, e.g. for me it seems that it uses NPM for installing dependencies. There is certainly something off here. Any contributions would be appreciated.

voxelstack commented 2 weeks ago

for me it seems that it uses NPM for installing dependencies

Checking now I can confirm that the same happens with Yarn, and it fails even sooner:

yarn create wdio .

Fails with:

⚠️  Ups, something went wrong: Error calling: npm install --save-dev @wdio/cli@latest!
christian-bromann commented 2 weeks ago

Yes, I am getting a bunch of TypeScript related dependencies not being able to get resolved.