`@percy-io/in-percy` detection not working with `percy/storybook@4.x`

The problem

We’ve got an app which uses Nextjs, Storybook and the percy-storybook SDK to take snapshots in Percy. In some of our stories we use the @percy-io/in-percy library to substitute args to stories depending on whether we are rendering in Percy or not. For example, we will render regular videos in our local and preview environments, but if we render within Percy we replace the video with single frame videos to reduce snapshot flakiness.

The detection code looks something like the following:

import inPercy from '@percy-io/in-percy
// .. snip ..
const props = {
  video: inPercy() ? './videos/static.mp4' : './videos/original-video.mp4'
}
// .. snip ..

This worked fine in @percy/storybook 3.3.1 but migrating to 4.x inPercy() has stopped working for us. The original video always shows, never the static video because the inPercy() check always returns false.

Reproduction repos

To try and illustrate the point I’ve created the following repo both with v3 and v4 versions of percy-storybook. I’ve created the Default Button story which simply shows a blue button, but when we render in Percy we change the background of the button to purple. We make this change by adding a specific class when rendering within Percy

DefaultButton.args = {
  size: "small",
  label: "My Button",
  classNames: inPercy() ? "storybook-button--percy" : "",
  type: "primary",
};

This works fine in v3 but not in v4. You should be able to take both of these branches and try them out yourself by simply running yarn snapshot.

Repos

• Snapshotting using @percy/storybook v3.3.1: reproduction branch name patoc/percy-storybook-3
• Snapshotting using @percy/storybook v4: reproduction branch name master

Environment

• Node version: 14.15.0
• @percy/cli version: @percy/cli@1.0.0-beta.60
• Version of Percy SDK you’re using: @percy/storybook@4.0.0-beta.2

I understand that @percy/storybook v4 uses @percy/cli under the hood so that’s why things are no longer working but curious if you have any suggestion on how to make inPercy() work? If not, are there any alternative approaches we can use to swap content out depending on whether we are rendering in Percy or not?

[patocallaghan]

Thanks @Robdel12 🤦‍♂️ Can’t believe I missed that. I retried by adding that config and it worked 🙇‍♂️

[sean-adams]

Hey @Robdel12 thanks for the response!

We do have JS enabled for all stories as we found we needed it for date mocking so that our relatively dated components didn’t cause a diff on every Percy run.

I might not have been clear on the window.location piece - that was reporting localhost in the Percy run, in addition to in the local Storybook environment.

Here’s the sample story I used:

export const InPercyHostname: FC = () => (
  <div>
    {window.location?.hostname}
  </div>
);

Happy to share whatever I can to help, just let me know the best channel that avoids exposing anything sensitive in public 😃