Can't use production component and development component at the same time
jirei.posted in #help-playwright
Open in Discord
When I use one at a time and delete the cache it works. I can't also assign a component to another variable, that's why I use an if/else to return 2 components instead of assigning one of the two to a variable before passing props. The error I get:
[vite:build-import-analysis] Parse error @:72:21
file: /home/jirei/MyProgramming/cube-react-component/src/components/cube/cube.tsx:72:20
70: >
71: {cubeFaces[faceName]}
72: </div>
^
73: );
Error: Parse error @:72:21This thread is trying to answer question "How can I conditionally render a production component and a development component without encountering a parse error during the build process?"
1 reply
The code:
test.describe("Perspective", () => {
test("should have perspective none when no perspective is provided", async ({
mount,
page,
testProductionCube,
}) => {
await mount(
getCubeTestSubjectForPerspective({
perspective: undefined,
testProductionCube,
}),
);
const scene = page.getByTestId("scene");
const perspective = await getPerspectiveFromLocator(scene);
expect(perspective).toBe("none");
});
test("should have the given perspective when a perspective is provided", async ({
mount,
page,
testProductionCube,
}) => {
const providedPerspective = "200px";
await mount(
getCubeTestSubjectForPerspective({
perspective: providedPerspective,
testProductionCube,
}),
);
const scene = page.getByTestId("scene");
const perspective = await getPerspectiveFromLocator(scene);
expect(perspective).toBe(providedPerspective);
});
});
function getPerspectiveFromLocator(locator: Locator) {
return locator.evaluate((element) =>
window.getComputedStyle(element).getPropertyValue("perspective"),
);
}
function getCubeTestSubjectForPerspective({
perspective,
testProductionCube,
}: {
perspective: string | undefined;
testProductionCube: boolean;
}) {
if (testProductionCube) {
<ProdCube
sizes={{
base: "50vw",
sm: "40vw",
md: "35vw",
lg: "30vw",
xl: "25vw",
"2xl": "20vw",
}}
perspective={perspective}
transitionDuration="1s"
transitionTimingFunction="linear"
currentFace="front"
cubeFaces={cubeFaces}
/>;
}
return (
<DevCube
....props (message too long so I removed the props, same as above)
/>
);
}
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].