Testing the integrity of React components by publishing in a private registry
The final stage of a react component is when it is being published and distributed. How can I ensure my packages won’t crash in production? This talk will help you to test your React components by publishing them to a private registry and running End-to-End tests against them.
End to End and Verdaccio
Some projects organize packages in multi-packages repositories or monorepos. End to End testing is a topic that usually is only relevant for User Interfaces, but from a Node.js perspective, publishing packages also need to be tested.
Such approach has been really hard to achieve considering:
- Populate canary packages on public services seems not to be a good idea
- Some self-hosted OSS registries are too heavy
- Offline environments (private networks)
Verdaccio is a lightweight registry with zero-configuration that fits perfectly in any E2E + CI workflow.
Examples in Open Source
The following projects have examples using Verdaccio in Open Source
- Babel.js (+35k ⭐️)
- Docusaurus (+31k ⭐️)
- create-react-app (+73.5k ⭐️)
- Uppy (+21k ⭐️)
- ethereum/web3.js (+8k ⭐️)
- adobe react-spectrum (+6k ⭐️)
- Mozilla Neutrino (+3k ⭐️)
This is the most simple example using Verdaccio in a bash script (extracted from create-react-app).
# start local registry
sh -c "mkdir -p $HOME/.config/verdaccio"
sh -c "cp --verbose /config.yaml $HOME/.config/verdaccio/config.yaml"
sh -c "nohup verdaccio --config $HOME/.config/verdaccio/config.yaml &>$tmp_registry_log &"
# wait for `verdaccio` to boot
grep -q 'http address' <(tail -f $tmp_registry_log)
# login so we can publish packages
sh -c "npm-auth-to-token -u test -p test -e firstname.lastname@example.org -r $local_registry"
# Run nmp command
sh -c "npm --registry $local_registry publish"