test(jest): Fix flakey jest snapshots not saving (#20262)

Change the `visual-snapshot` environment so that it does not run `puppeteer`, instead created a GitHub action container that runs puppeteer and renders the image from html. See https://github.com/getsentry/action-html-to-image. I believe previously, the jest env was closing puppeteer before it could finish screenshots.

Also fixed platformicons and css/icons inlined as base64 so that it can be properly rendered inside of docker container.

.github/workflows/acceptance.yml

@@ -9,7 +9,7 @@ jobs:
     jest:
       runs-on: ubuntu-latest
       env:
-        VISUAL_SNAPSHOT_ENABLE: 1
+        VISUAL_HTML_ENABLE: 1
       steps:
         # Checkout codebase
         - uses: actions/checkout@v2
@@ -39,6 +39,18 @@ jobs:
             NODE_ENV=production yarn build-css
             yarn test-ci --forceExit
 
+        - name: Save HTML artifacts
+          uses: actions/upload-artifact@v2
+          with:
+            name: jest-html
+            path: .artifacts/visual-snapshots/jest
+
+        - name: Create Images from HTML
+          uses: getsentry/action-html-to-image@main
+          with:
+            base-path: .artifacts/visual-snapshots/jest
+            css-path: src/sentry/static/sentry/dist/sentry.css
+
         - name: Save snapshots
           if: always()
           uses: getsentry/action-visual-snapshot@v2

config/webpack.css.config.js

@@ -5,5 +5,26 @@ const config = require('../webpack.config');
 config.entry = {
   sentry: 'less/jest-ci.less',
 };
+config.module = {
+  ...config.module,
+  rules: [
+    ...config.module.rules.filter(({test}) =>
+      ['/\\.css/', '/\\.less$/'].includes(test.toString())
+    ),
+
+    {
+      test: /\.(jpe?g|png|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+      use: [
+        {
+          loader: 'url-loader',
+          options: {
+            esModule: false,
+            limit: true,
+          },
+        },
+      ],
+    },
+  ],
+};
 
 module.exports = config;

jest.config.js

@@ -53,14 +53,5 @@ module.exports = {
 
   testEnvironmentOptions: {
     output: path.resolve(__dirname, '.artifacts', 'visual-snapshots', 'jest'),
-    includeCss: path.resolve(
-      __dirname,
-      'src',
-      'sentry',
-      'static',
-      'sentry',
-      'dist',
-      'sentry.css'
-    ),
   },
 };

package.json

@@ -145,7 +145,7 @@
     "@storybook/addon-storysource": "^5.3.3",
     "@storybook/addons": "^5.3.3",
     "@storybook/react": "^5.3.3",
-    "@visual-snapshot/jest": "^1.0.13",
+    "@visual-snapshot/jest": "^1.0.14",
     "babel-eslint": "^10.0.3",
     "babel-gettext-extractor": "^4.1.3",
     "babel-jest": "24.9.0",
@@ -175,6 +175,7 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript-styled-plugin": "^0.15.0",
+    "url-loader": "^4.1.0",
     "webpack-dev-server": "3.10.3"
   },
   "optionalDependencies": {

src/sentry/static/sentry/less/jest-ci.less

@@ -1,5 +1,6 @@
 /* This is only used for CI, specifically for jest snapshots */
 @import url('./sentry.less');
+@import '~platformicons/platformicons/platformicons.css';
 
 /* Disable animations */
 

yarn.lock

@@ -3327,10 +3327,10 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-"@visual-snapshot/jest-environment@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@visual-snapshot/jest-environment/-/jest-environment-1.0.13.tgz#ca79c69c238c9df420e5a6d346b2af0f0f714077"
-  integrity sha512-1dD4g974VAONaFtHl5vOo0o9zt+q4e5VXYL6oWgNF7bkt0QKD5JDzrT9P6nGuA86EwsZyM75IM7DwQWCLK1goA==
+"@visual-snapshot/jest-environment@^1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@visual-snapshot/jest-environment/-/jest-environment-1.0.14.tgz#8ac219d9c3ede073a6411dc89011b0cc9cf9ecea"
+  integrity sha512-katKsy1hEmwb/csN64wIZkzLBpt/91xf34UvB7BrC0PrasMGY7ereFeI8SZqv1ZAsZNBNqK7vyOVgHzLSqVYJw==
   dependencies:
     "@jest/environment" "^26.1.0"
     "@jest/types" "^24.9"
@@ -3342,12 +3342,12 @@
   optionalDependencies:
     fsevents "^2.1.3"
 
-"@visual-snapshot/jest@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@visual-snapshot/jest/-/jest-1.0.13.tgz#83990426e7c2a66f8def5290a29fe2a2e10f58af"
-  integrity sha512-aV+iDgCFce/Bq3iXzfQ5v++1F0f9CRo28bzIwIASp8Ww1ve+yCQHqJv9bGml1yrkouIenTBDH2Cx21zfdj07Tw==
+"@visual-snapshot/jest@^1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@visual-snapshot/jest/-/jest-1.0.14.tgz#a789c095e41c5121aacff0706ded421be6868032"
+  integrity sha512-I7K7/Wg9Sj6+UnnWqqXhZxrde8ulnVa0b/s01dU/xqn6O3Z7r8Z5EypezI/Pb3EA/qCrfGOcQzz1Of1/KblCkA==
   dependencies:
-    "@visual-snapshot/jest-environment" "^1.0.13"
+    "@visual-snapshot/jest-environment" "^1.0.14"
     typescript "^3.9.6"
 
 "@webassemblyjs/ast@1.8.5":
@@ -6397,10 +6397,10 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
-devtools-protocol@0.0.767361:
-  version "0.0.767361"
-  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.767361.tgz#5977f2558b84f9df36f62501bdddb82f3ae7b66b"
-  integrity sha512-ziRTdhEVQ9jEwedaUaXZ7kl9w9TF/7A3SXQ0XuqrJB+hMS62POHZUWTbumDN2ehRTfvWqTPc2Jw4gUl/jggmHA==
+devtools-protocol@0.0.781568:
+  version "0.0.781568"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.781568.tgz#4cdca90a952d2c77831096ff6cd32695d8715a04"
+  integrity sha512-9Uqnzy6m6zEStluH9iyJ3iHyaQziFnMnLeC8vK0eN6smiJmIx7+yB64d67C2lH/LZra+5cGscJAJsNXO+MdPMg==
 
 diff-sequences@^24.9.0:
   version "24.9.0"
@@ -10972,6 +10972,11 @@ mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
   integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
 
+mime-db@1.44.0:
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
 mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.26"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
@@ -10979,6 +10984,13 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   dependencies:
     mime-db "1.43.0"
 
+mime-types@^2.1.26:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+  dependencies:
+    mime-db "1.44.0"
+
 mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -11129,11 +11141,6 @@ mitt@^1.1.3:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
   integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
 
-mitt@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.0.1.tgz#9e8a075b4daae82dd91aac155a0ece40ca7cb393"
-  integrity sha512-FhuJY+tYHLnPcBHQhbUFzscD5512HumCPE4URXZUgPi3IvOJi4Xva5IIgy3xX56GqCmw++MAm5UURG6kDBYTdg==
-
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -13129,16 +13136,15 @@ punycode@^2.1.0, punycode@^2.1.1:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 puppeteer@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-5.1.0.tgz#e7bae2caa6e3a13a622755e4c27689d9812c38ca"
-  integrity sha512-IZBFG8XcA+oHxYo5rEpJI/HQignUis2XPijPoFpNxla2O+WufonGsUsSqrhRXgBKOME5zNfhRdUY2LvxAiKlhw==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-5.2.1.tgz#7f0564f0a5384f352a38c8cc42af875cd87f4ea6"
+  integrity sha512-PZoZG7u+T6N1GFWBQmGVG162Ak5MAy8nYSVpeeQrwJK2oYUlDWpHEJPcd/zopyuEMTv7DiztS1blgny1txR2qw==
   dependencies:
     debug "^4.1.0"
-    devtools-protocol "0.0.767361"
+    devtools-protocol "0.0.781568"
     extract-zip "^2.0.0"
     https-proxy-agent "^4.0.0"
     mime "^2.0.3"
-    mitt "^2.0.1"
     pkg-dir "^4.2.0"
     progress "^2.0.1"
     proxy-from-env "^1.0.0"
@@ -16470,6 +16476,15 @@ url-loader@^2.0.1:
     mime "^2.4.4"
     schema-utils "^2.5.0"
 
+url-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"
+  integrity sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.26"
+    schema-utils "^2.6.5"
+
 url-parse@^1.4.3:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"