fix(nextjs): Small integration test runner fixes (#3801)

Fix a few small bugs in our test runner for nextjs integration tests:

- Debug mode failed because of a missing import
- Test runner options couldn't be passed except by hard-coding them in the bash script called by yarn
- One of our node/nextjs compatibility checks was checking the wrong version of nextjs
- Console breadcrumbs caused ever-larger events to be logged, since each time an object including breadcrumbs was logged, the entire object then became a breadcrumb in the next object logged, which itself became a breadcrumb in the next one, and so on and so forth
- In the test-runner bash script, our variable keeping track of exit code was reset unnecessarily (if it's anything other than `0` by that point, the script already will have bailed)
- Our test filtering was case-sensitive

Also a few small changes to make debugging those tests easier:

- When comparing objects, the actual value is now stored as a variable, so that the value will be shown inline by the debugger
- The default value of the `depth` option is now included in its help text
- `console.log(inspect(...))` was changed to `console.dir(...)`, which does both in one, and color is now included in the output

Author: lobsterkatie

packages/nextjs/test/integration/sentry.server.config.js

@@ -3,7 +3,19 @@ import * as Sentry from '@sentry/nextjs';
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   tracesSampleRate: 1,
-  integrations: [
+
+  integrations: defaults => [
+    ...defaults.filter(
+      integration =>
+        // filter out `Console` since the tests are happening in the console and we don't need to record what's printed
+        // there, because we can see it (this makes debug logging much less noisy, since intercepted events which are
+        // printed to the console no longer create console breadcrumbs, which then get printed, creating even longer
+        // console breadcrumbs, which get printed, etc, etc)
+
+        // filter out `Http` so its options can be changed below (otherwise, default one wins because it's initialized first)
+        integration.name !== 'Console' && integration.name !== 'Http',
+    ),
+
     // Used for testing http tracing
     new Sentry.Integrations.Http({ tracing: true }),
   ],

packages/nextjs/test/integration/test/client/errorClick.js

@@ -2,7 +2,6 @@ const { waitForAll } = require('../utils/common');
 const { expectRequestCount, isEventRequest, expectEvent } = require('../utils/client');
 
 module.exports = async ({ page, url, requests }) => {
-  console.log(page, url, requests);
   await page.goto(`${url}/errorClick`);
 
   await waitForAll([page.click('button'), page.waitForRequest(isEventRequest)]);

packages/nextjs/test/integration/test/runner.js

@@ -21,7 +21,7 @@ const argv = yargs(process.argv.slice(2))
   })
   .option('depth', {
     type: 'number',
-    description: 'Set the logging depth for intercepted requests',
+    description: 'Set the logging depth for intercepted requests (default = 4)',
   }).argv;
 
 const runScenario = async (scenario, execute, env) => {
@@ -66,7 +66,7 @@ module.exports.run = async ({
 
     let scenarios = await fs.readdir(scenariosDir);
     if (argv.filter) {
-      scenarios = scenarios.filter(file => file.toLowerCase().includes(argv.filter));
+      scenarios = scenarios.filter(file => file.toLowerCase().includes(argv.filter.toLowerCase()));
     }
     scenarios = scenarios.map(s => path.resolve(scenariosDir, s));
 

packages/nextjs/test/integration/test/utils/common.js

@@ -37,7 +37,7 @@ const logIf = (condition, message, input, depth = 4) => {
   if (condition) {
     console.log(message);
     if (input) {
-      console.log(inspect(input, { depth }));
+      console.dir(input, { depth, colors: true });
     }
   }
 };

packages/nextjs/test/integration/test/utils/server.js

@@ -57,13 +57,14 @@ const objectMatches = (actual, expected) => {
 
   for (const key in expected) {
     const expectedValue = expected[key];
+    const actualValue = actual[key];
 
     if (Object.prototype.toString.call(expectedValue) === '[object Object]' || Array.isArray(expectedValue)) {
-      if (!objectMatches(actual[key], expectedValue)) {
+      if (!objectMatches(actualValue, expectedValue)) {
         return false;
       }
     } else {
-      if (actual[key] !== expectedValue) {
+      if (actualValue !== expectedValue) {
         return false;
       }
     }

packages/nextjs/test/run-integration-tests.sh

@@ -24,7 +24,7 @@ for NEXTJS_VERSION in 10 11; do
   fi
 
   # Next.js v11 requires at least Node v12
-  if [ "$NODE_MAJOR" -lt "12" ] && [ "$NEXTJS_VERSION" -eq "10" ]; then
+  if [ "$NODE_MAJOR" -lt "12" ] && [ "$NEXTJS_VERSION" -eq "11" ]; then
     echo "[nextjs$NEXTJS_VERSION] Not compatible with Node $NODE_VERSION"
     exit 0
   fi
@@ -53,8 +53,19 @@ for NEXTJS_VERSION in 10 11; do
     echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Building..."
     yarn build | grep "Using webpack"
 
+    # if no arguments were passed, default to outputting nothing other than success and failure messages ($* gets all
+    # passed args as a single string)
+    args=$*
+    if [[ ! $args ]]; then
+      args="--silent"
+    fi
+
+    # we keep this updated as we run the tests, so that if it's ever non-zero, we can bail
     EXIT_CODE=0
-    node test/server.js --silent || EXIT_CODE=$?
+
+    echo "Running server tests with options: $args"
+    node test/server.js $args || EXIT_CODE=$?
+
     if [ $EXIT_CODE -eq 0 ]
     then
       echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Server integration tests passed"
@@ -63,8 +74,8 @@ for NEXTJS_VERSION in 10 11; do
       exit 1
     fi
 
-    EXIT_CODE=0
-    node test/client.js --silent || EXIT_CODE=$?
+    echo "Running client tests with options: $args"
+    node test/client.js $args || EXIT_CODE=$?
     if [ $EXIT_CODE -eq 0 ]
     then
       echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Client integration tests passed"