Rayrun
← Back to Discord Forum

Can't use production component and development component at the same time

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:21

This 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)
    />
  );
}

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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 luc@ray.run.