Issue integrating with testing-library

[keviddles]

Hello,

I think I'm running into a similar issue as #1876 (which is also me, but different account / repos).

I'm trying to integrate @web/test-runner with @testing-library/dom. Here's a test:

import { expect } from '@esm-bundle/chai';
import { Input } from './input';
import { fixture } from '@open-wc/testing';
import { html } from 'lit/static-html.js';

import { getByText } from '@testing-library/dom';

describe('foo-input', () => {
  it('renders content', async () => {
    const content = 'foo';
    const container = await fixture<Input>(html`<foo-input>${content}</foo-input>`);
    const el = await getByText(container, content);
    expect(el instanceof Input).eql(true);
  });
});

This fails with:

 🚧 Browser logs:
      SyntaxError: The requested module './../../../../@babel/runtime/regenerator/index.js' does not provide an export named 'default'

 ❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.

testing-library exports a variety of builds. All three exhibit the problem. By default the ESM build is loaded.

Per the advice on #1876, I tried to integrate the rollup commonjs plugin. Here's what my config looks like:

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { default as rollupCommonjs } from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';
const commonjs = fromRollup(rollupCommonjs);
export default {
  files: ['src/**/*.test.ts'],
  plugins: [
    commonjs({
      include: [
        '../../**/node_modules/**/*',
      ],
    }),
    esbuildPlugin({ ts: true }),
  ],
  nodeResolve: true,
};

That produces:

 🚧 Browser logs:
      SyntaxError: The requested module './../../../../lz-string/libs/lz-string.js' does not provide an export named 'compressToEncodedURIComponent'

 ❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.

Per the advice in the docs, I've also tried to list out the specific node modules which exhibit console errors:

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { default as rollupCommonjs } from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';
const commonjs = fromRollup(rollupCommonjs);
export default {
  files: ['src/**/*.test.ts'],
  plugins: [
    commonjs({
      include: [
        '../../**/node_modules/@testing-library/**/*',
        '../../**/node_modules/lz-string/**/*',
        '../../**/node_modules/aria-query/**/*',
      ],
    }),
    esbuildPlugin({ ts: true }),
  ],
  nodeResolve: true,
};

Which produces:

 🚧 Browser logs:
      SyntaxError: The requested module './../../../../@babel/runtime/regenerator/index.js' does not provide an export named 'default'

 ❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.

Any recommendations on next steps?

[emensch]

Hey @keviddles - I've been struggling with similar. I believe #1700 is related. My project uses @testing-library/react-hooks. I have @rollup/plugin-commonjs pinned to "^18.0.0" and the following config, which works for me:

    commonjsPlugin({
      include: [
        // Allows @testing-library/react-hooks to be consumed as an ES module
        'node_modules/@testing-library/**/*',
        'node_modules/react-dom/**/*',
        'node_modules/object-assign/**/*',
        'node_modules/scheduler/**/*',
        'node_modules/prop-types/**/*'
      ],
    }),