React consumer test

Consumer test in the context of a React component library verifies how a real consuming application uses the library’s public API.

For example, a react consumer test:

#!/bin/sh

set -eu

mkdir -p consumer/cache

cd consumer

ENV_PACK_FILE="$(npm pack ../dist/env --silent --ignore-scripts --pack-destination . --cache cache)"
echo $ENV_PACK_FILE

PATH_PACK_FILE="$(npm pack ../dist/path --silent --ignore-scripts --pack-destination . --cache cache)"
echo $PATH_PACK_FILE

WEBPACK_PACK_FILE="$(npm pack ../dist/webpack --silent --ignore-scripts --pack-destination . --cache cache)"
echo $WEBPACK_PACK_FILE

cat > index.tsx <<'EOT'
import { renderToString } from 'react-dom/server';
import { withReact } from '@vyriy/hoc';
import { logger } from '@vyriy/logger';
try {
  logger.log('Testing...');
  const App = withReact(() => <div>App</div>);
  const html = renderToString(<App />);
  logger.log('html:', html);
  if (!html.includes('<div>App</div>')) {
    throw new Error('Consumer | Unexpected SSR output!');
  }
  logger.log('Consumer test is ok!');
} catch (error) {
  logger.error('Consumer test error!');
  logger.error(error);
  process.exit(1);
}
EOT

cat > package.json <<'EOT'
{
  "name": "consumer",
  "version": "1.0.0"
}
EOT

cat > tsconfig.json <<'EOT'
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "esnext",
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}
EOT

cat > webpack.config.mjs <<'EOT'
import 'webpack';

import { ssr } from '@vyriy/webpack-config';

export default ssr('./index.tsx', {
  filename: 'index.js',
  library: { type: 'commonjs2' },
  clean: true,
});
EOT

npm install --silent --no-audit --no-fund --loglevel=error --cache cache "./$ENV_PACK_FILE" > /dev/null
npm install --silent --no-audit --no-fund --loglevel=error --cache cache "./$PATH_PACK_FILE" > /dev/null
npm install --silent --no-audit --no-fund --loglevel=error --cache cache "./$WEBPACK_PACK_FILE" > /dev/null

npm install --no-audit --no-fund --loglevel=error \
--cache cache \
react \
react-dom \
typescript \
webpack \
webpack-cli \
> /dev/null

echo "Building consumer..."
npx webpack --stats errors-only

echo "Testing consumer..."
du -h ./dist/index.js
node ./dist/index.js

cd ..
rm -rf consumer