search

chromaui / chromatic-e2e

Archive end-to-end tests to be replayed in Storybook and Chromatic
MIT License
21 stars 4 forks source link

Chromatic cypress fail #144

Closed TheGreatLebowski closed 4 months ago

TheGreatLebowski commented 4 months ago

Hello,

I faced troubles using @chromatic-com/cypress with Cypress, here my cypress.config.ts file : (I use cucumber also)

import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor'
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild'
import { installPlugin } from '@chromatic-com/cypress'
// cypress.config.js

export default defineConfig({
  e2e: {
    specPattern: '**/*.feature',
    baseUrl: 'http://localhost:3000',
    retries: 2,
    screenshotOnRunFailure: false,
    async setupNodeEvents(on, config) {
      await addCucumberPreprocessorPlugin(on, config)
      installPlugin(on, config)
      on(
        'file:preprocessor',
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      )
      return config
    },
  },
})

I added import '@chromatic-com/cypress/support' in my e2e.ts file

And here how I use it : ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run then chromatic --cypress -t=$CYPRESS_CHROMATIC_TOKEN

After theses steps I face theses errors : 

Chromatic CLI v11.4.1
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '****************6913'
  ✔ Retrieved git information
    → Commit '6f2157d' on branch 'fix/turbosnap'; found 1 parent build
  ✔ Collected Storybook metadata
    → ; using the unknown builder (0); supported addons found: Unknown
  ✔ Initialized build
    → Build 64 initialized
  ✖ Building your Storybook
    → Command failed: node /Users/alex/Prog/front/node_modules/.pnpm/@chromatic-com+cypress@0.6.8_@babel+preset-env@7.24.6_@babel+core@7.24.6__@types+react-dom@18_gtlluo57t2qpsmw5cs4tflhmye/node_modules/

Publish your built Storybook
    Verify your Storybook
    Test your stories

    ✖ Failed to run chromatic --cypress:

    Command failed with exit code 1: node /Users/alex/Prog/front/node_modules/.pnpm/@chromatic-com+cypress@0.6.8_@babel+preset-env@7.24.6_@babel+core@7.24.6__@types+react-dom@18_gtlluo57t2qpsmw5cs4tflhmye/node_modules/@chromatic-com/cypress/dist/bin/build-archive-storybook.js --output-dir /var/folders/5m/hf_f3jw9637cbp6y12q_w67r0000gp/T/chromatic--93695-2JR9V7KaYxAj

<s> [webpack.Progress] 0% 

<s> [webpack.Progress] 1% setup before run
<s> [webpack.Progress] 1% setup before run NodeEnvironmentPlugin
<s> [webpack.Progress] 1% setup before run
<s> [webpack.Progress] 2% setup run
<s> [webpack.Progress] 2% setup run
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 4% setup normal module factory CaseSensitivePathsPlugin
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 6% setup before compile ProgressPlugin
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 7% setup compile ExternalsPlugin
<s> [webpack.Progress] 7% setup compile ExternalsPlugin
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 8% setup compilation unplugin-csf
<s> [webpack.Progress] 8% setup compilation ArrayPushCallbackChunkFormatPlugin
<s> [webpack.Progress] 8% setup compilation JsonpChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation StartupChunkDependenciesPlugin
<s> [webpack.Progress] 8% setup compilation ImportScriptsChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileWasmPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileAsyncWasmPlugin
<s> [webpack.Progress] 8% setup compilation WorkerPlugin
<s> [webpack.Progress] 8% setup compilation SplitChunksPlugin
<s> [webpack.Progress] 8% setup compilation RuntimeChunkPlugin
<s> [webpack.Progress] 8% setup compilation ResolverCachePlugin
<s> [webpack.Progress] 8% setup compilation HtmlWebpackPlugin
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 9% setup compilation
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation ProvidePlugin
<s> [webpack.Progress] 9% setup compilation ProgressPlugin
<s> [webpack.Progress] 9% setup compilation ChunkPrefetchPreloadPlugin
<s> [webpack.Progress] 9% setup compilation SourceMapDevToolPlugin
<s> [webpack.Progress] 9% setup compilation JavascriptModulesPlugin
<s> [webpack.Progress] 9% setup compilation JsonModulesPlugin
<s> [webpack.Progress] 9% setup compilation AssetModulesPlugin
<s> [webpack.Progress] 9% setup compilation EntryPlugin
<s> [webpack.Progress] 9% setup compilation RuntimePlugin
<s> [webpack.Progress] 9% setup compilation InferAsyncModulesPlugin
<s> [webpack.Progress] 9% setup compilation DataUriPlugin
<s> [webpack.Progress] 9% setup compilation FileUriPlugin
<s> [webpack.Progress] 9% setup compilation CompatibilityPlugin
<s> [webpack.Progress] 9% setup compilation HarmonyModulesPlugin
<s> [webpack.Progress] 9% setup compilation AMDPlugin
<s> [webpack.Progress] 9% setup compilation RequireJsStuffPlugin
<s> [webpack.Progress] 9% setup compilation CommonJsPlugin
<s> [webpack.Progress] 9% setup compilation LoaderPlugin
<s> [webpack.Progress] 9% setup compilation LoaderPlugin
<s> [webpack.Progress] 9% setup compilation NodeStuffPlugin
<s> [webpack.Progress] 9% setup compilation APIPlugin
<s> [webpack.Progress] 9% setup compilation ExportsInfoApiPlugin
<s> [webpack.Progress] 9% setup compilation WebpackIsIncludedPlugin
<s> [webpack.Progress] 9% setup compilation ConstPlugin
<s> [webpack.Progress] 9% setup compilation UseStrictPlugin
<s> [webpack.Progress] 9% setup compilation RequireIncludePlugin
<s> [webpack.Progress] 9% setup compilation RequireEnsurePlugin
<s> [webpack.Progress] 9% setup compilation RequireContextPlugin
<s> [webpack.Progress] 9% setup compilation ImportPlugin
<s> [webpack.Progress] 9% setup compilation ImportMetaContextPlugin
<s> [webpack.Progress] 9% setup compilation SystemPlugin
<s> [webpack.Progress] 9% setup compilation ImportMetaPlugin
<s> [webpack.Progress] 9% setup compilation URLPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsFactoryPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsPresetPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsPrinterPlugin
<s> [webpack.Progress] 9% setup compilation JavascriptMetaInfoPlugin
<s> [webpack.Progress] 9% setup compilation EnsureChunkConditionsPlugin
<s> [webpack.Progress] 9% setup compilation RemoveEmptyChunksPlugin
<s> [webpack.Progress] 9% setup compilation MergeDuplicateChunksPlugin
<s> [webpack.Progress] 9% setup compilation FlagIncludedChunksPlugin
<s> [webpack.Progress] 9% setup compilation SideEffectsFlagPlugin
<s> [webpack.Progress] 9% setup compilation FlagDependencyExportsPlugin
<s> [webpack.Progress] 9% setup compilation FlagDependencyUsagePlugin
<s> [webpack.Progress] 9% setup compilation InnerGraphPlugin
<s> [webpack.Progress] 9% setup compilation MangleExportsPlugin
<s> [webpack.Progress] 9% setup compilation ModuleConcatenationPlugin
<s> [webpack.Progress] 9% setup compilation NoEmitOnErrorsPlugin
<s> [webpack.Progress] 9% setup compilation RealContentHashPlugin
<s> [webpack.Progress] 9% setup compilation WasmFinalizeExportsPlugin
<s> [webpack.Progress] 9% setup compilation NamedModuleIdsPlugin
<s> [webpack.Progress] 9% setup compilation DeterministicChunkIdsPlugin
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation TerserPlugin
<s> [webpack.Progress] 9% setup compilation TemplatedPathPlugin
<s> [webpack.Progress] 9% setup compilation RecordIdsPlugin
<s> [webpack.Progress] 9% setup compilation WarnCaseSensitiveModulesPlugin
<s> [webpack.Progress] 9% setup compilation IgnoreWarningsPlugin
<s> [webpack.Progress] 9% setup compilation
<s> [webpack.Progress] 10% building
<s> [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
node:internal/errors:984
const err = new Error(message);
            ^

Error: Command failed: node /Users/alex/Prog/front/node_modules/.pnpm/storybook@8.1.4_@babel+preset-env@7.24.6_@babel+core@7.24.6__react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/storybook/index.js build --output-dir /var/folders/5m/hf_f3jw9637cbp6y12q_w67r0000gp/T/chromatic--93695-2JR9V7KaYxAj -c /Users/alex/Prog/front/node_modules/.pnpm/@chromatic-com+cypress@0.6.8_@babel+preset-env@7.24.6_@babel+core@7.24.6__@types+react-dom@18_gtlluo57t2qpsmw5cs4tflhmye/node_modules/@chromatic-com/cypress/dist/storybook-config
  at genericNodeError (node:internal/errors:984:15)
  at wrappedFn (node:internal/errors:538:14)
  at checkExecSyncError (node:child_process:890:11)
  at Object.execFileSync (node:child_process:926:15)
  at /Users/alex/Prog/front/node_modules/.pnpm/@chromatic-com+cypress@0.6.8_@babel+preset-env@7.24.6_@babel+core@7.24.6__@types+react-dom@18_gtlluo57t2qpsmw5cs4tflhmye/node_modules/@chromatic-com/cypress/dist/bin/build-archive-storybook.js:15:2761 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 93809,
stdout: null,
stderr: null
}

Node.js v20.13.1`

And in the build-storybook.log : 
`@storybook/cli v8.1.4

info => Cleaning outputDir: ../../../../../../var/folders/5m/hf_f3jw9637cbp6y12q_w67r0000gp/T/chromatic--93695-2JR9V7KaYxAj
info => Loading presets
info => Building manager..
WARN unable to find package.json for @chromatic-com/shared-e2e
info => Manager built (70 ms)
info => Building preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Copying static files: cypress/downloads/chromatic-archives/archive at ../../../../../../var/folders/5m/hf_f3jw9637cbp6y12q_w67r0000gp/T/chromatic--93695-2JR9V7KaYxAj
TypeError: Cannot read properties of null (reading 'init')
    at /Users/alex/Prog/front/node_modules/.pnpm/@storybook+csf-tools@8.1.4/node_modules/@storybook/csf-tools/dist/index.js:17:3363
    at Array.forEach (<anonymous>)
    at enter (/Users/alex/Prog/front/node_modules/.pnpm/@storybook+csf-tools@8.1.4/node_modules/@storybook/csf-tools/dist/index.js:17:3176)
    at NodePath._call (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/context.js:89:16)
    at TraversalContext.visitMultiple (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/context.js:110:19)
    at traverseNode (/Users/alex/Prog/front/node_modules/.pnpm/@babel+traverse@7.24.6/node_modules/@babel/traverse/lib/traverse-node.js:22:17)

And for the versions : 

"cypress": "^13.10.0",
"@chromatic-com/cypress": "^0.6.8",
"@types/node": "^20.12.12",
"chromatic": "11.4.1",

Thank you for your help

skitterm commented 4 months ago

HI @TheGreatLebowski, thanks for the details. I'm experiencing this locally as well and am looking into this.

skitterm commented 4 months ago

@TheGreatLebowski we've found the root problem and have a fix. I'll let you know when it's released!

thafryer commented 4 months ago

Hi @TheGreatLebowski ! One of the downstream dependencies for our process of generating the archives had a bug that has since been resolved. We've released some changes that should resolve this issue for you all! Please update to @chromatic-com/cypress@0.6.12 and chromatic@11.4.1!

Let me know if you are still running into issues!