linear[bot]
commented
11 months ago AP-3618 Git is required for visual test addon via chromatic CLI
**Action Item**: handle git errors from the CLI and display this design in the addon: [Panel - Visual testing in Storybook (Figma)](https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=1898-563208&mode=design&t=M8C1zgw19KVEajF9-0) **Feedback:** The addon uses Chromatic under the hood which requires a Git remote with at least one commit to work. The main issue with this is that the error isn't handled with proper help and since I don't necessarily know the Chromatic CLI is being used under the hood, I wouldn't know where to go for help. At the least, the error should be handled with instructions but ideally a Git commit isn't required for the visual test addon to work (not sure whether this is feasible). ## Reproduction 1. Init SB with Vite + React TS in an empty dir 2. Add the visual test addon 3. Start Storybook ← This errors with: ``` info => Starting manager.. Unhandled promise rejection: Error: Command failed with exit code 1: git config --get remote.origin.url at Eir (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:197:57) at /Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:197:8411 at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Ki (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:287:45) at async NM (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:287:530) at async Object.N3i (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:1298:1359) at async c (/Users/zol/Git/test-visual-testing-addon/node_modules/chromaui/addon-visual-tests/dist/index.js:12:1250) { shortMessage: 'Command failed with exit code 1: git config --get remote.origin.url', command: 'git config --get remote.origin.url', escapedCommand: 'git config --get remote.origin.url', exitCode: 1, signal: undefined, signalDescription: undefined, stdout: '', stderr: '', all: '', failed: true, timedOut: false, isCanceled: false, killed: false } Error: Command failed with exit code 1: git config --get remote.origin.url at Eir (./node_modules/chromatic/dist/chunk-J3MH667B.js:197:57) at ./node_modules/chromatic/dist/chunk-J3MH667B.js:197:8411 at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Ki (./node_modules/chromatic/dist/chunk-J3MH667B.js:287:45) at async NM (./node_modules/chromatic/dist/chunk-J3MH667B.js:287:530) at async Object.N3i (./node_modules/chromatic/dist/chunk-J3MH667B.js:1298:1359) at async Object.env (./node_modules/chromaui/addon-visual-tests/dist/index.js:14:290) at async Promise.all (index 3) at async getConfig (./node_modules/storybook/builder-manager/dist/index.js:1:5670) at async Promise.all (index 1) ``` 4. Creating a repo on Github and running `git remote add origin `[`gitgithub.com`](mailto:gitgithub.com)`:zol/test-visual-testing-addon.git` Gets me past the above but now I hit: ``` info => Starting manager.. Unhandled promise rejection: Error: ✖ Unable to execute command: git --no-pager log -n 1 --format="%H ## %ct ## %ae ## %an" Chromatic requires your Git repository to have at least one commit. at Ki (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:287:334) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async cm (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:287:677) at async Object.N3i (/Users/zol/Git/test-visual-testing-addon/node_modules/chromatic/dist/chunk-J3MH667B.js:1298:1385) at async c (/Users/zol/Git/test-visual-testing-addon/node_modules/chromaui/addon-visual-tests/dist/index.js:12:1250) Error: ✖ Unable to execute command: git --no-pager log -n 1 --format="%H ## %ct ## %ae ## %an" Chromatic requires your Git repository to have at least one commit. at Ki (./node_modules/chromatic/dist/chunk-J3MH667B.js:287:334) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async cm (./node_modules/chromatic/dist/chunk-J3MH667B.js:287:677) at async Object.N3i (./node_modules/chromatic/dist/chunk-J3MH667B.js:1298:1385) at async Object.env (./node_modules/chromaui/addon-visual-tests/dist/index.js:14:290) at async Promise.all (index 3) at async getConfig (./node_modules/storybook/builder-manager/dist/index.js:1:5670) at async Promise.all (index 1) at async getData (./node_modules/storybook/builder-manager/dist/index.js:1:4512) at async starter (./node_modules/storybook/builder-manager/dist/index.js:1:7579) WARN Broken build, fix the error above. WARN You may need to refresh the browser. ``` 5. I followed the FAQ item in Chromatic's docs and by taking it's debugging steps I learnt that I needed at least one commit for Chromatic to work.
Just correcting the link to point at the visual tests addon instead of the chromatic cli.