[BUG] Objects passed in as props lose their functions. #22194
Description
System info
- Playwright Version: [v1.31.1]
- Operating System: [Windows 11]
- Browser: [All, Chromium, Firefox, WebKit]
- Other info:
Source code
- I provided exact source code that allows reproducing the issue locally.
Link to the GitHub repository with the repro
[https://github.com/your_profile/playwright_issue_title]
or
Config file
import { defineConfig, devices } from '@playwright/experimental-ct-react';
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
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'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});Test file (self-contained)
test('Authoring: Context View should Load.', async ({ mount }) => {
// Arrange
let insight = new UnifyInsight();
let skillList: IComboBoxOption[] = [{key: "key", text: "text" }];
// Act
const component = await mount(<ContextView skills={skillList} insight={insight} viewMode="View" updateInsight={() => { } } />, {});
// Assert
await expect(component).toContainText('Support Area Path (Id):');
await expect(component.getByLabel("Select Insight Skills")).toBeDisabled();
});Steps
-
[Run the test]
-
[ 1) [webkit] › authoring-app.spec.tsx:9:5 › Authoring: Context View should Load. ──────────────────
TypeError: props.insight.SAP.ErrorMessage is not a function. (In 'props.insight.SAP.ErrorMessage(value)', 'props.insight.SAP.ErrorMessage' is undefined)]
Expected
The component should be able to access the method on the object passed in as a prop.
Actual
The method is not defined.
This is made even more confusing by the fact that I can execute the following test without issue:
test('Insight: Object Creation', () => {
// Arrange
let newGuid = "2fa26521-390d-405e-8355-552287e88c33";
const insight = new UnifyInsight();
// Act
insight.SAP.Value = newGuid;
insight.SAP.Validate();
// Assert
expect(insight.SAP.IsValid).toBeTruthy();
expect(insight.SAP.ErrorMessage(newGuid)).toBe('');
});
So it appears that the issue is solely due to the object being passed in as a prop.