[microsoft/playwright][BUG] ReferenceError：未定义要求

链接到带有重现的 GitHub 存储库

[ https://github.com/your_profile/playwright_issue_title ]

或者

配置文件

// playwright-ct.config.ts
import { defineConfig, devices } from '@playwright/experimental-ct-react17';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './src/pages/ExperimentEditPage/Sections/About/',
  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
  // grep: /spec/,
  snapshotDir: './__snapshots__',
  /* Maximum time one test can run for. */
  timeout: 10 * 1000,
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* Port to use for Playwright component endpoint. */
    ctPort: 3100,
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

测试文件（独立）

// About.spec.tsx
import React from 'react';

import { test } from '@playwright/experimental-ct-react17';

import About from './About';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount, page }) => {
  await page.route('**/request/*', async route => {
    const json = { tags: { category: 'GENERAL', name: '' } };
    await route.fulfill({ json });
  });

  const component = await mount(<About />);
});

组件文件

// About.tsx
import React from 'react';

import { useQuery } from 'react-query';

import { TagCategories } from '../../../../modules/tag/domain/tag.utils';
import tagQueryClient from '../../../../modules/tag/tag.queryClient';

export default function About() {
  useQuery(tagQueryClient.listCategoryTags(TagCategories.GENERAL));
  return <></>;
}

// playwright/index.tsx
import { beforeMount } from '@playwright/experimental-ct-react17/hooks';
import { QueryClientProvider, QueryClient } from 'react-query';
import React from 'react';

const AppContext = React.createContext(null);

beforeMount(async ({ App, hooksConfig }) => {
  return (
    <QueryClientProvider client={new QueryClient()}>
      <AppContext.Provider value={null}>
        <App />
      </AppContext.Provider>
    </QueryClientProvider>
  );
});

脚步

• 运行测试

预期的

在我运行测试的控制台中看到“1 pass”绿色文本

实际的

在我运行测试的控制台中我看到

Error: ReferenceError: require is not defined

    at http://localhost:3100/assets/http-8b81c8aa.js:129045:19
    at /Users/elizavetas/Documents/backstage-frontend/plugins/experiment-planner/http:/localhost:3100/assets/http-8b81c8aa.js:129045:19
    at mount (/Users/elizavetas/Documents/backstage-frontend/node_modules/@playwright/experimental-ct-core/lib/mount.js:50:35)
    at /Users/elizavetas/Documents/backstage-frontend/plugins/experiment-planner/src/pages/ExperimentEditPage/Sections/About/About.spec.tsx:106:27

useQuery评论：如果我在钩子内模拟一个示例 Promise，而不是正常请求，它就可以工作