NodeJS：无法通过带有 start-server-and-test 的包脚本设置 PERCY_TOKEN

编程问答 2022-05-24

问题描述

我一直在努力根据官方 guideline from percy 在本地测试运行中设置 PERCY_TOKEN 并通过 yarn 触发它。

指南说：

$ PERCY_TOKEN=aaabbbcccdddeeefff PERCY_BRANCH=local npm test

我现在的尝试是这样的：

package.json


...
"scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start","start:silent": "broWSER=none yarn start","start:server": "start-server-and-test start:silent http://localhost:3000","build": "react-scripts build","eject": "react-scripts eject","envGenerateExample": "cat .env | sed 's/=.*/=/g' > .env.example","jest:test": "react-scripts test --env=jest-environment-jsdom-sixteen","cy:run": " 'yarn start:server './node_modules/.bin/cypress run'","cy:open": "yarn start:server './node_modules/.bin/cypress open'","cy:ci": "yarn start:server cy:chrome","cy:chrome": "cypress run --browser chrome --record","percy:exec": "yarn percy exec -- cypress run","cy:percy": "yarn start:server percy:exec","percy:local": "PERCY_TOKEN=$(grep 'PERCY_TOKEN.*' .env | sed 's/.*=//'); PERCY_BRANCH=local;","cy:percy:local": "yarn percy:local && yarn start:server percy:exec"
  },...

$ yarn cy:percy:local

Compiled successfully!

You can Now view playground in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.163:3000

Note that the development build is not optimized.
To create a production build,use yarn build.

...

> [email protected] percy:exec /Users/norfeldt/Repos/playground
> yarn percy exec -- cypress run

warning From Yarn 1.0 onwards,scripts don't require "--" for options to be forwarded. In a future version,any explicit "--" will be forwarded as-is to the scripts.
$ /Users/norfeldt/Repos/playground/node_modules/.bin/percy exec cypress run
 ›   Warning: Skipping visual tests. PERCY_TOKEN was not provided.
...

TL;DR 解决方案

package.json


...
"scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",...
    "percy:local": "PERCY_TOKEN=$(grep 'PERCY_TOKEN.*' .env | sed 's/.*=//') PERCY_BRANCH=local yarn start:server 'percy exec cypress run'"
  },...

解决方法

yarn 在内部使用 sh 来执行脚本中给出的命令（cmd 在 Windows 的情况下） - Source。这与npm does as well非常相似。

此处 && 由 shell 处理，因此您的命令 yarn percy:local && yarn start:server percy:exec 作为 2 个独立的子进程运行。这意味着 yarn percy:local 在进程中运行并在其上下文中根据需要设置环境变量，但运行 yarn start:server percy:exec 的第二个进程不知道进程 1 设置的环境变量。

让我们看看 OS X 如何处理这个：

  1. 用&& 
sh -c 'PERCY_TOKEN=asdfasdf; PERCY_BRANCH=local' &&  sh -c 'echo $PERCY_TOKEN'

这不会打印任何内容

  1. 没有&& 
sh -c 'PERCY_TOKEN=asdfasdf; PERCY_BRANCH=local echo $PERCY_TOKEN'

这会打印 asdfasdf

我认为删除 && 中的 cy:percy:local 应该可以解决您的问题。

编辑：针对您的特定情况的解决方案，如评论中所述

如该答案的第二点所述：stackoverflow.com/a/37141993/8266093 我建议您以 ENV_KEY1=value1 ENV_KEY2=value2 command 格式运行此脚本，在您的情况下该脚本变为 PERCY_TOKEN=$(grep 'PERCY_TOKEN.*' .env | sed 's/.*=//') PERCY_BRANCH=local yarn percy exec cypress run。除此之外，如果单独运行它不适合您，您也可以添加启动服务器 yarn 命令。

cypressjavascriptpercyvisual-testingyarnpkg