Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Getting websocket error with @web/test-runner-visual-regression #2663

Open
slalomzacharyd opened this issue Mar 8, 2024 · 3 comments
Open

Getting websocket error with @web/test-runner-visual-regression #2663

slalomzacharyd opened this issue Mar 8, 2024 · 3 comments

Comments

@slalomzacharyd
Copy link

I'm trying to sue the visual regression plugin, but when I add it to my code I get websocket errors in my tests. Thank you.

Console output

~/Development/project% ./node_modules/.bin/web-test-runner test/components/test.js

test/components/test.js:

 test [Chrome]
   𐄂 works

 ❌ test > works
      Error: Could not setup web socket connection. Are you executing this test through Web Test Runner?
        at executeServerCommand (node_modules/@web/test-runner-commands/browser/commands.mjs:23:10)
        at async visualDiff (node_modules/@web/test-runner-visual-regression/browser/commands.mjs:28:19)
        at async n.<anonymous> (src/components/test.tsx:9:8)

Test

import Component from '.';
import { visualDiff } from '@web/test-runner-visual-regression';
import { render } from 'testUtils';

describe('Component', () => {
    it('works', async () => {
        const element = await render(<Component />);

        await visualDiff(element.container, 'div');
    });
});

command

./node_modules/.bin/web-test-runner

Packages

    "@web/dev-server-esbuild": "1.0.2",
    "@web/dev-server-import-maps": "0.2.0",
    "@web/dev-server-rollup": "0.6.1",
    "@web/test-runner": "0.18.0",
    "@web/test-runner-commands": "0.9.0",
    "@web/test-runner-junit-reporter": "0.7.0",
    "@web/test-runner-puppeteer": "0.16.0",
    "@web/test-runner-visual-regression": "0.9.0",

configuration

import { defaultReporter, summaryReporter } from '@web/test-runner';
import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin';
import { config } from 'dotenv';
import { globSync } from 'glob';

// const commonjs = fromRollup(rollupCommonjs);

config();

const files = globSync('test/**/*.test.js');

export default {
  coverageConfig: {
    reporters: ['cobertura', 'lcov'],
    threshold: {
      branches: 70,
      functions: 70,
      lines: 70,
      statements: 70,
    },
  },
  files,
  plugins: [
    visualRegressionPlugin({
      // update: process.argv.includes('--update-visual-baseline'),
      update: true,
    }),
  ],
  reporters: [summaryReporter(), defaultReporter()],
  testRunnerHtml: testFramework =>
    `<html>
    <head>
    <style>
    .mapboxgl-canary {
      background-color: salmon;
    }
    </style>
    </head>
      <body>
        <script>window.process = { env: { NODE_ENV: "development" } }</script>
        <script type="module" src="${testFramework}"></script>
      </body>
    </html>`,
};
@slalomzacharyd
Copy link
Author

I've investigated the defaults a bit and it looks like the default html loads a websocket module which isn't documented. I'm going to try injecting it to see if it fixes the problem. (Though there seems to be some other custom scripting as well.)

Uploading Screenshot 2024-03-08 at 17.58.00.png…

@slalomzacharyd
Copy link
Author

Hrm... seems like it is being injected with the custom testFramework. No idea why websockets woudn't work yet.

@slalomzacharyd
Copy link
Author

I finally figured out the reason it was failing was because I was bundling it using esbuild (external to web test runner.) My guess is that this library might be relying on globals. Is bundling worth supporting with this plugin?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@slalomzacharyd