diff --git a/src/cdk-experimental/dialog/dialog.spec.ts b/src/cdk-experimental/dialog/dialog.spec.ts
index 1dbdd33187cd..1fa959416871 100644
--- a/src/cdk-experimental/dialog/dialog.spec.ts
+++ b/src/cdk-experimental/dialog/dialog.spec.ts
@@ -209,8 +209,8 @@ describe('Dialog', () => {
 
     // beforeClose should emit before dialog container is destroyed
     const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
-      expect(overlayContainerElement.querySelector('cdk-dialog-container'))
-          .not.toBeNull('dialog container exists when beforeClose is called');
+      expect(overlayContainerElement.querySelector('cdk-dialog-container')).not
+        .withContext('dialog container exists when beforeClose is called').toBeNull();
     });
 
     dialogRef.beforeClosed().subscribe(beforeCloseHandler);
@@ -261,7 +261,7 @@ describe('Dialog', () => {
     flushMicrotasks();
 
     expect(overlayContainerElement.querySelectorAll('cdk-dialog-container').length)
-        .toBe(1, 'Expected one open dialog.');
+      .withContext('Expected one open dialog.').toBe(1);
 
     dialogRef.close();
     flushMicrotasks();
@@ -269,7 +269,7 @@ describe('Dialog', () => {
     tick(500);
 
     expect(overlayContainerElement.querySelectorAll('cdk-dialog-container').length)
-        .toBe(0, 'Expected no open dialogs.');
+      .withContext('Expected no open dialogs.').toBe(0);
   }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
@@ -403,8 +403,8 @@ describe('Dialog', () => {
 
     let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth).toBe('80vw',
-      'Expected dialog to set a default max-width on overlay pane');
+    expect(overlayPane.style.maxWidth)
+      .withContext('Expected dialog to set a default max-width on overlay pane').toBe('80vw');
 
     dialogRef.close();
 
@@ -716,7 +716,8 @@ describe('Dialog', () => {
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
+    expect(dialogRef.componentInstance)
+      .withContext('Expected reference to have been cleared.').toBeFalsy();
   }));
 
   it('should assign a unique id to each dialog', () => {
@@ -892,7 +893,8 @@ describe('Dialog', () => {
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+        .withContext('Expected first tabbable element (input) in the dialog to be focused.')
+        .toBe('INPUT');
     }));
 
     it('should focus the dialog element on open', fakeAsync(() => {
@@ -907,7 +909,8 @@ describe('Dialog', () => {
       let container =
         overlayContainerElement.querySelector('cdk-dialog-container') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected container to be focused on open').toBe(container);
     }));
 
     it('should focus the first header element on open', fakeAsync(() => {
@@ -923,7 +926,7 @@ describe('Dialog', () => {
         overlayContainerElement.querySelector('h1[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to be focused on open');
+        .withContext('Expected first header to be focused on open').toBe(firstHeader);
     }));
 
     it('should focus the first element that matches the css selector from autoFocus on open',
@@ -940,7 +943,7 @@ describe('Dialog', () => {
         overlayContainerElement.querySelector('p[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstParagraph, 'Expected first paragraph to be focused on open');
+        .withContext('Expected first paragraph to be focused on open').toBe(firstParagraph);
     }));
 
     it('should re-focus trigger element when dialog closes', fakeAsync(() => {
@@ -968,8 +971,9 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement!.id).toBe('dialog-trigger',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('dialog-trigger');
 
       document.body.removeChild(button);
     }));
@@ -1027,14 +1031,14 @@ describe('Dialog', () => {
       otherButton.focus();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to be on the alternate button.');
+        .withContext('Expected focus to be on the alternate button.').toBe('other-button');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to stay on the alternate button.');
+        .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
       body.removeChild(button);
       body.removeChild(otherButton);
@@ -1065,8 +1069,9 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement!.id).toBe('input-to-be-focused',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('input-to-be-focused');
 
       document.body.removeChild(button);
       document.body.removeChild(input);
@@ -1081,7 +1086,7 @@ describe('Dialog', () => {
         flushMicrotasks();
 
         expect(document.activeElement!.tagName.toLowerCase())
-            .toBe('cdk-dialog-container', 'Expected dialog container to be focused.');
+          .withContext('Expected dialog container to be focused.').toBe('cdk-dialog-container');
       }));
 
   });
@@ -1154,14 +1159,14 @@ describe('Dialog with a parent Dialog', () => {
       flush();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       childDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on child Dialog to close dialog opened by parent');
+        .withContext('Expected closeAll on child Dialog to close dialog opened by parent').toBe('');
     }));
 
   it('should close dialogs opened by a child when calling closeAll on a parent Dialog',
@@ -1170,14 +1175,14 @@ describe('Dialog with a parent Dialog', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       parentDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on parent Dialog to close dialog opened by child');
+        .withContext('Expected closeAll on parent Dialog to close dialog opened by child').toBe('');
     }));
 
   it('should not close the parent dialogs, when a child is destroyed', fakeAsync(() => {
@@ -1186,14 +1191,14 @@ describe('Dialog with a parent Dialog', () => {
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
+      .withContext('Expected a dialog to be opened').toContain('Pizza');
 
     childDialog.ngOnDestroy();
     fixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to remain opened');
+      .withContext('Expected a dialog to remain opened').toContain('Pizza');
   }));
 
   it('should close the top dialog via the escape key', fakeAsync(() => {
diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts
index c5a6b450d4a5..a47f1b81bc44 100644
--- a/src/cdk-experimental/listbox/listbox.spec.ts
+++ b/src/cdk-experimental/listbox/listbox.spec.ts
@@ -620,15 +620,15 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should be able to set the disabled state via setDisabledState', () => {
       expect(listboxInstance.disabled)
-          .toBe(false, 'Expected the selection list to be enabled.');
+        .withContext('Expected the selection list to be enabled.').toBe(false);
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       listboxInstance.setDisabledState(true);
       fixture.detectChanges();
 
       expect(listboxInstance.disabled)
-          .toBe(true, 'Expected the selection list to be disabled.');
+        .withContext('Expected the selection list to be disabled.').toBe(true);
       for (const option of optionElements) {
         expect(option.getAttribute('aria-disabled')).toBe('true');
       }
@@ -636,7 +636,7 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should be able to select options via writeValue', () => {
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       listboxInstance.writeValue('arc');
       fixture.detectChanges();
@@ -651,7 +651,7 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should be select multiple options by their values', () => {
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.isMultiselectable = true;
       fixture.detectChanges();
@@ -676,7 +676,7 @@ describe('CdkOption and CdkListbox', () => {
     it('should be able to disable options from the control', () => {
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.form.disable();
       fixture.detectChanges();
@@ -690,7 +690,7 @@ describe('CdkOption and CdkListbox', () => {
     it('should be able to toggle disabled state after form control is disabled',  () => {
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.form.disable();
       fixture.detectChanges();
@@ -705,7 +705,7 @@ describe('CdkOption and CdkListbox', () => {
 
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
     });
 
     it('should be able to select options via setting the value in form control', () => {
diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
index 946c7e05a32e..12c5aa05892e 100644
--- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
+++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
@@ -29,7 +29,7 @@ describe('CdkVirtualScrollViewport', () => {
       const contentWrapper =
           viewport.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper')!;
       expect(contentWrapper.children.length)
-          .toBe(4, 'should render 4 50px items to fill 200px space');
+        .withContext('should render 4 50px items to fill 200px space').toBe(4);
     }));
 
     it('should render extra content if first item is smaller than average', fakeAsync(() => {
@@ -38,8 +38,9 @@ describe('CdkVirtualScrollViewport', () => {
 
       const contentWrapper =
           viewport.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper')!;
-      expect(contentWrapper.children.length).toBe(4,
-          'should render 4 items to fill 200px space based on 50px estimate from first item');
+      expect(contentWrapper.children.length)
+        .withContext('should render 4 items to fill 200px space based on 50px ' +
+                     'estimate from first item').toBe(4);
     }));
 
     it('should throw if maxBufferPx is less than minBufferPx', fakeAsync(() => {
diff --git a/src/cdk/a11y/aria-describer/aria-describer.spec.ts b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
index 03b5920c054c..d146a481d90e 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.spec.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
@@ -128,19 +128,23 @@ describe('AriaDescriber', () => {
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
 
     expect(document.body.contains(descriptionNode))
-        .toBe(true, 'Expected node to be inside the document to begin with.');
-    expect(getMessagesContainer()).toBeNull('Expected no messages container on init.');
+      .withContext('Expected node to be inside the document to begin with.')
+      .toBe(true);
+    expect(getMessagesContainer())
+      .withContext('Expected no messages container on init.').toBeNull();
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
     expectMessage(component.element1, 'Hello');
     expect(getMessagesContainer())
-        .toBeNull('Expected no messages container after the element was described.');
+      .withContext('Expected no messages container after the element was described.')
+      .toBeNull();
 
     ariaDescriber.removeDescription(component.element1, descriptionNode);
 
-    expect(document.body.contains(descriptionNode)).toBe(true,
-        'Expected description node to still be in the DOM after it is no longer being used.');
+    expect(document.body.contains(descriptionNode))
+      .withContext('Expected description node to still be in the DOM after it is' +
+                   'no longer being used.').toBe(true);
   });
 
   it('should keep nodes set as descriptions inside their original position in the DOM', () => {
@@ -148,18 +152,20 @@ describe('AriaDescriber', () => {
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
     const initialParent = descriptionNode.parentNode;
 
-    expect(initialParent).toBeTruthy('Expected node to have a parent initially.');
+    expect(initialParent).withContext('Expected node to have a parent initially.').toBeTruthy();
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
     expectMessage(component.element1, 'Hello');
-    expect(descriptionNode.parentNode).toBe(initialParent,
-        'Expected node to stay inside the same parent when used as a description.');
+    expect(descriptionNode.parentNode)
+      .withContext('Expected node to stay inside the same parent when used as a description.')
+      .toBe(initialParent);
 
     ariaDescriber.removeDescription(component.element1, descriptionNode);
 
-    expect(descriptionNode.parentNode).toBe(initialParent,
-      'Expected node to stay inside the same parent after not being used as a description.');
+    expect(descriptionNode.parentNode)
+      .withContext('Expected node to stay inside the same parent after not ' +
+                   'being used as a description.').toBe(initialParent);
   });
 
   it('should be able to unregister messages while having others registered', () => {
@@ -247,7 +253,8 @@ describe('AriaDescriber', () => {
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
 
     expect(document.body.contains(descriptionNode))
-        .toBe(true, 'Expected node to be inside the document to begin with.');
+      .withContext('Expected node to be inside the document to begin with.')
+      .toBe(true);
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
@@ -257,8 +264,9 @@ describe('AriaDescriber', () => {
     ariaDescriber.ngOnDestroy();
 
     expect(component.element1.hasAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE)).toBe(false);
-    expect(document.body.contains(descriptionNode)).toBe(true,
-        'Expected description node to still be in the DOM after it is no longer being used.');
+    expect(document.body.contains(descriptionNode))
+      .withContext('Expected description node to still be in the DOM after ' +
+                   'it is no longer being used.').toBe(true);
   });
 
   it('should remove the aria-describedby attribute if there are no more messages', () => {
diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
index 4292a4d78009..f21cbd31a870 100644
--- a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
+++ b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
@@ -80,7 +80,7 @@ describe('FocusMonitor', () => {
     tick();
 
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledTimes(1);
   }));
 
@@ -92,11 +92,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-keyboard-focused'))
-        .toBe(true, 'button should have cdk-keyboard-focused class');
+      .withContext('button should have cdk-keyboard-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('keyboard');
   }));
 
@@ -108,11 +108,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-mouse-focused'))
-        .toBe(true, 'button should have cdk-mouse-focused class');
+      .withContext('button should have cdk-mouse-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('mouse');
   }));
 
@@ -124,11 +124,11 @@ describe('FocusMonitor', () => {
     tick(TOUCH_BUFFER_MS);
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-touch-focused'))
-        .toBe(true, 'button should have cdk-touch-focused class');
+      .withContext('button should have cdk-touch-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('touch');
   }));
 
@@ -139,11 +139,11 @@ describe('FocusMonitor', () => {
     tick();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-program-focused'))
-        .toBe(true, 'button should have cdk-program-focused class');
+      .withContext('button should have cdk-program-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('program');
   }));
 
@@ -159,11 +159,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-keyboard-focused'))
-        .toBe(true, 'button should have cdk-keyboard-focused class');
+      .withContext('button should have cdk-keyboard-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('keyboard');
   }));
 
@@ -172,11 +172,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-keyboard-focused'))
-        .toBe(true, 'button should have cdk-keyboard-focused class');
+      .withContext('button should have cdk-keyboard-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('keyboard');
   }));
 
@@ -186,11 +186,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-mouse-focused'))
-        .toBe(true, 'button should have cdk-mouse-focused class');
+      .withContext('button should have cdk-mouse-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('mouse');
   }));
 
@@ -200,11 +200,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-touch-focused'))
-        .toBe(true, 'button should have cdk-touch-focused class');
+      .withContext('button should have cdk-touch-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('touch');
   }));
 
@@ -214,11 +214,11 @@ describe('FocusMonitor', () => {
     flush();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-program-focused'))
-        .toBe(true, 'button should have cdk-program-focused class');
+      .withContext('button should have cdk-program-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledWith('program');
   }));
 
@@ -228,7 +228,7 @@ describe('FocusMonitor', () => {
     tick();
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(changeHandler).toHaveBeenCalledWith('program');
 
     // Call `blur` directly because invoking `buttonElement.blur()` does not always trigger the
@@ -237,7 +237,7 @@ describe('FocusMonitor', () => {
     fixture.detectChanges();
 
     expect(buttonElement.classList.length)
-        .toBe(0, 'button should not have any focus classes');
+      .withContext('button should not have any focus classes').toBe(0);
     expect(changeHandler).toHaveBeenCalledWith(null);
   }));
 
@@ -246,12 +246,18 @@ describe('FocusMonitor', () => {
     fixture.detectChanges();
     tick();
 
-    expect(buttonElement.classList.length).toBe(2, 'button should have exactly 2 focus classes');
+    expect(buttonElement.classList.length)
+
+      .withContext('button should have exactly 2 focus classes')
+      .toBe(2);
 
     focusMonitor.stopMonitoring(buttonElement);
     fixture.detectChanges();
 
-    expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
+    expect(buttonElement.classList.length)
+
+      .withContext('button should not have any focus classes')
+      .toBe(0);
   }));
 
   it('should remove classes when destroyed', fakeAsync(() => {
@@ -259,13 +265,19 @@ describe('FocusMonitor', () => {
     fixture.detectChanges();
     tick();
 
-    expect(buttonElement.classList.length).toBe(2, 'button should have exactly 2 focus classes');
+    expect(buttonElement.classList.length)
+
+      .withContext('button should have exactly 2 focus classes')
+      .toBe(2);
 
     // Destroy manually since destroying the fixture won't do it.
     focusMonitor.ngOnDestroy();
     fixture.detectChanges();
 
-    expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
+    expect(buttonElement.classList.length)
+
+      .withContext('button should not have any focus classes')
+      .toBe(0);
   }));
 
   it('should pass focus options to the native focus method', fakeAsync(() => {
@@ -328,11 +340,11 @@ describe('FocusMonitor', () => {
     fakeActiveElement = buttonElement;
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-keyboard-focused'))
-        .toBe(true, 'button should have cdk-keyboard-focused class');
+      .withContext('button should have cdk-keyboard-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledTimes(1);
     expect(changeHandler).toHaveBeenCalledWith('keyboard');
     expect(buttonElement.focus).toHaveBeenCalledTimes(1);
@@ -342,11 +354,11 @@ describe('FocusMonitor', () => {
     fakeActiveElement = buttonElement;
 
     expect(buttonElement.classList.length)
-        .toBe(2, 'button should have exactly 2 focus classes');
+      .withContext('button should have exactly 2 focus classes').toBe(2);
     expect(buttonElement.classList.contains('cdk-focused'))
-        .toBe(true, 'button should have cdk-focused class');
+      .withContext('button should have cdk-focused class').toBe(true);
     expect(buttonElement.classList.contains('cdk-mouse-focused'))
-        .toBe(true, 'button should have cdk-mouse-focused class');
+      .withContext('button should have cdk-mouse-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledTimes(2);
     expect(changeHandler).toHaveBeenCalledWith('mouse');
     expect(buttonElement.focus).toHaveBeenCalledTimes(1);
@@ -362,11 +374,11 @@ describe('FocusMonitor', () => {
     fakeActiveElement = buttonElement;
 
     expect(parent.classList.length)
-        .toBe(3, 'Parent should have exactly 2 focus classes and the `parent` class');
+      .withContext('Parent should have exactly 2 focus classes and the `parent` class').toBe(3);
     expect(parent.classList.contains('cdk-focused'))
-        .toBe(true, 'Parent should have cdk-focused class');
+      .withContext('Parent should have cdk-focused class').toBe(true);
     expect(parent.classList.contains('cdk-keyboard-focused'))
-        .toBe(true, 'Parent should have cdk-keyboard-focused class');
+      .withContext('Parent should have cdk-keyboard-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledTimes(1);
     expect(changeHandler).toHaveBeenCalledWith('keyboard');
     expect(buttonElement.focus).toHaveBeenCalledTimes(1);
@@ -376,11 +388,11 @@ describe('FocusMonitor', () => {
     fakeActiveElement = buttonElement;
 
     expect(parent.classList.length)
-        .toBe(3, 'Parent should have exactly 2 focus classes and the `parent` class');
+      .withContext('Parent should have exactly 2 focus classes and the `parent` class').toBe(3);
     expect(parent.classList.contains('cdk-focused'))
-        .toBe(true, 'Parent should have cdk-focused class');
+      .withContext('Parent should have cdk-focused class').toBe(true);
     expect(parent.classList.contains('cdk-mouse-focused'))
-        .toBe(true, 'Parent should have cdk-mouse-focused class');
+      .withContext('Parent should have cdk-mouse-focused class').toBe(true);
     expect(changeHandler).toHaveBeenCalledTimes(2);
     expect(changeHandler).toHaveBeenCalledWith('mouse');
     expect(buttonElement.focus).toHaveBeenCalledTimes(1);
@@ -462,7 +474,8 @@ describe('cdkMonitorFocus', () => {
     });
 
     it('should initially not be focused', () => {
-      expect(buttonElement.classList.length).toBe(0, 'button should not have focus classes');
+      expect(buttonElement.classList.length)
+        .withContext('button should not have focus classes').toBe(0);
     });
 
     it('should detect focus via keyboard', fakeAsync(() => {
@@ -473,11 +486,11 @@ describe('cdkMonitorFocus', () => {
       flush();
 
       expect(buttonElement.classList.length)
-          .toBe(2, 'button should have exactly 2 focus classes');
+        .withContext('button should have exactly 2 focus classes').toBe(2);
       expect(buttonElement.classList.contains('cdk-focused'))
-          .toBe(true, 'button should have cdk-focused class');
+        .withContext('button should have cdk-focused class').toBe(true);
       expect(buttonElement.classList.contains('cdk-keyboard-focused'))
-          .toBe(true, 'button should have cdk-keyboard-focused class');
+        .withContext('button should have cdk-keyboard-focused class').toBe(true);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith('keyboard');
     }));
 
@@ -489,11 +502,11 @@ describe('cdkMonitorFocus', () => {
       flush();
 
       expect(buttonElement.classList.length)
-          .toBe(2, 'button should have exactly 2 focus classes');
+        .withContext('button should have exactly 2 focus classes').toBe(2);
       expect(buttonElement.classList.contains('cdk-focused'))
-          .toBe(true, 'button should have cdk-focused class');
+        .withContext('button should have cdk-focused class').toBe(true);
       expect(buttonElement.classList.contains('cdk-mouse-focused'))
-          .toBe(true, 'button should have cdk-mouse-focused class');
+        .withContext('button should have cdk-mouse-focused class').toBe(true);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith('mouse');
     }));
 
@@ -505,11 +518,11 @@ describe('cdkMonitorFocus', () => {
       tick(TOUCH_BUFFER_MS);
 
       expect(buttonElement.classList.length)
-          .toBe(2, 'button should have exactly 2 focus classes');
+        .withContext('button should have exactly 2 focus classes').toBe(2);
       expect(buttonElement.classList.contains('cdk-focused'))
-          .toBe(true, 'button should have cdk-focused class');
+        .withContext('button should have cdk-focused class').toBe(true);
       expect(buttonElement.classList.contains('cdk-touch-focused'))
-          .toBe(true, 'button should have cdk-touch-focused class');
+        .withContext('button should have cdk-touch-focused class').toBe(true);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith('touch');
     }));
 
@@ -520,11 +533,11 @@ describe('cdkMonitorFocus', () => {
       tick();
 
       expect(buttonElement.classList.length)
-          .toBe(2, 'button should have exactly 2 focus classes');
+        .withContext('button should have exactly 2 focus classes').toBe(2);
       expect(buttonElement.classList.contains('cdk-focused'))
-          .toBe(true, 'button should have cdk-focused class');
+        .withContext('button should have cdk-focused class').toBe(true);
       expect(buttonElement.classList.contains('cdk-program-focused'))
-          .toBe(true, 'button should have cdk-program-focused class');
+        .withContext('button should have cdk-program-focused class').toBe(true);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith('program');
     }));
 
@@ -534,14 +547,14 @@ describe('cdkMonitorFocus', () => {
       tick();
 
       expect(buttonElement.classList.length)
-          .toBe(2, 'button should have exactly 2 focus classes');
+        .withContext('button should have exactly 2 focus classes').toBe(2);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith('program');
 
       buttonElement.blur();
       fixture.detectChanges();
 
       expect(buttonElement.classList.length)
-          .toBe(0, 'button should not have any focus classes');
+        .withContext('button should not have any focus classes').toBe(0);
       expect(fixture.componentInstance.focusChanged).toHaveBeenCalledWith(null);
     }));
   });
@@ -567,7 +580,8 @@ describe('cdkMonitorFocus', () => {
       fixture.detectChanges();
       tick();
 
-      expect(parentElement.classList.length).toBe(2, 'button should have exactly 2 focus classes');
+      expect(parentElement.classList.length)
+        .withContext('button should have exactly 2 focus classes').toBe(2);
     }));
 
     it('should not add focus classes on child focus', fakeAsync(() => {
@@ -575,7 +589,8 @@ describe('cdkMonitorFocus', () => {
       fixture.detectChanges();
       tick();
 
-      expect(parentElement.classList.length).toBe(0, 'button should not have any focus classes');
+      expect(parentElement.classList.length)
+        .withContext('button should not have any focus classes').toBe(0);
     }));
   });
 
@@ -600,7 +615,8 @@ describe('cdkMonitorFocus', () => {
       fixture.detectChanges();
       tick();
 
-      expect(parentElement.classList.length).toBe(2, 'button should have exactly 2 focus classes');
+      expect(parentElement.classList.length)
+        .withContext('button should have exactly 2 focus classes').toBe(2);
     }));
 
     it('should add focus classes on child focus', fakeAsync(() => {
@@ -608,7 +624,8 @@ describe('cdkMonitorFocus', () => {
       fixture.detectChanges();
       tick();
 
-      expect(parentElement.classList.length).toBe(2, 'button should have exactly 2 focus classes');
+      expect(parentElement.classList.length)
+        .withContext('button should have exactly 2 focus classes').toBe(2);
     }));
   });
 
diff --git a/src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts b/src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts
index 5ca20890ebab..e92317c6b44b 100644
--- a/src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts
+++ b/src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts
@@ -23,9 +23,9 @@ describe('EventListenerFocusTrapInertStrategy', () => {
       componentInstance.outsideFocusableElement.nativeElement.focus();
       flush();
 
-      expect(componentInstance.activeElement).toBe(
-        componentInstance.firstFocusableElement.nativeElement,
-        'Expected first focusable element to be focused');
+      expect(componentInstance.activeElement)
+        .withContext('Expected first focusable element to be focused')
+        .toBe(componentInstance.firstFocusableElement.nativeElement);
   }));
 
   it('does not intercept focus when focus moves to another element in the FocusTrap',
@@ -37,9 +37,9 @@ describe('EventListenerFocusTrapInertStrategy', () => {
       componentInstance.secondFocusableElement.nativeElement.focus();
       flush();
 
-      expect(componentInstance.activeElement).toBe(
-        componentInstance.secondFocusableElement.nativeElement,
-        'Expected second focusable element to be focused');
+      expect(componentInstance.activeElement)
+        .withContext('Expected second focusable element to be focused')
+        .toBe(componentInstance.secondFocusableElement.nativeElement);
   }));
 
   it('should not intercept focus if it moved outside the trap and back in again',
@@ -52,8 +52,9 @@ describe('EventListenerFocusTrapInertStrategy', () => {
       secondFocusableElement.nativeElement.focus();
       flush();
 
-      expect(fixture.componentInstance.activeElement).toBe(secondFocusableElement.nativeElement,
-          'Expected second focusable element to be focused');
+      expect(fixture.componentInstance.activeElement)
+        .withContext('Expected second focusable element to be focused')
+        .toBe(secondFocusableElement.nativeElement);
   }));
 
 });
diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
index df4a924da17a..f6beedc5100a 100644
--- a/src/cdk/a11y/focus-trap/focus-trap.spec.ts
+++ b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
@@ -49,8 +49,9 @@ describe('FocusTrap', () => {
       const result = focusTrapInstance.focusFirstTabbableElement();
 
       expect(getActiveElement().nodeName.toLowerCase())
-          .toBe('input', 'Expected input element to be focused');
-      expect(result).toBe(true, 'Expected return value to be true if focus was shifted.');
+        .withContext('Expected input element to be focused').toBe('input');
+      expect(result)
+        .withContext('Expected return value to be true if focus was shifted.').toBe(true);
     });
 
     it('should wrap focus from start to end', () => {
@@ -63,9 +64,10 @@ describe('FocusTrap', () => {
       const lastElement = platform.IOS ? 'input' : 'button';
 
       expect(getActiveElement().nodeName.toLowerCase())
-          .toBe(lastElement, `Expected ${lastElement} element to be focused`);
+        .withContext(`Expected ${lastElement} element to be focused`).toBe(lastElement);
 
-      expect(result).toBe(true, 'Expected return value to be true if focus was shifted.');
+      expect(result)
+        .withContext('Expected return value to be true if focus was shifted.').toBe(true);
     });
 
     it('should return false if it did not manage to find a focusable element', () => {
@@ -303,18 +305,18 @@ describe('FocusTrap', () => {
     const outlet: HTMLElement = fixture.nativeElement.querySelector('.portal-outlet');
 
     expect(outlet.querySelectorAll('button').length)
-      .toBe(0, 'Expected no buttons inside the outlet on init.');
+      .withContext('Expected no buttons inside the outlet on init.').toBe(0);
     expect(outlet.querySelectorAll('.cdk-focus-trap-anchor').length)
-      .toBe(0, 'Expected no focus trap anchors inside the outlet on init.');
+      .withContext('Expected no focus trap anchors inside the outlet on init.').toBe(0);
 
     const portal = new TemplatePortal(instance.template, instance.viewContainerRef);
     instance.portalOutlet.attachTemplatePortal(portal);
     fixture.detectChanges();
 
     expect(outlet.querySelectorAll('button').length)
-      .toBe(1, 'Expected one button inside the outlet after attaching.');
+      .withContext('Expected one button inside the outlet after attaching.').toBe(1);
     expect(outlet.querySelectorAll('.cdk-focus-trap-anchor').length)
-      .toBe(2, 'Expected two focus trap anchors in the outlet after attaching.');
+      .withContext('Expected two focus trap anchors in the outlet after attaching.').toBe(2);
   });
 });
 
diff --git a/src/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.spec.ts b/src/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.spec.ts
index fa80bfc6a0e2..4942799d040f 100644
--- a/src/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.spec.ts
+++ b/src/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.spec.ts
@@ -19,7 +19,8 @@ describe('HighContrastModeDetector', () => {
     fakePlatform.isBrowser = false;
     const detector = new HighContrastModeDetector(fakePlatform, {});
     expect(detector.getHighContrastMode())
-        .toBe(HighContrastMode.NONE, 'Expected high-contrast mode `NONE` on non-browser platforms');
+      .withContext('Expected high-contrast mode `NONE` on non-browser platforms')
+      .toBe(HighContrastMode.NONE);
   });
 
   it('should not apply any css classes for non-browser platforms', () => {
@@ -28,26 +29,28 @@ describe('HighContrastModeDetector', () => {
     const detector = new HighContrastModeDetector(fakePlatform, fakeDocument);
     detector._applyBodyHighContrastModeCssClasses();
     expect(fakeDocument.body.className)
-        .toBe('', 'Expected body not to have any CSS classes in non-browser platforms');
+      .withContext('Expected body not to have any CSS classes in non-browser platforms').toBe('');
   });
 
   it('should detect WHITE_ON_BLACK when backgrounds are coerced to black', () => {
     const detector = new HighContrastModeDetector(fakePlatform, getFakeDocument('rgb(0,0,0)'));
     expect(detector.getHighContrastMode())
-        .toBe(HighContrastMode.WHITE_ON_BLACK, 'Expected high-contrast mode `WHITE_ON_BLACK`');
+      .withContext('Expected high-contrast mode `WHITE_ON_BLACK`')
+      .toBe(HighContrastMode.WHITE_ON_BLACK);
   });
 
   it('should detect BLACK_ON_WHITE when backgrounds are coerced to white ', () => {
     const detector =
         new HighContrastModeDetector(fakePlatform, getFakeDocument('rgb(255,255,255)'));
     expect(detector.getHighContrastMode())
-        .toBe(HighContrastMode.BLACK_ON_WHITE, 'Expected high-contrast mode `BLACK_ON_WHITE`');
+      .withContext('Expected high-contrast mode `BLACK_ON_WHITE`')
+      .toBe(HighContrastMode.BLACK_ON_WHITE);
   });
 
   it('should detect NONE when backgrounds are not coerced ', () => {
     const detector = new HighContrastModeDetector(fakePlatform, getFakeDocument('rgb(1,2,3)'));
     expect(detector.getHighContrastMode())
-        .toBe(HighContrastMode.NONE, 'Expected high-contrast mode `NONE`');
+      .withContext('Expected high-contrast mode `NONE`').toBe(HighContrastMode.NONE);
   });
 
   it('should apply css classes for BLACK_ON_WHITE high-contrast mode', () => {
@@ -71,7 +74,7 @@ describe('HighContrastModeDetector', () => {
     const detector = new HighContrastModeDetector(fakePlatform, fakeDocument);
     detector._applyBodyHighContrastModeCssClasses();
     expect(fakeDocument.body.className)
-        .toBe('', 'Expected body not to have any CSS classes in non-browser platforms');
+      .withContext('Expected body not to have any CSS classes in non-browser platforms').toBe('');
   });
 });
 
diff --git a/src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts b/src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts
index b6b55e2b8904..96841f168576 100644
--- a/src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts
+++ b/src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts
@@ -28,7 +28,7 @@ describe('InteractivityChecker', () => {
 
       elements.forEach(el => {
         expect(checker.isDisabled(el))
-            .toBe(true, `Expected <${el.nodeName} disabled> to be disabled`);
+          .withContext(`Expected <${el.nodeName} disabled> to be disabled`).toBe(true);
       });
     });
 
@@ -38,7 +38,7 @@ describe('InteractivityChecker', () => {
 
       elements.forEach(el => {
         expect(checker.isDisabled(el))
-            .toBe(false, `Expected <${el.nodeName}> not to be disabled`);
+          .withContext(`Expected <${el.nodeName}> not to be disabled`).toBe(false);
       });
     });
   });
@@ -50,7 +50,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isVisible(input))
-          .toBe(false, 'Expected element with `display: none` to not be visible');
+        .withContext('Expected element with `display: none` to not be visible').toBe(false);
     });
 
     it('should return false for the child of a `display: none` element', () => {
@@ -61,7 +61,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isVisible(input))
-          .toBe(false, 'Expected element with `display: none` parent to not be visible');
+        .withContext('Expected element with `display: none` parent to not be visible').toBe(false);
     });
 
     it('should return false for a `visibility: hidden` element', () => {
@@ -70,7 +70,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isVisible(input))
-          .toBe(false, 'Expected element with `visibility: hidden` to not be visible');
+        .withContext('Expected element with `visibility: hidden` to not be visible').toBe(false);
     });
 
     it('should return false for the child of a `visibility: hidden` element', () => {
@@ -81,7 +81,8 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isVisible(input))
-          .toBe(false, 'Expected element with `visibility: hidden` parent to not be visible');
+        .withContext('Expected element with `visibility: hidden` parent to not be visible')
+        .toBe(false);
     });
 
     it('should return true for an element with `visibility: hidden` ancestor and *closer* ' +
@@ -95,8 +96,8 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isVisible(input))
-          .toBe(true, 'Expected element with `visibility: hidden` ancestor and closer ' +
-              '`visibility: visible` ancestor to be visible');
+        .withContext('Expected element with `visibility: hidden` ancestor and closer ' +
+    '`visibility: visible` ancestor to be visible').toBe(true);
     });
 
     it('should return true for an element without visibility modifiers', () => {
@@ -104,7 +105,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.appendChild(input);
 
       expect(checker.isVisible(input))
-          .toBe(true, 'Expected element without visibility modifiers to be visible');
+        .withContext('Expected element without visibility modifiers to be visible').toBe(true);
     });
   });
 
@@ -114,7 +115,8 @@ describe('InteractivityChecker', () => {
       appendElements(elements);
 
       elements.forEach(el => {
-        expect(checker.isFocusable(el)).toBe(true, `Expected <${el.nodeName}> to be focusable`);
+        expect(checker.isFocusable(el))
+          .withContext(`Expected <${el.nodeName}> to be focusable`).toBe(true);
       });
     });
 
@@ -123,7 +125,8 @@ describe('InteractivityChecker', () => {
       anchor.href = 'google.com';
       testContainerElement.appendChild(anchor);
 
-      expect(checker.isFocusable(anchor)).toBe(true, `Expected <a> with href to be focusable`);
+      expect(checker.isFocusable(anchor))
+        .withContext(`Expected <a> with href to be focusable`).toBe(true);
     });
 
     it('should return false for an anchor without an href', () => {
@@ -131,7 +134,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.appendChild(anchor);
 
       expect(checker.isFocusable(anchor))
-          .toBe(false, `Expected <a> without href not to be focusable`);
+        .withContext(`Expected <a> without href not to be focusable`).toBe(false);
     });
 
     it('should return false for disabled form controls', () => {
@@ -141,7 +144,7 @@ describe('InteractivityChecker', () => {
 
       elements.forEach(el => {
         expect(checker.isFocusable(el))
-            .toBe(false, `Expected <${el.nodeName} disabled> not to be focusable`);
+          .withContext(`Expected <${el.nodeName} disabled> not to be focusable`).toBe(false);
       });
     });
 
@@ -151,7 +154,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isFocusable(input))
-          .toBe(false, 'Expected element with `display: none` to not be visible');
+        .withContext('Expected element with `display: none` to not be visible').toBe(false);
     });
 
     it('should return true for a `display: none` element with ignoreVisibility', () => {
@@ -162,7 +165,7 @@ describe('InteractivityChecker', () => {
       config.ignoreVisibility = true;
 
       expect(checker.isFocusable(input, config))
-          .toBe(true, 'Expected element with `display: none` to be focusable');
+        .withContext('Expected element with `display: none` to be focusable').toBe(true);
     });
 
     it('should return false for the child of a `display: none` element', () => {
@@ -173,7 +176,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isFocusable(input))
-          .toBe(false, 'Expected element with `display: none` parent to not be visible');
+        .withContext('Expected element with `display: none` parent to not be visible').toBe(false);
     });
 
     it('should return false for a `visibility: hidden` element', () => {
@@ -182,7 +185,7 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isFocusable(input))
-          .toBe(false, 'Expected element with `visibility: hidden` not to be focusable');
+        .withContext('Expected element with `visibility: hidden` not to be focusable').toBe(false);
     });
 
     it('should return false for the child of a `visibility: hidden` element', () => {
@@ -193,7 +196,8 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isFocusable(input))
-          .toBe(false, 'Expected element with `visibility: hidden` parent not to be focusable');
+        .withContext('Expected element with `visibility: hidden` parent not to be focusable')
+        .toBe(false);
     });
 
     it('should return true for an element with `visibility: hidden` ancestor and *closer* ' +
@@ -207,8 +211,8 @@ describe('InteractivityChecker', () => {
       const input = testContainerElement.querySelector('input') as HTMLElement;
 
       expect(checker.isFocusable(input))
-          .toBe(true, 'Expected element with `visibility: hidden` ancestor and closer ' +
-              '`visibility: visible` ancestor to be focusable');
+        .withContext('Expected element with `visibility: hidden` ancestor and closer ' +
+    '`visibility: visible` ancestor to be focusable').toBe(true);
     });
 
     it('should return false for an element with an empty tabindex', () => {
@@ -217,7 +221,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.appendChild(element);
 
       expect(checker.isFocusable(element))
-          .toBe(false, `Expected element with tabindex="" not to be focusable`);
+        .withContext(`Expected element with tabindex="" not to be focusable`).toBe(false);
     });
 
     it('should return false for an element with a non-numeric tabindex', () => {
@@ -226,7 +230,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.appendChild(element);
 
       expect(checker.isFocusable(element))
-          .toBe(false, `Expected element with non-numeric tabindex not to be focusable`);
+        .withContext(`Expected element with non-numeric tabindex not to be focusable`).toBe(false);
     });
 
     it('should return true for an element with contenteditable', () => {
@@ -235,7 +239,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.appendChild(element);
 
       expect(checker.isFocusable(element))
-          .toBe(true, `Expected element with contenteditable to be focusable`);
+        .withContext(`Expected element with contenteditable to be focusable`).toBe(true);
     });
 
 
@@ -245,7 +249,7 @@ describe('InteractivityChecker', () => {
 
       elements.forEach(el => {
         expect(checker.isFocusable(el))
-            .toBe(false, `Expected <${el.nodeName}> not to be focusable`);
+          .withContext(`Expected <${el.nodeName}> not to be focusable`).toBe(false);
       });
     });
 
@@ -307,7 +311,8 @@ describe('InteractivityChecker', () => {
         appendElements(elements);
 
         elements.forEach(el => {
-          expect(checker.isTabbable(el)).toBe(true, `Expected <${el.nodeName}> to be tabbable`);
+          expect(checker.isTabbable(el))
+            .withContext(`Expected <${el.nodeName}> to be tabbable`).toBe(true);
         });
       });
 
@@ -323,7 +328,7 @@ describe('InteractivityChecker', () => {
 
         elements.forEach(el => {
           expect(checker.isFocusable(el))
-            .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be focusable`);
+            .withContext(`Expected <${el.nodeName} tabindex="0"> to be focusable`).toBe(true);
         });
       });
 
@@ -339,7 +344,7 @@ describe('InteractivityChecker', () => {
 
         elements.forEach(el => {
           expect(checker.isTabbable(el))
-            .toBe(false, `Expected <${el.nodeName} tabindex="-1"> not to be tabbable`);
+            .withContext(`Expected <${el.nodeName} tabindex="-1"> not to be tabbable`).toBe(false);
         });
       });
 
@@ -355,7 +360,7 @@ describe('InteractivityChecker', () => {
 
         elements.forEach(el => {
           expect(checker.isTabbable(el))
-            .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be tabbable`);
+            .withContext(`Expected <${el.nodeName} tabindex="0"> to be tabbable`).toBe(true);
         });
       });
 
diff --git a/src/cdk/a11y/key-manager/list-key-manager.spec.ts b/src/cdk/a11y/key-manager/list-key-manager.spec.ts
index d6ebda9b405e..194dc9f67e59 100644
--- a/src/cdk/a11y/key-manager/list-key-manager.spec.ts
+++ b/src/cdk/a11y/key-manager/list-key-manager.spec.ts
@@ -153,11 +153,13 @@ describe('Key managers', () => {
       it('should activate the first item when pressing down on a clean key manager', () => {
         keyManager = new ListKeyManager<FakeFocusable>(itemList);
 
-        expect(keyManager.activeItemIndex).toBe(-1, 'Expected active index to default to -1.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected active index to default to -1.').toBe(-1);
 
         keyManager.onKeydown(fakeKeyEvents.downArrow);
 
-        expect(keyManager.activeItemIndex).toBe(0, 'Expected first item to become active.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected first item to become active.').toBe(0);
       });
 
       it('should not prevent the default keyboard action when pressing tab', () => {
@@ -266,14 +268,14 @@ describe('Key managers', () => {
           keyManager.onKeydown(this.nextKeyEvent);
 
           expect(keyManager.activeItemIndex)
-              .toBe(1, 'Expected active item to be 1 after one next key event.');
+            .withContext('Expected active item to be 1 after one next key event.').toBe(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(2);
 
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(2, 'Expected active item to be 2 after two next key events.');
+            .withContext('Expected active item to be 2 after two next key events.').toBe(2);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(2);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
         });
@@ -283,7 +285,8 @@ describe('Key managers', () => {
           keyManager.onKeydown(this.nextKeyEvent);
 
           expect(keyManager.activeItemIndex)
-              .toBe(0, 'Expected active item to be 0 after next key if active item was null.');
+            .withContext('Expected active item to be 0 after next key if active item was null.')
+            .toBe(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(2);
@@ -293,13 +296,14 @@ describe('Key managers', () => {
           keyManager.onKeydown(this.nextKeyEvent);
 
           expect(keyManager.activeItemIndex)
-              .toBe(1, 'Expected active item to be 1 after one next key event.');
+            .withContext('Expected active item to be 1 after one next key event.').toBe(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(1);
 
           keyManager.onKeydown(this.prevKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(0, 'Expected active item to be 0 after one next and one previous key event.');
+            .withContext('Expected active item to be 0 after one next and one previous key event.')
+            .toBe(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(0);
         });
 
@@ -308,7 +312,8 @@ describe('Key managers', () => {
           keyManager.onKeydown(this.prevKeyEvent);
 
           expect(keyManager.activeItemIndex)
-              .toBe(-1, 'Expected nothing to happen if prev event occurs and no active item.');
+            .withContext('Expected nothing to happen if prev event occurs and no active item.')
+            .toBe(-1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(2);
@@ -322,7 +327,7 @@ describe('Key managers', () => {
           // Next event should skip past disabled item from 0 to 2
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(2, 'Expected active item to skip past disabled item on next event.');
+            .withContext('Expected active item to skip past disabled item on next event.').toBe(2);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(1);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(2);
@@ -330,7 +335,7 @@ describe('Key managers', () => {
           // Previous event should skip past disabled item from 2 to 0
           keyManager.onKeydown(this.prevKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(0, 'Expected active item to skip past disabled item on up arrow.');
+            .withContext('Expected active item to skip past disabled item on up arrow.').toBe(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(1);
         });
@@ -344,14 +349,16 @@ describe('Key managers', () => {
 
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(1, 'Expected active item to be 1 after one next event when disabled not set.');
+            .withContext('Expected active item to be 1 after one next event when disabled not set.')
+            .toBe(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(2);
 
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(2, 'Expected active item to be 2 after two next events when disabled not set.');
+            .withContext('Expected active item to be 2 after two next events when ' +
+                         'disabled not set.').toBe(2);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
           expect(keyManager.setActiveItem).toHaveBeenCalledWith(2);
         });
@@ -360,22 +367,22 @@ describe('Key managers', () => {
           keyManager.onKeydown(this.nextKeyEvent);
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(2, `Expected last item of the list to be active.`);
+            .withContext(`Expected last item of the list to be active.`).toBe(2);
 
           // This next event would move active item past the end of the list
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(2, `Expected active item to remain at the end of the list.`);
+            .withContext(`Expected active item to remain at the end of the list.`).toBe(2);
 
           keyManager.onKeydown(this.prevKeyEvent);
           keyManager.onKeydown(this.prevKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(0, `Expected first item of the list to be active.`);
+            .withContext(`Expected first item of the list to be active.`).toBe(0);
 
           // This prev event would move active item past the beginning of the list
           keyManager.onKeydown(this.prevKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(0, `Expected active item to remain at the beginning of the list.`);
+            .withContext(`Expected active item to remain at the beginning of the list.`).toBe(0);
         });
 
         it('should not move active item to end when the last item is disabled', () => {
@@ -385,12 +392,12 @@ describe('Key managers', () => {
 
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(1, `Expected second item of the list to be active.`);
+            .withContext(`Expected second item of the list to be active.`).toBe(1);
 
           // This next key event would set active item to the last item, which is disabled
           keyManager.onKeydown(this.nextKeyEvent);
           expect(keyManager.activeItemIndex)
-              .toBe(1, `Expected the second item to remain active.`);
+            .withContext(`Expected the second item to remain active.`).toBe(1);
           expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(2);
         });
 
@@ -456,20 +463,21 @@ describe('Key managers', () => {
 
       it('should setActiveItem()', () => {
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+          .withContext(`Expected first item of the list to be active.`).toBe(0);
 
         keyManager.setActiveItem(1);
         expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected activeItemIndex to be updated when setActiveItem() was called.`);
+          .withContext(`Expected activeItemIndex to be updated when setActiveItem() was called.`)
+          .toBe(1);
       });
 
       it('should be able to set the active item by reference', () => {
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+          .withContext(`Expected first item of the list to be active.`).toBe(0);
 
         keyManager.setActiveItem(itemList.toArray()[2]);
         expect(keyManager.activeItemIndex)
-            .toBe(2, `Expected activeItemIndex to be updated.`);
+          .withContext(`Expected activeItemIndex to be updated.`).toBe(2);
       });
 
       it('should be able to set the active item without emitting an event', () => {
@@ -489,26 +497,31 @@ describe('Key managers', () => {
       it('should expose the active item correctly', () => {
         keyManager.onKeydown(fakeKeyEvents.downArrow);
 
-        expect(keyManager.activeItemIndex).toBe(1, 'Expected active item to be the second option.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected active item to be the second option.').toBe(1);
         expect(keyManager.activeItem)
-            .toBe(itemList.toArray()[1], 'Expected the active item to match the second option.');
+          .withContext('Expected the active item to match the second option.')
+          .toBe(itemList.toArray()[1]);
 
 
         keyManager.onKeydown(fakeKeyEvents.downArrow);
-        expect(keyManager.activeItemIndex).toBe(2, 'Expected active item to be the third option.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected active item to be the third option.').toBe(2);
         expect(keyManager.activeItem)
-            .toBe(itemList.toArray()[2], 'Expected the active item ID to match the third option.');
+          .withContext('Expected the active item ID to match the third option.')
+          .toBe(itemList.toArray()[2]);
       });
 
       it('should setFirstItemActive()', () => {
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         expect(keyManager.activeItemIndex)
-            .toBe(2, `Expected last item of the list to be active.`);
+          .withContext(`Expected last item of the list to be active.`).toBe(2);
 
         keyManager.setFirstItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected setFirstItemActive() to set the active item to the first item.`);
+          .withContext(`Expected setFirstItemActive() to set the active item to the first item.`)
+          .toBe(0);
       });
 
       it('should set the active item to the second item if the first one is disabled', () => {
@@ -518,16 +531,17 @@ describe('Key managers', () => {
 
         keyManager.setFirstItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected the second item to be active if the first was disabled.`);
+          .withContext(`Expected the second item to be active if the first was disabled.`).toBe(1);
       });
 
       it('should setLastItemActive()', () => {
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+          .withContext(`Expected first item of the list to be active.`).toBe(0);
 
         keyManager.setLastItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(2, `Expected setLastItemActive() to set the active item to the last item.`);
+          .withContext(`Expected setLastItemActive() to set the active item to the last item.`)
+          .toBe(2);
       });
 
       it('should set the active item to the second to last item if the last is disabled', () => {
@@ -537,16 +551,18 @@ describe('Key managers', () => {
 
         keyManager.setLastItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected the second to last item to be active if the last was disabled.`);
+          .withContext(`Expected the second to last item to be active if the last was disabled.`)
+          .toBe(1);
       });
 
       it('should setNextItemActive()', () => {
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+          .withContext(`Expected first item of the list to be active.`).toBe(0);
 
         keyManager.setNextItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected setNextItemActive() to set the active item to the next item.`);
+          .withContext(`Expected setNextItemActive() to set the active item to the next item.`)
+          .toBe(1);
       });
 
       it('should set the active item to the next enabled item if next is disabled', () => {
@@ -555,21 +571,22 @@ describe('Key managers', () => {
         itemList.reset(items);
 
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+          .withContext(`Expected first item of the list to be active.`).toBe(0);
 
         keyManager.setNextItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(2, `Expected setNextItemActive() to only set enabled items as active.`);
+          .withContext(`Expected setNextItemActive() to only set enabled items as active.`).toBe(2);
       });
 
       it('should setPreviousItemActive()', () => {
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected second item of the list to be active.`);
+          .withContext(`Expected second item of the list to be active.`).toBe(1);
 
         keyManager.setPreviousItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected setPreviousItemActive() to set the active item to the previous.`);
+          .withContext(`Expected setPreviousItemActive() to set the active item to the previous.`)
+          .toBe(0);
       });
 
       it('should skip disabled items when setPreviousItemActive() is called', () => {
@@ -580,11 +597,11 @@ describe('Key managers', () => {
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         expect(keyManager.activeItemIndex)
-            .toBe(2, `Expected third item of the list to be active.`);
+          .withContext(`Expected third item of the list to be active.`).toBe(2);
 
         keyManager.setPreviousItemActive();
         expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected setPreviousItemActive() to skip the disabled item.`);
+          .withContext(`Expected setPreviousItemActive() to skip the disabled item.`).toBe(0);
       });
 
       it('should not emit an event if the item did not change', () => {
@@ -605,7 +622,8 @@ describe('Key managers', () => {
 
       it('should return itself to allow chaining', () => {
         expect(keyManager.withWrap())
-            .toEqual(keyManager, `Expected withWrap() to return an instance of ListKeyManager.`);
+          .withContext(`Expected withWrap() to return an instance of ListKeyManager.`)
+          .toEqual(keyManager);
       });
 
       it('should wrap focus when arrow keying past items while in wrap mode', () => {
@@ -613,15 +631,18 @@ describe('Key managers', () => {
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         keyManager.onKeydown(fakeKeyEvents.downArrow);
 
-        expect(keyManager.activeItemIndex).toBe(2, 'Expected last item to be active.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected last item to be active.').toBe(2);
 
         // this down arrow moves down past the end of the list
         keyManager.onKeydown(fakeKeyEvents.downArrow);
-        expect(keyManager.activeItemIndex).toBe(0, 'Expected active item to wrap to beginning.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected active item to wrap to beginning.').toBe(0);
 
         // this up arrow moves up past the beginning of the list
         keyManager.onKeydown(fakeKeyEvents.upArrow);
-        expect(keyManager.activeItemIndex).toBe(2, 'Expected active item to wrap to end.');
+        expect(keyManager.activeItemIndex)
+          .withContext('Expected active item to wrap to end.').toBe(2);
       });
 
       it('should set last item active when up arrow is pressed if no active item', () => {
@@ -630,13 +651,13 @@ describe('Key managers', () => {
         keyManager.onKeydown(fakeKeyEvents.upArrow);
 
         expect(keyManager.activeItemIndex)
-            .toBe(2, 'Expected last item to be active on up arrow if no active item.');
+          .withContext('Expected last item to be active on up arrow if no active item.').toBe(2);
         expect(keyManager.setActiveItem).not.toHaveBeenCalledWith(0);
         expect(keyManager.setActiveItem).toHaveBeenCalledWith(2);
 
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         expect(keyManager.activeItemIndex)
-            .toBe(0, 'Expected active item to be 0 after wrapping back to beginning.');
+          .withContext('Expected active item to be 0 after wrapping back to beginning.').toBe(0);
         expect(keyManager.setActiveItem).toHaveBeenCalledWith(0);
       });
 
@@ -937,11 +958,12 @@ describe('Key managers', () => {
 
     it('should allow setting the focused item without calling focus', () => {
       expect(keyManager.activeItemIndex)
-          .toBe(0, `Expected first item of the list to be active.`);
+        .withContext(`Expected first item of the list to be active.`).toBe(0);
 
       keyManager.updateActiveItem(1);
       expect(keyManager.activeItemIndex)
-          .toBe(1, `Expected activeItemIndex to update after calling updateActiveItem().`);
+        .withContext(`Expected activeItemIndex to update after calling updateActiveItem().`)
+        .toBe(1);
       expect(itemList.toArray()[1].focus).not.toHaveBeenCalledTimes(1);
     });
 
diff --git a/src/cdk/a11y/live-announcer/live-announcer.spec.ts b/src/cdk/a11y/live-announcer/live-announcer.spec.ts
index 86b886cdd11f..750ebf4eb73a 100644
--- a/src/cdk/a11y/live-announcer/live-announcer.spec.ts
+++ b/src/cdk/a11y/live-announcer/live-announcer.spec.ts
@@ -102,7 +102,8 @@ describe('LiveAnnouncer', () => {
       announcer.ngOnDestroy();
 
       expect(document.body.querySelector('.cdk-live-announcer-element'))
-          .toBeFalsy('Expected that the aria-live element was remove from the DOM.');
+        .withContext('Expected that the aria-live element was remove from the DOM.')
+        .toBeFalsy();
     }));
 
     it('should return a promise that resolves after the text has been announced', fakeAsync(() => {
@@ -137,7 +138,8 @@ describe('LiveAnnouncer', () => {
       tick(100);
 
       expect(document.body.querySelectorAll('.cdk-live-announcer-element').length)
-          .toBe(1, 'Expected only one live announcer element in the DOM.');
+        .withContext('Expected only one live announcer element in the DOM.')
+        .toBe(1);
 
       if (extraElement.parentNode) {
         extraElement.parentNode.removeChild(extraElement);
diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 35f0f9183011..9624ec94d7a8 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -330,9 +330,9 @@ describe('CdkDrag', () => {
           fixture.detectChanges();
 
           expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented)
-              .toBe(true, 'Expected initial touchmove to be prevented.');
+            .withContext('Expected initial touchmove to be prevented.').toBe(true);
           expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented)
-              .toBe(true, 'Expected subsequent touchmose to be prevented.');
+            .withContext('Expected subsequent touchmose to be prevented.').toBe(true);
 
           dispatchTouchEvent(document, 'touchend');
           fixture.detectChanges();
@@ -1057,7 +1057,9 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       startDraggingViaMouse(fixture, dragElement);
       currentTime += 750;
@@ -1066,7 +1068,8 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
 
       expect(dragElement.style.transform)
-          .toBeFalsy('Expected element not to be moved if the mouse moved before the delay.');
+        .withContext('Expected element not to be moved if the mouse moved before the delay.')
+        .toBeFalsy();
     }));
 
     it('should enable native drag interactions if mouse moves before the delay', fakeAsync(() => {
@@ -1080,7 +1083,9 @@ describe('CdkDrag', () => {
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
       const styles = dragElement.style;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       startDraggingViaMouse(fixture, dragElement);
       currentTime += 750;
@@ -1101,7 +1106,9 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       dispatchMouseEvent(dragElement, 'mousedown');
       fixture.detectChanges();
@@ -1112,8 +1119,9 @@ describe('CdkDrag', () => {
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)',
-          'Expected element to be dragged after all the time has passed.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element to be dragged after all the time has passed.')
+        .toBe('translate3d(50px, 100px, 0px)');
     }));
 
     it('should not prevent the default touch action before the delay has elapsed', fakeAsync(() => {
@@ -1125,7 +1133,9 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       dispatchTouchEvent(dragElement, 'touchstart');
       fixture.detectChanges();
@@ -1144,7 +1154,9 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       dispatchMouseEvent(dragElement, 'mousedown');
       fixture.detectChanges();
@@ -1155,8 +1167,9 @@ describe('CdkDrag', () => {
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)',
-          'Expected element to be dragged after all the time has passed.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element to be dragged after all the time has passed.')
+        .toBe('translate3d(50px, 100px, 0px)');
     }));
 
     it('should be able to configure the drag start delay based on the event type', fakeAsync(() => {
@@ -1169,15 +1182,19 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element not to be moved by default.')
+        .toBeFalsy();
 
       dragElementViaTouch(fixture, dragElement, 50, 100);
       expect(dragElement.style.transform)
-          .toBeFalsy('Expected element not to be moved via touch because it has a delay.');
+          .withContext('Expected element not to be moved via touch because it has a delay.')
+          .toBeFalsy();
 
       dragElementViaMouse(fixture, dragElement, 50, 100);
-      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)',
-          'Expected element to be moved via mouse because it has no delay.');
+      expect(dragElement.style.transform)
+        .withContext('Expected element to be moved via mouse because it has no delay.')
+        .toBe('translate3d(50px, 100px, 0px)');
     }));
 
     it('should be able to get the current position', fakeAsync(() => {
@@ -1480,11 +1497,13 @@ describe('CdkDrag', () => {
       dragElementViaMouse(fixture, dragElement, 50, 100);
 
       expect(dragElement.style.transform)
-          .toBeFalsy('Expected not to be able to drag the element by itself.');
+          .withContext('Expected not to be able to drag the element by itself.')
+          .toBeFalsy();
 
       dragElementViaMouse(fixture, handle, 50, 100);
       expect(dragElement.style.transform)
-          .toBe('translate3d(50px, 100px, 0px)', 'Expected to drag the element by its handle.');
+        .withContext('Expected to drag the element by its handle.')
+        .toBe('translate3d(50px, 100px, 0px)');
     }));
 
     it('should disable the tap highlight while dragging via the handle', fakeAsync(() => {
@@ -2173,38 +2192,54 @@ describe('CdkDrag', () => {
       const previewRect = preview.getBoundingClientRect();
       const zeroPxRegex = /^0(px)?$/;
 
-      expect(item.parentNode).toBe(document.body, 'Expected element to be moved out into the body');
-      expect(item.style.position).toBe('fixed', 'Expected element to be removed from layout');
+      expect(item.parentNode)
+        .withContext('Expected element to be moved out into the body').toBe(document.body);
+      expect(item.style.position)
+        .withContext('Expected element to be removed from layout').toBe('fixed');
       expect(item.style.getPropertyPriority('position'))
-          .toBe('important', 'Expect element position to be !important');
+        .withContext('Expect element position to be !important').toBe('important');
       // Use a regex here since some browsers normalize 0 to 0px, but others don't.
-      expect(item.style.top).toMatch(zeroPxRegex, 'Expected element to be removed from layout');
-      expect(item.style.left).toBe('-999em', 'Expected element to be removed from layout');
-      expect(item.style.opacity).toBe('0', 'Expected element to be invisible');
-      expect(preview).toBeTruthy('Expected preview to be in the DOM');
+      // Use a regex here since some browsers normalize 0 to 0px, but others don't.
+expect(item.style.top)
+  .withContext('Expected element to be removed from layout').toMatch(zeroPxRegex);
+      expect(item.style.left)
+        .withContext('Expected element to be removed from layout').toBe('-999em');
+      expect(item.style.opacity)
+        .withContext('Expected element to be invisible').toBe('0');
+      expect(preview).withContext('Expected preview to be in the DOM').toBeTruthy();
       expect(preview.textContent!.trim())
-          .toContain('One', 'Expected preview content to match element');
+        .withContext('Expected preview content to match element').toContain('One');
       expect(preview.getAttribute('dir'))
-          .toBe('ltr', 'Expected preview element to inherit the directionality.');
-      expect(previewRect.width).toBe(itemRect.width, 'Expected preview width to match element');
-      expect(previewRect.height).toBe(itemRect.height, 'Expected preview height to match element');
+        .withContext('Expected preview element to inherit the directionality.').toBe('ltr');
+      expect(previewRect.width)
+        .withContext('Expected preview width to match element').toBe(itemRect.width);
+      expect(previewRect.height)
+        .withContext('Expected preview height to match element').toBe(itemRect.height);
       expect(preview.style.pointerEvents)
-          .toBe('none', 'Expected pointer events to be disabled on the preview');
-      expect(preview.style.zIndex).toBe('1000', 'Expected preview to have a high default zIndex.');
+        .withContext('Expected pointer events to be disabled on the preview').toBe('none');
+      expect(preview.style.zIndex)
+        .withContext('Expected preview to have a high default zIndex.').toBe('1000');
+      // Use a regex here since some browsers normalize 0 to 0px, but others don't.
       // Use a regex here since some browsers normalize 0 to 0px, but others don't.
-      expect(preview.style.margin).toMatch(zeroPxRegex, 'Expected the preview margin to be reset.');
+      expect(preview.style.margin)
+        .withContext('Expected the preview margin to be reset.').toMatch(zeroPxRegex);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
       flush();
 
       expect(item.parentNode)
-          .toBe(initialParent, 'Expected element to be moved back into its old parent');
-      expect(item.style.position).toBeFalsy('Expected element to be within the layout');
-      expect(item.style.top).toBeFalsy('Expected element to be within the layout');
-      expect(item.style.left).toBeFalsy('Expected element to be within the layout');
-      expect(item.style.opacity).toBeFalsy('Expected element to be visible');
-      expect(preview.parentNode).toBeFalsy('Expected preview to be removed from the DOM');
+        .withContext('Expected element to be moved back into its old parent').toBe(initialParent);
+      expect(item.style.position)
+        .withContext('Expected element to be within the layout').toBeFalsy();
+      expect(item.style.top)
+        .withContext('Expected element to be within the layout').toBeFalsy();
+      expect(item.style.left)
+        .withContext('Expected element to be within the layout').toBeFalsy();
+      expect(item.style.opacity)
+        .withContext('Expected element to be visible').toBeFalsy();
+      expect(preview.parentNode)
+        .withContext('Expected preview to be removed from the DOM').toBeFalsy();
     }));
 
     it('should be able to configure the preview z-index', fakeAsync(() => {
@@ -2429,17 +2464,20 @@ describe('CdkDrag', () => {
       const sourceCanvas = item.querySelector('canvas') as HTMLCanvasElement;
 
       // via https://stackoverflow.com/a/17386803/2204158
-      expect(sourceCanvas.getContext('2d')!
-        .getImageData(0, 0, sourceCanvas.width, sourceCanvas.height)
-        .data.some(channel => channel !== 0)).toBe(true, 'Expected source canvas to have data.');
+      // via https://stackoverflow.com/a/17386803/2204158
+expect(sourceCanvas.getContext('2d')!
+    .getImageData(0, 0, sourceCanvas.width, sourceCanvas.height)
+    .data.some(channel => channel !== 0))
+      .withContext('Expected source canvas to have data.').toBe(true);
 
       startDraggingViaMouse(fixture, item);
 
       const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
       const previewCanvas = preview.querySelector('canvas')!;
 
-      expect(previewCanvas.toDataURL()).toBe(sourceCanvas.toDataURL(),
-          'Expected cloned canvas to have the same content as the source.');
+      expect(previewCanvas.toDataURL())
+        .withContext('Expected cloned canvas to have the same content as the source.')
+        .toBe(sourceCanvas.toDataURL());
     }));
 
     it('should not throw when cloning an invalid canvas', fakeAsync(() => {
@@ -2508,7 +2546,8 @@ describe('CdkDrag', () => {
       tick(0);
 
       expect(sourceRadioInput.checked)
-        .toBeTruthy('Expected original radio input has preserved its original checked state');
+        .withContext('Expected original radio input has preserved its original checked state')
+        .toBeTruthy();
     }));
 
     it('should clear the ids from descendants of the preview', fakeAsync(() => {
@@ -2548,7 +2587,7 @@ describe('CdkDrag', () => {
       startDraggingViaMouse(fixture, item);
 
       expect(document.querySelector('.cdk-drag-preview')!.getAttribute('dir'))
-          .toBe('rtl', 'Expected preview element to inherit the directionality.');
+        .withContext('Expected preview element to inherit the directionality.').toBe('rtl');
     }));
 
     it('should remove the preview if its `transitionend` event timed out', fakeAsync(() => {
@@ -2572,12 +2611,14 @@ describe('CdkDrag', () => {
       tick(250);
 
       expect(preview.parentNode)
-          .toBeTruthy('Expected preview to be in the DOM mid-way through the transition');
+        .withContext('Expected preview to be in the DOM mid-way through the transition')
+        .toBeTruthy();
 
       tick(500);
 
       expect(preview.parentNode)
-          .toBeFalsy('Expected preview to be removed from the DOM if the transition timed out');
+        .withContext('Expected preview to be removed from the DOM if the transition timed out')
+        .toBeFalsy();
     }));
 
     it('should be able to set a single class on a preview', fakeAsync(() => {
@@ -2689,7 +2730,8 @@ describe('CdkDrag', () => {
       tick(0);
 
       expect(preview.parentNode)
-          .toBeFalsy('Expected preview to be removed from the DOM immediately');
+          .withContext('Expected preview to be removed from the DOM immediately')
+          .toBeFalsy();
     }));
 
     it('should pick out the `transform` duration if multiple properties are being transitioned',
@@ -2711,12 +2753,14 @@ describe('CdkDrag', () => {
         tick(500);
 
         expect(preview.parentNode)
-            .toBeTruthy('Expected preview to be in the DOM at the end of the opacity transition');
+            .withContext('Expected preview to be in the DOM at the end of the opacity transition')
+            .toBeTruthy();
 
         tick(1000);
 
-        expect(preview.parentNode).toBeFalsy(
-            'Expected preview to be removed from the DOM at the end of the transform transition');
+        expect(preview.parentNode)
+          .withContext('Expected preview to be removed from the DOM at the end of the ' +
+                       'transform transition').toBeFalsy();
       }));
 
     it('should create a placeholder element while the item is dragged', fakeAsync(() => {
@@ -2729,17 +2773,20 @@ describe('CdkDrag', () => {
 
       const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
 
-      expect(placeholder).toBeTruthy('Expected placeholder to be in the DOM');
+      expect(placeholder).withContext('Expected placeholder to be in the DOM').toBeTruthy();
       expect(placeholder.parentNode)
-          .toBe(initialParent, 'Expected placeholder to be inserted into the same parent');
+        .withContext('Expected placeholder to be inserted into the same parent')
+        .toBe(initialParent);
       expect(placeholder.textContent!.trim())
-          .toContain('One', 'Expected placeholder content to match element');
+        .withContext('Expected placeholder content to match element').toContain('One');
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
       flush();
 
-      expect(placeholder.parentNode).toBeFalsy('Expected placeholder to be removed from the DOM');
+      expect(placeholder.parentNode)
+        .withContext('Expected placeholder to be removed from the DOM')
+        .toBeFalsy();
     }));
 
     it('should insert the preview into the `body` if previewContainer is set to `global`',
@@ -3166,13 +3213,13 @@ describe('CdkDrag', () => {
       dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop);
       fixture.detectChanges();
       expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim()))
-          .toEqual(['One', 'Zero', 'Two', 'Three'], 'Expected position to swap.');
+        .withContext('Expected position to swap.').toEqual(['One', 'Zero', 'Two', 'Three']);
 
       // Move down a further 1px.
       dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop + 1);
       fixture.detectChanges();
       expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim()))
-          .toEqual(['One', 'Zero', 'Two', 'Three'], 'Expected positions not to swap.');
+        .withContext('Expected positions not to swap.').toEqual(['One', 'Zero', 'Two', 'Three']);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -3205,13 +3252,13 @@ describe('CdkDrag', () => {
       dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop);
       fixture.detectChanges();
       expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim()))
-          .toEqual(['One', 'Zero', 'Two', 'Three'], 'Expected position to swap.');
+        .withContext('Expected position to swap.').toEqual(['One', 'Zero', 'Two', 'Three']);
 
       // Move up 10px.
       dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop - 10);
       fixture.detectChanges();
       expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim()))
-          .toEqual(['Zero', 'One', 'Two', 'Three'], 'Expected positions to swap again.');
+        .withContext('Expected positions to swap again.').toEqual(['Zero', 'One', 'Two', 'Three']);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -3269,13 +3316,15 @@ describe('CdkDrag', () => {
 
       const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
 
-      expect(preview.parentNode).toBeTruthy('Expected preview to be in the DOM');
-      expect(item.parentNode).toBeTruthy('Expected drag item to be in the DOM');
+      expect(preview.parentNode).withContext('Expected preview to be in the DOM').toBeTruthy();
+      expect(item.parentNode).withContext('Expected drag item to be in the DOM').toBeTruthy();
 
       fixture.destroy();
 
-      expect(preview.parentNode).toBeFalsy('Expected preview to be removed from the DOM');
-      expect(item.parentNode).toBeFalsy('Expected drag item to be removed from the DOM');
+      expect(preview.parentNode)
+        .withContext('Expected preview to be removed from the DOM').toBeFalsy();
+      expect(item.parentNode)
+        .withContext('Expected drag item to be removed from the DOM').toBeFalsy();
     }));
 
     it('should be able to customize the preview element', fakeAsync(() => {
@@ -3368,7 +3417,8 @@ describe('CdkDrag', () => {
         const dragContainer = fixture.componentInstance.dropInstance.element.nativeElement;
         const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
 
-        expect(dragContainer.contains(item)).toBe(true, 'Expected item to be in container.');
+        expect(dragContainer.contains(item))
+          .withContext('Expected item to be in container.').toBe(true);
 
         // The coordinates don't matter.
         dragElementViaMouse(fixture, item, 10, 10);
@@ -3376,7 +3426,7 @@ describe('CdkDrag', () => {
         fixture.detectChanges();
 
         expect(dragContainer.contains(item))
-            .toBe(true, 'Expected item to be returned to container.');
+          .withContext('Expected item to be returned to container.').toBe(true);
       }));
 
     it('should position custom previews next to the pointer', fakeAsync(() => {
@@ -3774,7 +3824,7 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
 
       expect(getElementIndexByPosition(placeholder, 'top'))
-          .toBe(0, 'Expected placeholder to stay in place.');
+        .withContext('Expected placeholder to stay in place.').toBe(0);
 
       dispatchMouseEvent(document, 'mouseup', targetX, targetY);
       fixture.detectChanges();
@@ -3834,12 +3884,12 @@ describe('CdkDrag', () => {
         startDraggingViaMouse(fixture, item.element.nativeElement);
 
         expect(document.querySelectorAll('.cdk-drag-dragging').length)
-            .toBe(1, 'Expected one item to be dragged initially.');
+          .withContext('Expected one item to be dragged initially.').toBe(1);
 
         startDraggingViaMouse(fixture, otherItem.element.nativeElement);
 
         expect(document.querySelectorAll('.cdk-drag-dragging').length)
-            .toBe(1, 'Expected only one item to continue to be dragged.');
+          .withContext('Expected only one item to continue to be dragged.').toBe(1);
       }));
 
     it('should should be able to disable auto-scrolling', fakeAsync(() => {
@@ -4249,8 +4299,8 @@ describe('CdkDrag', () => {
       startDraggingViaMouse(fixture, dragItems.first.element.nativeElement);
       fixture.detectChanges();
 
-      expect(innerClasses).toContain(draggingClass,
-          'Expected inner list to be dragging.');
+      expect(innerClasses)
+        .withContext('Expected inner list to be dragging.').toContain(draggingClass);
       expect(outerClasses).not.toContain(draggingClass,
           'Expected outer list to not be dragging.');
     }));
@@ -4377,7 +4427,8 @@ describe('CdkDrag', () => {
       let item = fixture.componentInstance.dragItems.first;
       startDraggingViaMouse(fixture, item.element.nativeElement);
       expect(document.querySelector('.cdk-drop-list-dragging'))
-          .toBeTruthy('Expected to drag initially.');
+        .withContext('Expected to drag initially.')
+        .toBeTruthy();
 
       fixture.componentInstance.items = [
         {value: 'Five', height: ITEM_HEIGHT, margin: 0},
@@ -4387,13 +4438,15 @@ describe('CdkDrag', () => {
 
       expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled();
       expect(document.querySelector('.cdk-drop-list-dragging'))
-          .toBeFalsy('Expected not to be dragging after item is destroyed.');
+        .withContext('Expected not to be dragging after item is destroyed.')
+        .toBeFalsy();
 
       item = fixture.componentInstance.dragItems.first;
       startDraggingViaMouse(fixture, item.element.nativeElement);
 
       expect(document.querySelector('.cdk-drop-list-dragging'))
-          .toBeTruthy('Expected to be able to start a new drag sequence.');
+        .withContext('Expected to be able to start a new drag sequence.')
+        .toBeTruthy();
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -4494,32 +4547,32 @@ describe('CdkDrag', () => {
       const preview = document.querySelector('.cdk-drag-preview') as HTMLElement;
       const placeholder = fixture.nativeElement.querySelector('.cdk-drag-placeholder');
 
-      expect(items.every(hasInitialTransform)).toBe(true,
-        'Expected items to preserve transform when dragging starts.');
-      expect(hasInitialTransform(preview)).toBe(true,
-        'Expected preview to preserve transform when dragging starts.');
-      expect(hasInitialTransform(placeholder)).toBe(true,
-        'Expected placeholder to preserve transform when dragging starts.');
+      expect(items.every(hasInitialTransform))
+        .withContext('Expected items to preserve transform when dragging starts.').toBe(true);
+      expect(hasInitialTransform(preview))
+        .withContext('Expected preview to preserve transform when dragging starts.').toBe(true);
+      expect(hasInitialTransform(placeholder))
+        .withContext('Expected placeholder to preserve transform when dragging starts.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1);
       fixture.detectChanges();
-      expect(items.every(hasInitialTransform)).toBe(true,
-        'Expected items to preserve transform while dragging.');
-      expect(hasInitialTransform(preview)).toBe(true,
-        'Expected preview to preserve transform while dragging.');
-      expect(hasInitialTransform(placeholder)).toBe(true,
-        'Expected placeholder to preserve transform while dragging.');
+      expect(items.every(hasInitialTransform))
+        .withContext('Expected items to preserve transform while dragging.').toBe(true);
+      expect(hasInitialTransform(preview))
+        .withContext('Expected preview to preserve transform while dragging.').toBe(true);
+      expect(hasInitialTransform(placeholder))
+        .withContext('Expected placeholder to preserve transform while dragging.').toBe(true);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(items.every(hasInitialTransform)).toBe(true,
-        'Expected items to preserve transform when dragging stops.');
-      expect(hasInitialTransform(preview)).toBe(true,
-        'Expected preview to preserve transform when dragging stops.');
-      expect(hasInitialTransform(placeholder)).toBe(true,
-         'Expected placeholder to preserve transform when dragging stops.');
+      expect(items.every(hasInitialTransform))
+        .withContext('Expected items to preserve transform when dragging stops.').toBe(true);
+      expect(hasInitialTransform(preview))
+        .withContext('Expected preview to preserve transform when dragging stops.').toBe(true);
+      expect(hasInitialTransform(placeholder))
+        .withContext('Expected placeholder to preserve transform when dragging stops.').toBe(true);
     }));
 
   });
@@ -4571,19 +4624,19 @@ describe('CdkDrag', () => {
 
       expect(placeholder).toBeTruthy();
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside the first container.');
+        .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
       fixture.detectChanges();
 
       expect(dropZones[1].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside second container.');
+        .withContext('Expected placeholder to be inside second container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1);
       fixture.detectChanges();
 
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be back inside first container.');
+        .withContext('Expected placeholder to be back inside first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -4611,19 +4664,19 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be back inside first container.');
+          .withContext('Expected placeholder to be back inside first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mouseup');
         fixture.detectChanges();
@@ -4786,19 +4839,19 @@ describe('CdkDrag', () => {
       expect(placeholder).toBeTruthy();
 
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside the first container.');
+        .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
       fixture.detectChanges();
 
       expect(dropZones[1].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside second container.');
+        .withContext('Expected placeholder to be inside second container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1);
       fixture.detectChanges();
 
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be back inside first container.');
+        .withContext('Expected placeholder to be back inside first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -4831,12 +4884,13 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
 
       expect(targetElement.previousSibling === placeholder)
-          .toBe(true, 'Expected placeholder to be inside second container before last item.');
+        .withContext('Expected placeholder to be inside second container before last item.')
+        .toBe(true);
 
       // Update target rect
       targetRect = targetElement.getBoundingClientRect();
       expect(initialTargetZoneRect.bottom <= targetRect.top)
-        .toBe(true, 'Expected target rect to be outside of initial target zone rect');
+        .withContext('Expected target rect to be outside of initial target zone rect').toBe(true);
 
         // Swap with target
       dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.bottom - 1);
@@ -4885,13 +4939,13 @@ describe('CdkDrag', () => {
       expect(placeholder).toBeTruthy();
 
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside the first container.');
+        .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top);
       fixture.detectChanges();
 
       expect(dropZones[1].firstElementChild === placeholder)
-          .toBe(true, 'Expected placeholder to be first child inside second container.');
+        .withContext('Expected placeholder to be first child inside second container.').toBe(true);
 
       dispatchMouseEvent(document, 'mouseup');
     }));
@@ -4922,13 +4976,13 @@ describe('CdkDrag', () => {
       expect(placeholder).toBeTruthy();
 
       expect(dropZones[0].contains(placeholder))
-          .toBe(true, 'Expected placeholder to be inside the first container.');
+        .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
       dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top);
       fixture.detectChanges();
 
       expect(dropZones[1].lastChild === placeholder)
-          .toBe(true, 'Expected placeholder to be last child inside second container.');
+        .withContext('Expected placeholder to be last child inside second container.').toBe(true);
 
       dispatchMouseEvent(document, 'mouseup');
     }));
@@ -5072,10 +5126,11 @@ describe('CdkDrag', () => {
       const dropContainers = fixture.componentInstance.dropInstances
           .map(drop => drop.element.nativeElement);
 
-      expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
-          'Expected DOM element to be in first container');
-      expect(item.dropContainer).toBe(fixture.componentInstance.dropInstances.first,
-          'Expected CdkDrag to be in first container in memory');
+      expect(dropContainers[0].contains(item.element.nativeElement))
+        .withContext('Expected DOM element to be in first container').toBe(true);
+      expect(item.dropContainer)
+        .withContext('Expected CdkDrag to be in first container in memory')
+        .toBe(fixture.componentInstance.dropInstances.first);
 
       dragElementViaMouse(fixture, item.element.nativeElement,
           targetRect.left + 1, targetRect.top + 1);
@@ -5097,10 +5152,11 @@ describe('CdkDrag', () => {
         dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
       });
 
-      expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
-          'Expected DOM element to be returned to first container');
-      expect(item.dropContainer).toBe(fixture.componentInstance.dropInstances.first,
-          'Expected CdkDrag to be returned to first container in memory');
+      expect(dropContainers[0].contains(item.element.nativeElement))
+        .withContext('Expected DOM element to be returned to first container').toBe(true);
+      expect(item.dropContainer)
+        .withContext('Expected CdkDrag to be returned to first container in memory')
+        .toBe(fixture.componentInstance.dropInstances.first);
     }));
 
     it('should be able to return an element to its initial container in the same sequence, ' +
@@ -5126,19 +5182,19 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be back inside first container.');
+          .withContext('Expected placeholder to be back inside first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mouseup');
         fixture.detectChanges();
@@ -5205,7 +5261,7 @@ describe('CdkDrag', () => {
          const item = fixture.componentInstance.groupedDragItems[0][1];
 
          expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving')))
-             .toBe(true, 'Expected neither of the containers to have the class.');
+          .withContext('Expected neither of the containers to have the class.').toBe(true);
 
          startDraggingViaMouse(fixture, item.element.nativeElement);
          fixture.detectChanges();
@@ -5216,9 +5272,8 @@ describe('CdkDrag', () => {
                  'Expected source container not to have the receiving class.');
 
          expect(dropZones[1].classList)
-             .toContain(
-                 'cdk-drop-list-receiving',
-                 'Expected target container to have the receiving class.');
+          .withContext('Expected target container to have the receiving class.')
+          .toContain('cdk-drop-list-receiving');
        }));
 
     it('should toggle the `receiving` class when the item enters a new list', fakeAsync(() => {
@@ -5232,7 +5287,7 @@ describe('CdkDrag', () => {
          const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
 
          expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving')))
-             .toBe(true, 'Expected neither of the containers to have the class.');
+          .withContext('Expected neither of the containers to have the class.').toBe(true);
 
          startDraggingViaMouse(fixture, item.element.nativeElement);
 
@@ -5242,22 +5297,19 @@ describe('CdkDrag', () => {
                  'Expected source container not to have the receiving class.');
 
          expect(dropZones[1].classList)
-             .toContain(
-                 'cdk-drop-list-receiving',
-                 'Expected target container to have the receiving class.');
+          .withContext('Expected target container to have the receiving class.')
+          .toContain('cdk-drop-list-receiving');
 
          dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
          fixture.detectChanges();
 
          expect(dropZones[0].classList)
-             .toContain(
-                 'cdk-drop-list-receiving',
-                 'Expected old container to have the receiving class after exiting.');
+          .withContext('Expected old container to have the receiving class after exiting.')
+          .toContain('cdk-drop-list-receiving');
 
-         expect(dropZones[1].classList)
-             .not.toContain(
-                 'cdk-drop-list-receiving',
-                 'Expected new container not to have the receiving class after exiting.');
+         expect(dropZones[1].classList).not
+          .withContext('Expected new container not to have the receiving class after exiting.')
+          .toContain('cdk-drop-list-receiving');
        }));
 
     it('should not set the receiving class if the item does not match the enter predicate',
@@ -5271,13 +5323,13 @@ describe('CdkDrag', () => {
         const item = fixture.componentInstance.groupedDragItems[0][1];
 
         expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving')))
-            .toBe(true, 'Expected neither of the containers to have the class.');
+          .withContext('Expected neither of the containers to have the class.').toBe(true);
 
         startDraggingViaMouse(fixture, item.element.nativeElement);
         fixture.detectChanges();
 
         expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving')))
-            .toBe(true, 'Expected neither of the containers to have the class.');
+          .withContext('Expected neither of the containers to have the class.').toBe(true);
       }));
 
     it('should set the receiving class on the source container, even if the enter predicate ' +
@@ -5293,27 +5345,24 @@ describe('CdkDrag', () => {
         const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
 
         expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving')))
-            .toBe(true, 'Expected neither of the containers to have the class.');
+          .withContext('Expected neither of the containers to have the class.').toBe(true);
 
         startDraggingViaMouse(fixture, item.element.nativeElement);
 
-        expect(dropZones[0].classList)
-            .not.toContain(
-                'cdk-drop-list-receiving',
-                'Expected source container not to have the receiving class.');
+        expect(dropZones[0].classList).not
+          .withContext('Expected source container not to have the receiving class.')
+          .toContain('cdk-drop-list-receiving');
 
         expect(dropZones[1].classList)
-            .toContain(
-                'cdk-drop-list-receiving',
-                'Expected target container to have the receiving class.');
+          .withContext('Expected target container to have the receiving class.')
+          .toContain('cdk-drop-list-receiving');
 
         dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[0].classList)
-            .toContain(
-                'cdk-drop-list-receiving',
-                'Expected old container to have the receiving class after exiting.');
+          .withContext('Expected old container to have the receiving class after exiting.')
+          .toContain('cdk-drop-list-receiving');
 
         expect(dropZones[1].classList)
             .not.toContain(
@@ -5344,20 +5393,20 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove',
             intermediateRect.left + 1, intermediateRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', finalRect.left + 1, finalRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[2].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside third container.');
+          .withContext('Expected placeholder to be inside third container.').toBe(true);
 
         dispatchMouseEvent(document, 'mouseup');
         fixture.detectChanges();
@@ -5403,20 +5452,20 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove',
             intermediateRect.left + 1, intermediateRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
 
         dispatchMouseEvent(document, 'mousemove', finalRect.left + 1, finalRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to remain in the second container.');
+          .withContext('Expected placeholder to remain in the second container.').toBe(true);
 
         dispatchMouseEvent(document, 'mouseup');
         fixture.detectChanges();
@@ -5454,17 +5503,17 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(1, 'Expected placeholder to be at item index.');
+          .withContext('Expected placeholder to be at item index.').toBe(1);
 
         dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(3, 'Expected placeholder to be at the target index.');
+          .withContext('Expected placeholder to be at the target index.').toBe(3);
 
         const firstInitialSiblingRect = groups[0][0].element
             .nativeElement.getBoundingClientRect();
@@ -5475,9 +5524,9 @@ describe('CdkDrag', () => {
         fixture.detectChanges();
 
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be back inside first container.');
+          .withContext('Expected placeholder to be back inside first container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(1, 'Expected placeholder to be back at the initial index.');
+          .withContext('Expected placeholder to be back at the initial index.').toBe(1);
 
         dispatchMouseEvent(document, 'mouseup');
         fixture.detectChanges();
@@ -5503,17 +5552,17 @@ describe('CdkDrag', () => {
 
         expect(placeholder).toBeTruthy();
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside the first container.');
+          .withContext('Expected placeholder to be inside the first container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(1, 'Expected placeholder to be at item index.');
+          .withContext('Expected placeholder to be at item index.').toBe(1);
 
         dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
         fixture.detectChanges();
 
         expect(dropZones[1].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be inside second container.');
+          .withContext('Expected placeholder to be inside second container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(3, 'Expected placeholder to be at the target index.');
+          .withContext('Expected placeholder to be at the target index.').toBe(3);
 
         const nextTargetRect = groups[0][3].element.nativeElement.getBoundingClientRect();
 
@@ -5522,9 +5571,9 @@ describe('CdkDrag', () => {
         fixture.detectChanges();
 
         expect(dropZones[0].contains(placeholder))
-            .toBe(true, 'Expected placeholder to be back inside first container.');
+          .withContext('Expected placeholder to be back inside first container.').toBe(true);
         expect(getElementIndexByPosition(placeholder, 'top'))
-            .toBe(2, 'Expected placeholder to be at the index at which it entered.');
+          .withContext('Expected placeholder to be at the index at which it entered.').toBe(2);
       }));
 
     it('should toggle a class when dragging an item inside a wrapper component component ' +
@@ -5550,25 +5599,21 @@ describe('CdkDrag', () => {
          startDraggingViaMouse(fixture, item);
 
          expect(startZone.classList)
-             .toContain(
-                 'cdk-drop-list-dragging',
-                 'Expected start to have dragging class after dragging has started.');
-         expect(targetZone.classList)
-             .not.toContain(
-                 'cdk-drop-list-dragging',
-                 'Expected target not to have dragging class after dragging has started.');
+          .withContext('Expected start to have dragging class after dragging has started.')
+          .toContain('cdk-drop-list-dragging');
+         expect(targetZone.classList).not
+          .withContext('Expected target not to have dragging class after dragging has started.')
+          .toContain('cdk-drop-list-dragging');
 
          dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
          fixture.detectChanges();
 
-         expect(startZone.classList)
-             .not.toContain(
-                 'cdk-drop-list-dragging',
-                 'Expected start not to have dragging class once item has been moved over.');
+         expect(startZone.classList).not
+          .withContext('Expected start not to have dragging class once item has been moved over.')
+          .toContain('cdk-drop-list-dragging');
          expect(targetZone.classList)
-             .toContain(
-                 'cdk-drop-list-dragging',
-                 'Expected target to have dragging class once item has been moved over.');
+          .withContext('Expected target to have dragging class once item has been moved over.')
+          .toContain('cdk-drop-list-dragging');
        }));
 
     it('should dispatch an event when an item enters a new container', fakeAsync(() => {
@@ -5787,12 +5832,12 @@ describe('CdkDrag', () => {
         startDraggingViaMouse(fixture, item.element.nativeElement);
 
         expect(document.querySelectorAll('.cdk-drag-dragging').length)
-            .toBe(1, 'Expected one item to be dragged initially.');
+          .withContext('Expected one item to be dragged initially.').toBe(1);
 
         startDraggingViaMouse(fixture, itemInOtherList.element.nativeElement);
 
         expect(document.querySelectorAll('.cdk-drag-dragging').length)
-            .toBe(1, 'Expected only one item to continue to be dragged.');
+          .withContext('Expected only one item to continue to be dragged.').toBe(1);
       }));
 
     it('should insert the preview inside the shadow root by default', fakeAsync(() => {
diff --git a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts b/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts
index c1a3fae2c5f6..ff079789fcb0 100644
--- a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts
+++ b/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts
@@ -35,18 +35,20 @@ describe('OverlayKeyboardDispatcher', () => {
     keyboardDispatcher.add(overlayTwo);
 
     expect(keyboardDispatcher._attachedOverlays.length)
-        .toBe(2, 'Expected both overlays to be tracked.');
-    expect(keyboardDispatcher._attachedOverlays[0]).toBe(overlayOne, 'Expected one to be first.');
-    expect(keyboardDispatcher._attachedOverlays[1]).toBe(overlayTwo, 'Expected two to be last.');
+      .withContext('Expected both overlays to be tracked.').toBe(2);
+    expect(keyboardDispatcher._attachedOverlays[0])
+      .withContext('Expected one to be first.').toBe(overlayOne);
+    expect(keyboardDispatcher._attachedOverlays[1])
+      .withContext('Expected two to be last.').toBe(overlayTwo);
 
     // Detach first one and re-attach it
     keyboardDispatcher.remove(overlayOne);
     keyboardDispatcher.add(overlayOne);
 
     expect(keyboardDispatcher._attachedOverlays[0])
-        .toBe(overlayTwo, 'Expected two to now be first.');
+      .withContext('Expected two to now be first.').toBe(overlayTwo);
     expect(keyboardDispatcher._attachedOverlays[1])
-        .toBe(overlayOne, 'Expected one to now be last.');
+      .withContext('Expected one to now be last.').toBe(overlayOne);
   });
 
   it('should dispatch body keyboard events to the most recently attached overlay', () => {
diff --git a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts
index c9211a2568f7..c2afceebfacd 100644
--- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts
+++ b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts
@@ -33,19 +33,19 @@ describe('OverlayOutsideClickDispatcher', () => {
     outsideClickDispatcher.add(overlayTwo);
 
     expect(outsideClickDispatcher._attachedOverlays.length)
-        .toBe(2, 'Expected both overlays to be tracked.');
+      .withContext('Expected both overlays to be tracked.').toBe(2);
     expect(outsideClickDispatcher._attachedOverlays[0])
-      .toBe(overlayOne, 'Expected one to be first.');
+      .withContext('Expected one to be first.').toBe(overlayOne);
     expect(outsideClickDispatcher._attachedOverlays[1])
-      .toBe(overlayTwo, 'Expected two to be last.');
+      .withContext('Expected two to be last.').toBe(overlayTwo);
 
     outsideClickDispatcher.remove(overlayOne);
     outsideClickDispatcher.add(overlayOne);
 
     expect(outsideClickDispatcher._attachedOverlays[0])
-        .toBe(overlayTwo, 'Expected two to now be first.');
+      .withContext('Expected two to now be first.').toBe(overlayTwo);
     expect(outsideClickDispatcher._attachedOverlays[1])
-        .toBe(overlayOne, 'Expected one to now be last.');
+      .withContext('Expected one to now be last.').toBe(overlayOne);
 
     overlayOne.dispose();
     overlayTwo.dispose();
diff --git a/src/cdk/overlay/overlay-container.spec.ts b/src/cdk/overlay/overlay-container.spec.ts
index 789236099590..540c43ab6f87 100644
--- a/src/cdk/overlay/overlay-container.spec.ts
+++ b/src/cdk/overlay/overlay-container.spec.ts
@@ -29,15 +29,17 @@ describe('OverlayContainer', () => {
     overlayRef.attach(fixture.componentInstance.templatePortal);
     fixture.detectChanges();
 
-    expect(document.querySelector('.cdk-overlay-container'))
-        .not.toBeNull('Expected the overlay container to be in the DOM after opening an overlay');
+    expect(document.querySelector('.cdk-overlay-container')).not
+      .withContext('Expected the overlay container to be in the DOM after opening an overlay')
+      .toBeNull();
 
     // Manually call `ngOnDestroy` because there is no way to force Angular to destroy an
     // injectable in a unit test.
     overlayContainer.ngOnDestroy();
 
     expect(document.querySelector('.cdk-overlay-container'))
-        .toBeNull('Expected the overlay container *not* to be in the DOM after destruction');
+      .withContext('Expected the overlay container *not* to be in the DOM after destruction')
+      .toBeNull();
   });
 
   it('should add and remove css classes from the container element', () => {
@@ -45,12 +47,13 @@ describe('OverlayContainer', () => {
 
     const containerElement = document.querySelector('.cdk-overlay-container')!;
     expect(containerElement.classList.contains('commander-shepard'))
-        .toBe(true, 'Expected the overlay container to have class "commander-shepard"');
+      .withContext('Expected the overlay container to have class "commander-shepard"').toBe(true);
 
     overlayContainer.getContainerElement().classList.remove('commander-shepard');
 
     expect(containerElement.classList.contains('commander-shepard'))
-        .toBe(false, 'Expected the overlay container not to have class "commander-shepard"');
+      .withContext('Expected the overlay container not to have class "commander-shepard"')
+      .toBe(false);
   });
 
   it('should remove overlay containers from the server when on the browser', () => {
diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts
index 073b3cd84a2d..8f3762649f97 100644
--- a/src/cdk/overlay/overlay-directives.spec.ts
+++ b/src/cdk/overlay/overlay-directives.spec.ts
@@ -115,7 +115,8 @@ describe('Overlay directives', () => {
 
     expect(overlayContainerElement.textContent!.trim()).toBe('');
     expect(getPaneElement())
-      .toBeFalsy('Expected the overlay pane element to be removed when disposed.');
+      .withContext('Expected the overlay pane element to be removed when disposed.')
+      .toBeFalsy();
   });
 
   it('should use a connected position strategy with a default set of positions', () => {
@@ -162,8 +163,8 @@ describe('Overlay directives', () => {
     const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
     fixture.detectChanges();
 
-    expect(overlayContainerElement.textContent!.trim()).toBe('',
-        'Expected overlay to have been detached.');
+    expect(overlayContainerElement.textContent!.trim())
+      .withContext('Expected overlay to have been detached.').toBe('');
     expect(event.defaultPrevented).toBe(true);
   });
 
@@ -614,7 +615,8 @@ describe('Overlay directives', () => {
       const latestCall = fixture.componentInstance.positionChangeHandler.calls.mostRecent();
 
       expect(latestCall.args[0] instanceof ConnectedOverlayPositionChange)
-          .toBe(true, `Expected directive to emit an instance of ConnectedOverlayPositionChange.`);
+        .withContext(`Expected directive to emit an instance of ConnectedOverlayPositionChange.`)
+        .toBe(true);
     });
 
     it('should emit when attached', () => {
@@ -624,7 +626,8 @@ describe('Overlay directives', () => {
 
       expect(fixture.componentInstance.attachHandler).toHaveBeenCalled();
       expect(fixture.componentInstance.attachResult instanceof HTMLElement)
-          .toBe(true, `Expected pane to be populated with HTML elements when attach was called.`);
+        .withContext(`Expected pane to be populated with HTML elements when attach was called.`)
+        .toBe(true);
 
       fixture.componentInstance.isOpen = false;
       fixture.detectChanges();
diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts
index dd04316f6a73..bd20090d7a7b 100644
--- a/src/cdk/overlay/overlay.spec.ts
+++ b/src/cdk/overlay/overlay.spec.ts
@@ -123,13 +123,14 @@ describe('Overlay', () => {
 
     expect(paneElement.childNodes.length).not.toBe(0);
     expect(paneElement.style.pointerEvents)
-      .toBe('', 'Expected the overlay pane to enable pointerEvents when attached.');
+      .withContext('Expected the overlay pane to enable pointerEvents when attached.').toBe('');
 
     overlayRef.detach();
 
     expect(paneElement.childNodes.length).toBe(0);
     expect(paneElement.style.pointerEvents)
-      .toBe('none', 'Expected the overlay pane to disable pointerEvents when detached.');
+      .withContext('Expected the overlay pane to disable pointerEvents when detached.')
+      .toBe('none');
   });
 
   it('should open multiple overlays', () => {
@@ -160,9 +161,11 @@ describe('Overlay', () => {
     cakeOverlayRef.attach(templatePortal);
 
     expect(pizzaOverlayRef.hostElement.nextSibling)
-        .toBeTruthy('Expected pizza to be on the bottom.');
+      .withContext('Expected pizza to be on the bottom.')
+      .toBeTruthy();
     expect(cakeOverlayRef.hostElement.nextSibling)
-        .toBeFalsy('Expected cake to be on top.');
+      .withContext('Expected cake to be on top.')
+      .toBeFalsy();
 
     pizzaOverlayRef.dispose();
     cakeOverlayRef.detach();
@@ -172,9 +175,11 @@ describe('Overlay', () => {
     cakeOverlayRef.attach(templatePortal);
 
     expect(pizzaOverlayRef.hostElement.nextSibling)
-        .toBeTruthy('Expected pizza to still be on the bottom.');
+      .withContext('Expected pizza to still be on the bottom.')
+      .toBeTruthy();
     expect(cakeOverlayRef.hostElement.nextSibling)
-        .toBeFalsy('Expected cake to still be on top.');
+      .withContext('Expected cake to still be on top.')
+      .toBeFalsy();
   }));
 
   it('should take the default direction from the global Directionality', () => {
@@ -210,10 +215,12 @@ describe('Overlay', () => {
 
     overlayRef.attachments().subscribe(() => {
       expect(overlayContainerElement.querySelector('pizza'))
-          .toBeTruthy('Expected the overlay to have been attached.');
+        .withContext('Expected the overlay to have been attached.')
+        .toBeTruthy();
 
       expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop'))
-          .toBeTruthy('Expected the backdrop to have been attached.');
+        .withContext('Expected the backdrop to have been attached.')
+        .toBeTruthy();
     });
 
     overlayRef.attach(componentPortal);
@@ -255,7 +262,8 @@ describe('Overlay', () => {
 
     overlayRef.detachments().subscribe(() => {
       expect(overlayContainerElement.querySelector('pizza'))
-          .toBeFalsy('Expected the overlay to have been detached.');
+        .withContext('Expected the overlay to have been detached.')
+        .toBeFalsy();
     });
 
     overlayRef.attach(componentPortal);
@@ -306,16 +314,25 @@ describe('Overlay', () => {
     const overlayRef = overlay.create({hasBackdrop: true});
     overlayRef.attach(componentPortal);
 
-    expect(overlayRef.hostElement).toBeTruthy('Expected overlay host to be defined.');
-    expect(overlayRef.overlayElement).toBeTruthy('Expected overlay element to be defined.');
-    expect(overlayRef.backdropElement).toBeTruthy('Expected backdrop element to be defined.');
+    expect(overlayRef.hostElement)
+      .withContext('Expected overlay host to be defined.')
+      .toBeTruthy();
+    expect(overlayRef.overlayElement)
+      .withContext('Expected overlay element to be defined.')
+      .toBeTruthy();
+    expect(overlayRef.backdropElement)
+      .withContext('Expected backdrop element to be defined.')
+      .toBeTruthy();
 
     overlayRef.dispose();
     tick(500);
 
-    expect(overlayRef.hostElement).toBeFalsy('Expected overlay host not to be referenced.');
-    expect(overlayRef.overlayElement).toBeFalsy('Expected overlay element not to be referenced.');
-    expect(overlayRef.backdropElement).toBeFalsy('Expected backdrop element not to be referenced.');
+    expect(overlayRef.hostElement)
+      .withContext('Expected overlay host not to be referenced.').toBeFalsy();
+    expect(overlayRef.overlayElement)
+      .withContext('Expected overlay element not to be referenced.').toBeFalsy();
+    expect(overlayRef.backdropElement)
+      .withContext('Expected backdrop element not to be referenced.').toBeFalsy();
   }));
 
   it('should clear the backdrop timeout if the transition finishes first', fakeAsync(() => {
@@ -374,24 +391,28 @@ describe('Overlay', () => {
     viewContainerFixture.detectChanges();
 
     expect(overlayRef.hostElement.parentElement)
-        .toBeTruthy('Expected host element to be in the DOM.');
+      .withContext('Expected host element to be in the DOM.')
+      .toBeTruthy();
 
     overlayRef.detach();
 
     expect(overlayRef.hostElement.parentElement)
-        .toBeTruthy('Expected host element not to have been removed immediately.');
+      .withContext('Expected host element not to have been removed immediately.')
+      .toBeTruthy();
 
     viewContainerFixture.detectChanges();
     zone.simulateZoneExit();
 
     expect(overlayRef.hostElement.parentElement)
-        .toBeFalsy('Expected host element to have been removed once the zone stabilizes.');
+      .withContext('Expected host element to have been removed once the zone stabilizes.')
+      .toBeFalsy();
 
     overlayRef.attach(componentPortal);
     viewContainerFixture.detectChanges();
 
     expect(overlayRef.hostElement.parentElement)
-        .toBeTruthy('Expected host element to be back in the DOM.');
+      .withContext('Expected host element to be back in the DOM.')
+      .toBeTruthy();
   });
 
   it('should be able to dispose an overlay on navigation', () => {
@@ -414,7 +435,8 @@ describe('Overlay', () => {
       .not.toContain('custom-class-one', 'Expected class to be initially missing');
 
     overlayRef.addPanelClass('custom-class-one');
-    expect(pane.classList).toContain('custom-class-one', 'Expected class to be added');
+    expect(pane.classList)
+      .withContext('Expected class to be added').toContain('custom-class-one');
 
     overlayRef.removePanelClass('custom-class-one');
     expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed');
@@ -463,7 +485,8 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayPresentInDom).toBeTruthy('Expected host element to be attached to the DOM.');
+      expect(overlayPresentInDom)
+        .withContext('Expected host element to be attached to the DOM.').toBeTruthy();
 
       overlayRef.detach();
       zone.simulateZoneExit();
@@ -471,7 +494,8 @@ describe('Overlay', () => {
 
       overlayRef.attach(componentPortal);
 
-      expect(overlayPresentInDom).toBeTruthy('Expected host element to be attached to the DOM.');
+      expect(overlayPresentInDom)
+        .withContext('Expected host element to be attached to the DOM.').toBeTruthy();
     }));
 
     it('should not apply the position if it detaches before the zone stabilizes', fakeAsync(() => {
@@ -780,7 +804,8 @@ describe('Overlay', () => {
       expect(children.indexOf(backdrop)).toBeGreaterThan(-1);
       expect(children.indexOf(host)).toBeGreaterThan(-1);
       expect(children.indexOf(backdrop))
-        .toBeLessThan(children.indexOf(host), 'Expected backdrop to be before the host in the DOM');
+        .withContext('Expected backdrop to be before the host in the DOM')
+        .toBeLessThan(children.indexOf(host));
     });
 
     it('should remove the event listener from the backdrop', () => {
@@ -840,7 +865,8 @@ describe('Overlay', () => {
       viewContainerFixture.detectChanges();
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-      expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
+      expect(pane.classList)
+        .withContext('Expected class to be added').toContain('custom-panel-class');
 
       overlayRef.detach();
       zone.simulateZoneExit();
@@ -849,7 +875,8 @@ describe('Overlay', () => {
 
       overlayRef.attach(componentPortal);
       viewContainerFixture.detectChanges();
-      expect(pane.classList).toContain('custom-panel-class', 'Expected class to be re-added');
+      expect(pane.classList)
+        .withContext('Expected class to be re-added').toContain('custom-panel-class');
     });
 
     it('should wait for the overlay to be detached before removing the panelClass', () => {
@@ -860,18 +887,21 @@ describe('Overlay', () => {
       viewContainerFixture.detectChanges();
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-      expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
+      expect(pane.classList)
+        .withContext('Expected class to be added').toContain('custom-panel-class');
 
       overlayRef.detach();
       viewContainerFixture.detectChanges();
 
       expect(pane.classList)
-          .toContain('custom-panel-class', 'Expected class not to be removed immediately');
+        .withContext('Expected class not to be removed immediately')
+        .toContain('custom-panel-class');
 
       zone.simulateZoneExit();
 
-      expect(pane.classList)
-          .not.toContain('custom-panel-class', 'Expected class to be removed on stable');
+      expect(pane.classList).not
+        .withContext('Expected class to be removed on stable')
+        .toContain('custom-panel-class');
     });
 
 
@@ -883,8 +913,9 @@ describe('Overlay', () => {
       const config = new OverlayConfig({scrollStrategy: fakeScrollStrategy});
       const overlayRef = overlay.create(config);
 
-      expect(fakeScrollStrategy.overlayRef).toBe(overlayRef,
-          'Expected scroll strategy to have been attached to the current overlay ref.');
+      expect(fakeScrollStrategy.overlayRef)
+        .withContext('Expected scroll strategy to have been attached to the current overlay ref.')
+        .toBe(overlayRef);
     });
 
     it('should enable the scroll strategy when the overlay is attached', () => {
@@ -893,7 +924,8 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(fakeScrollStrategy.isEnabled).toBe(true, 'Expected scroll strategy to be enabled.');
+      expect(fakeScrollStrategy.isEnabled)
+        .withContext('Expected scroll strategy to be enabled.').toBe(true);
     });
 
     it('should disable the scroll strategy once the overlay is detached', () => {
@@ -902,10 +934,12 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(fakeScrollStrategy.isEnabled).toBe(true, 'Expected scroll strategy to be enabled.');
+      expect(fakeScrollStrategy.isEnabled)
+        .withContext('Expected scroll strategy to be enabled.').toBe(true);
 
       overlayRef.detach();
-      expect(fakeScrollStrategy.isEnabled).toBe(false, 'Expected scroll strategy to be disabled.');
+      expect(fakeScrollStrategy.isEnabled)
+        .withContext('Expected scroll strategy to be disabled.').toBe(false);
     });
 
     it('should disable the scroll strategy when the overlay is destroyed', () => {
@@ -914,7 +948,8 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.dispose();
-      expect(fakeScrollStrategy.isEnabled).toBe(false, 'Expected scroll strategy to be disabled.');
+      expect(fakeScrollStrategy.isEnabled)
+        .withContext('Expected scroll strategy to be disabled.').toBe(false);
     });
 
     it('should detach the scroll strategy when the overlay is destroyed', () => {
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
index c5a1a47ad11d..3d6ac360b98a 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
+++ b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
@@ -405,8 +405,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         positionStrategy.reapplyLastPosition();
 
         const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
-        expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.top),
-            'Expected overlay to be re-aligned to the trigger in the previous position.');
+        expect(Math.floor(overlayRect.bottom))
+          .withContext('Expected overlay to be re-aligned to the trigger in the previous position.')
+          .toBe(Math.floor(originRect.top));
       });
 
       it('should default to the initial position, if no positions fit in the viewport', () => {
@@ -427,8 +428,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         positionStrategy.reapplyLastPosition();
 
         const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
-        expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.top),
-            'Expected overlay to be re-aligned to the trigger in the initial position.');
+        expect(Math.floor(overlayRect.bottom))
+          .withContext('Expected overlay to be re-aligned to the trigger in the initial position.')
+          .toBe(Math.floor(originRect.top));
       });
 
       it('should position a panel properly when rtl', () => {
@@ -878,7 +880,8 @@ describe('FlexibleConnectedPositionStrategy', () => {
 
       expect(positionChangeHandler).toHaveBeenCalled();
       expect(latestCall.args[0] instanceof ConnectedOverlayPositionChange)
-          .toBe(true, `Expected strategy to emit an instance of ConnectedOverlayPositionChange.`);
+        .withContext(`Expected strategy to emit an instance of ConnectedOverlayPositionChange.`)
+        .toBe(true);
 
       // If the strategy is re-applied and the initial position would now fit,
       // the position change event should be emitted again.
@@ -1371,7 +1374,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
 
         let overlayRect = overlayRef.overlayElement.getBoundingClientRect();
         expect(Math.floor(overlayRect.top))
-            .toBe(0, 'Expected overlay to be in the viewport initially.');
+          .withContext('Expected overlay to be in the viewport initially.').toBe(0);
 
         window.scroll(0, 100);
         overlayRef.updatePosition();
@@ -1379,7 +1382,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
 
         overlayRect = overlayRef.overlayElement.getBoundingClientRect();
         expect(Math.floor(overlayRect.top))
-            .toBe(0, 'Expected overlay to stay in the viewport after scrolling.');
+          .withContext('Expected overlay to stay in the viewport after scrolling.').toBe(0);
 
         window.scroll(0, 0);
         document.body.removeChild(veryLargeElement);
@@ -1411,7 +1414,8 @@ describe('FlexibleConnectedPositionStrategy', () => {
         const scrollBy = 100;
         let initialOverlayTop = Math.floor(overlayRef.overlayElement.getBoundingClientRect().top);
 
-        expect(initialOverlayTop).toBe(0, 'Expected overlay to be inside the viewport initially.');
+        expect(initialOverlayTop)
+          .withContext('Expected overlay to be inside the viewport initially.').toBe(0);
 
         window.scroll(0, scrollBy);
         overlayRef.updatePosition();
@@ -1419,10 +1423,12 @@ describe('FlexibleConnectedPositionStrategy', () => {
 
         let currentOverlayTop = Math.floor(overlayRef.overlayElement.getBoundingClientRect().top);
 
-        expect(currentOverlayTop).toBeLessThan(0,
-            'Expected overlay to no longer be completely inside the viewport.');
-        expect(currentOverlayTop).toBe(initialOverlayTop - scrollBy,
-            'Expected overlay to maintain its previous position.');
+        expect(currentOverlayTop)
+          .withContext('Expected overlay to no longer be completely inside the viewport.')
+          .toBeLessThan(0);
+        expect(currentOverlayTop)
+          .withContext('Expected overlay to maintain its previous position.')
+          .toBe(initialOverlayTop - scrollBy);
 
         window.scroll(0, 0);
         document.body.removeChild(veryLargeElement);
diff --git a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts
index 3fa45f4554b0..c6002501f46d 100644
--- a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts
+++ b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts
@@ -51,23 +51,24 @@ describe('BlockScrollStrategy', () => {
   it('should toggle scroll blocking along the y axis', skipIOS(() => {
     window.scroll(0, 100);
     expect(viewport.getViewportScrollPosition().top)
-        .toBe(100, 'Expected viewport to be scrollable initially.');
+      .withContext('Expected viewport to be scrollable initially.').toBe(100);
 
     overlayRef.attach(componentPortal);
     expect(documentElement.style.top)
-        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');
+      .withContext('Expected <html> element to be offset by the previous scroll amount.')
+      .toBe('-100px');
 
     window.scroll(0, 300);
     expect(viewport.getViewportScrollPosition().top)
-        .toBe(100, 'Expected the viewport not to scroll.');
+      .withContext('Expected the viewport not to scroll.').toBe(100);
 
     overlayRef.detach();
     expect(viewport.getViewportScrollPosition().top)
-        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');
+      .withContext('Expected old scroll position to have bee restored after disabling.').toBe(100);
 
     window.scroll(0, 300);
     expect(viewport.getViewportScrollPosition().top)
-        .toBe(300, 'Expected user to be able to scroll after disabling.');
+      .withContext('Expected user to be able to scroll after disabling.').toBe(300);
   }));
 
 
@@ -77,23 +78,24 @@ describe('BlockScrollStrategy', () => {
 
     window.scroll(100, 0);
     expect(viewport.getViewportScrollPosition().left)
-        .toBe(100, 'Expected viewport to be scrollable initially.');
+      .withContext('Expected viewport to be scrollable initially.').toBe(100);
 
     overlayRef.attach(componentPortal);
     expect(documentElement.style.left)
-        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');
+      .withContext('Expected <html> element to be offset by the previous scroll amount.')
+      .toBe('-100px');
 
     window.scroll(300, 0);
     expect(viewport.getViewportScrollPosition().left)
-        .toBe(100, 'Expected the viewport not to scroll.');
+      .withContext('Expected the viewport not to scroll.').toBe(100);
 
     overlayRef.detach();
     expect(viewport.getViewportScrollPosition().left)
-        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');
+      .withContext('Expected old scroll position to have bee restored after disabling.').toBe(100);
 
     window.scroll(300, 0);
     expect(viewport.getViewportScrollPosition().left)
-        .toBe(300, 'Expected user to be able to scroll after disabling.');
+      .withContext('Expected user to be able to scroll after disabling.').toBe(300);
   }));
 
 
diff --git a/src/cdk/portal/portal.spec.ts b/src/cdk/portal/portal.spec.ts
index 0d14b13a1cba..16bc761a0e9e 100644
--- a/src/cdk/portal/portal.spec.ts
+++ b/src/cdk/portal/portal.spec.ts
@@ -88,11 +88,12 @@ describe('Portals', () => {
       const domPortal = new DomPortal(testAppComponent.domPortalContent);
       const initialParent = domPortal.element.parentNode!;
 
-      expect(innerContent).toBeTruthy('Expected portal content to be rendered.');
+      expect(innerContent)
+        .withContext('Expected portal content to be rendered.').toBeTruthy();
       expect(domPortal.element.contains(innerContent))
-          .toBe(true, 'Expected content to be inside portal on init.');
+        .withContext('Expected content to be inside portal on init.').toBe(true);
       expect(hostContainer.contains(innerContent))
-          .toBe(false, 'Expected content to be outside of portal outlet.');
+        .withContext('Expected content to be outside of portal outlet.').toBe(false);
 
       testAppComponent.selectedPortal = domPortal;
       fixture.detectChanges();
@@ -100,16 +101,17 @@ describe('Portals', () => {
       expect(domPortal.element.parentNode)
           .not.toBe(initialParent, 'Expected portal to be out of the initial parent on attach.');
       expect(hostContainer.contains(innerContent))
-          .toBe(true, 'Expected content to be inside the outlet on attach.');
+        .withContext('Expected content to be inside the outlet on attach.').toBe(true);
       expect(testAppComponent.portalOutlet.hasAttached()).toBe(true);
 
       testAppComponent.selectedPortal = undefined;
       fixture.detectChanges();
 
       expect(domPortal.element.parentNode)
-          .toBe(initialParent, 'Expected portal to be back inside initial parent on detach.');
+        .withContext('Expected portal to be back inside initial parent on detach.')
+        .toBe(initialParent);
       expect(hostContainer.contains(innerContent))
-          .toBe(false, 'Expected content to be removed from outlet on detach.');
+        .withContext('Expected content to be removed from outlet on detach.').toBe(false);
       expect(testAppComponent.portalOutlet.hasAttached()).toBe(false);
     });
 
@@ -550,25 +552,28 @@ describe('Portals', () => {
       let componentInstance: PizzaMsg = portal.attach(host).instance;
 
       expect(componentInstance instanceof PizzaMsg)
-          .toBe(true, 'Expected a PizzaMsg component to be created');
+        .withContext('Expected a PizzaMsg component to be created').toBe(true);
       expect(someDomElement.textContent)
-          .toContain('Pizza', 'Expected the static string "Pizza" in the DomPortalOutlet.');
+        .withContext('Expected the static string "Pizza" in the DomPortalOutlet.')
+        .toContain('Pizza');
 
       componentInstance.snack = new Chocolate();
       someFixture.detectChanges();
       expect(someDomElement.textContent)
-          .toContain('Chocolate', 'Expected the bound string "Chocolate" in the DomPortalOutlet');
+        .withContext('Expected the bound string "Chocolate" in the DomPortalOutlet')
+        .toContain('Chocolate');
 
       host.detach();
 
       expect(someDomElement.innerHTML)
-          .toBe('', 'Expected the DomPortalOutlet to be empty after detach');
+        .withContext('Expected the DomPortalOutlet to be empty after detach').toBe('');
     });
 
     it('should call the dispose function even if the host has no attached content', () => {
       let spy = jasmine.createSpy('host dispose spy');
 
-      expect(host.hasAttached()).toBe(false, 'Expected host not to have attached content.');
+      expect(host.hasAttached())
+        .withContext('Expected host not to have attached content.').toBe(false);
 
       host.setDisposeFn(spy);
       host.dispose();
diff --git a/src/cdk/schematics/ng-add/index.spec.ts b/src/cdk/schematics/ng-add/index.spec.ts
index e65f416b1dd1..3c4eb04c6ea9 100644
--- a/src/cdk/schematics/ng-add/index.spec.ts
+++ b/src/cdk/schematics/ng-add/index.spec.ts
@@ -24,11 +24,11 @@ describe('CDK ng-add', () => {
 
     expect(dependencies['@angular/cdk']).toBe('~0.0.0-PLACEHOLDER');
     expect(Object.keys(dependencies))
-        .toEqual(
-            Object.keys(dependencies).sort(),
-            'Expected the modified "dependencies" to be sorted alphabetically.');
-    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(true,
-      'Expected the package manager to be scheduled in order to update lock files.');
+      .withContext('Expected the modified "dependencies" to be sorted alphabetically.')
+      .toEqual(Object.keys(dependencies).sort());
+    expect(runner.tasks.some(task => task.name === 'node-package'))
+      .withContext('Expected the package manager to be scheduled in order to update lock files.')
+      .toBe(true);
   });
 
   it('should respect version range from CLI ng-add command', async () => {
@@ -41,7 +41,8 @@ describe('CDK ng-add', () => {
     const dependencies = packageJson.dependencies;
 
     expect(dependencies['@angular/cdk']).toBe('^9.0.0');
-    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(false,
-      'Expected the package manager to not run since the CDK version was already inserted.');
+    expect(runner.tasks.some(task => task.name === 'node-package'))
+      .withContext('Expected the package manager to not run since the CDK version ' +
+                   'was already inserted.').toBe(false);
   });
 });
diff --git a/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts b/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts
index 8f8c5f1363eb..f4716734710e 100644
--- a/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts
+++ b/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts
@@ -86,14 +86,14 @@ describe('CDK drag-drop schematic', () => {
       // In this case we expect the schematic to generate a plain "css" file because
       // the component schematics are using CSS style templates which are not compatible
       // with all CLI supported styles (e.g. Stylus or Sass)
-      expect(tree.files)
-          .toContain(
-              '/projects/material/src/app/foo/foo.component.css',
-              'Expected the schematic to generate a plain "css" file.');
-      expect(tree.files)
-          .not.toContain(
-              '/projects/material/src/app/foo/foo.component.styl',
-              'Expected the schematic to not generate a "stylus" file');
+      // In this case we expect the schematic to generate a plain "css" file because
+      // the component schematics are using CSS style templates which are not compatible
+      // with all CLI supported styles (e.g. Stylus or Sass)
+      expect(tree.files).withContext('Expected the schematic to generate a plain "css" file.')
+        .toContain('/projects/material/src/app/foo/foo.component.css');
+      expect(tree.files).not
+        .withContext('Expected the schematic to not generate a "stylus" file')
+        .toContain('/projects/material/src/app/foo/foo.component.styl');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
diff --git a/src/cdk/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts b/src/cdk/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts
index e27a84bccef8..5971c58d2176 100644
--- a/src/cdk/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts
+++ b/src/cdk/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts
@@ -19,10 +19,10 @@ describe('ng-update external resource resolution', () => {
     await runFixers();
 
     expect(appTree.readContent('/projects/material/test.html'))
-        .toBe(expected, 'Expected absolute devkit tree paths to work.');
+      .withContext('Expected absolute devkit tree paths to work.').toBe(expected);
     expect(appTree.readContent('/projects/cdk-testing/src/some-tmpl.html'))
-        .toBe(expected, 'Expected relative paths with parent segments to work.');
+      .withContext('Expected relative paths with parent segments to work.').toBe(expected);
     expect(appTree.readContent('/projects/cdk-testing/src/test-cases/local.html'))
-        .toBe(expected, 'Expected relative paths without explicit dot to work.');
+      .withContext('Expected relative paths without explicit dot to work.').toBe(expected);
   });
 });
diff --git a/src/cdk/scrolling/scroll-dispatcher.spec.ts b/src/cdk/scrolling/scroll-dispatcher.spec.ts
index 4f7c56db5f64..6fb01cdcfa03 100644
--- a/src/cdk/scrolling/scroll-dispatcher.spec.ts
+++ b/src/cdk/scrolling/scroll-dispatcher.spec.ts
@@ -217,7 +217,8 @@ describe('ScrollDispatcher', () => {
     }));
 
     it('should lazily add global listeners as service subscriptions are added and removed', () => {
-      expect(scroll._globalSubscription).toBeNull('Expected no global listeners on init.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected no global listeners on init.').toBeNull();
 
       const subscription = scroll.scrolled(0).subscribe(() => {});
 
@@ -234,34 +235,41 @@ describe('ScrollDispatcher', () => {
       const fixture = TestBed.createComponent(NestedScrollingComponent);
       fixture.detectChanges();
 
-      expect(scroll._globalSubscription).toBeNull('Expected no global listeners on init.');
-      expect(scroll.scrollContainers.size).toBe(4, 'Expected multiple scrollables');
+      expect(scroll._globalSubscription)
+        .withContext('Expected no global listeners on init.')
+        .toBeNull();
+      expect(scroll.scrollContainers.size).withContext('Expected multiple scrollables').toBe(4);
 
       const subscription = scroll.scrolled(0).subscribe(() => {});
 
-      expect(scroll._globalSubscription).toBeTruthy(
-          'Expected global listeners after a subscription has been added.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected global listeners after a subscription has been added.')
+        .toBeTruthy();
 
       subscription.unsubscribe();
 
-      expect(scroll._globalSubscription).toBeNull(
-          'Expected global listeners to have been removed after the subscription has stopped.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected global listeners to have been removed after ' +
+                     'the subscription has stopped.').toBeNull();
       expect(scroll.scrollContainers.size)
-          .toBe(4, 'Expected scrollable count to stay the same');
+        .withContext('Expected scrollable count to stay the same').toBe(4);
     });
 
     it('should remove the global subscription on destroy', () => {
-      expect(scroll._globalSubscription).toBeNull('Expected no global listeners on init.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected no global listeners on init.').toBeNull();
 
       const subscription = scroll.scrolled(0).subscribe(() => {});
 
-      expect(scroll._globalSubscription).toBeTruthy(
-          'Expected global listeners after a subscription has been added.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected global listeners after a subscription has been added.')
+        .toBeTruthy();
 
       scroll.ngOnDestroy();
 
-      expect(scroll._globalSubscription).toBeNull(
-          'Expected global listeners to have been removed after the subscription has stopped.');
+      expect(scroll._globalSubscription)
+        .withContext('Expected global listeners to have been removed after ' +
+                     'the subscription has stopped.').toBeNull();
 
       subscription.unsubscribe();
     });
diff --git a/src/cdk/scrolling/scrollable.spec.ts b/src/cdk/scrolling/scrollable.spec.ts
index c9c3d1a06931..141b468b7c21 100644
--- a/src/cdk/scrolling/scrollable.spec.ts
+++ b/src/cdk/scrolling/scrollable.spec.ts
@@ -10,10 +10,12 @@ function expectOverlapping(el1: ElementRef<Element>, el2: ElementRef<Element>, e
       r1.left < r2.right && r1.right > r2.left && r1.top < r2.bottom && r1.bottom > r2.top;
   if (expected) {
     expect(actual)
-        .toBe(expected, `${JSON.stringify(r1)} should overlap with ${JSON.stringify(r2)}`);
+      .withContext(`${JSON.stringify(r1)} should overlap with ${JSON.stringify(r2)}`)
+      .toBe(expected);
   } else {
     expect(actual)
-        .toBe(expected, `${JSON.stringify(r1)} should not overlap with ${JSON.stringify(r2)}`);
+      .withContext(`${JSON.stringify(r1)} should not overlap with ${JSON.stringify(r2)}`)
+      .toBe(expected);
   }
 }
 
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
index 7a6695eac248..fe5d1b27f2d1 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
+++ b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
@@ -53,7 +53,7 @@ describe('CdkVirtualScrollViewport', () => {
       const contentWrapper =
           viewport.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper')!;
       expect(contentWrapper.children.length)
-          .toBe(4, 'should render 4 50px items to fill 200px space');
+        .withContext('should render 4 50px items to fill 200px space').toBe(4);
     }));
 
     it('should get the data length', fakeAsync(() => {
@@ -97,7 +97,8 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 4}, 'should render the first 4 50px items to fill 200px space');
+        .withContext('should render the first 4 50px items to fill 200px space')
+        .toEqual({ start: 0, end: 4 });
     }));
 
     it('should get the rendered content offset', fakeAsync(() => {
@@ -106,8 +107,9 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.getOffsetToRenderedContentStart()).toBe(testComponent.itemSize,
-          'should have 50px offset since first 50px item is not rendered');
+      expect(viewport.getOffsetToRenderedContentStart())
+        .withContext('should have 50px offset since first 50px item is not rendered')
+        .toBe(testComponent.itemSize);
     }));
 
     it('should get the scroll offset', fakeAsync(() => {
@@ -123,23 +125,25 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.measureRenderedContentSize())
-          .toBe(testComponent.viewportSize,
-              'should render 4 50px items with combined size of 200px to fill 200px space');
+        .withContext('should render 4 50px items with combined size of 200px to fill 200px space')
+        .toBe(testComponent.viewportSize);
     }));
 
     it('should measure range size', fakeAsync(() => {
       finishInit(fixture);
 
-      expect(viewport.measureRangeSize({start: 1, end: 3}))
-          .toBe(testComponent.itemSize * 2, 'combined size of 2 50px items should be 100px');
+      expect(viewport.measureRangeSize({ start: 1, end: 3 }))
+        .withContext('combined size of 2 50px items should be 100px')
+        .toBe(testComponent.itemSize * 2);
     }));
 
     it('should measure range size when items has a margin', fakeAsync(() => {
       fixture.componentInstance.hasMargin = true;
       finishInit(fixture);
 
-      expect(viewport.measureRangeSize({start: 1, end: 3})).toBe(testComponent.itemSize * 2 + 10,
-            'combined size of 2 50px items with a 10px margin should be 110px');
+      expect(viewport.measureRangeSize({ start: 1, end: 3 }))
+        .withContext('combined size of 2 50px items with a 10px margin should be 110px')
+        .toBe(testComponent.itemSize * 2 + 10);
     }));
 
     it('should set total content size', fakeAsync(() => {
@@ -192,8 +196,10 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       const items = fixture.elementRef.nativeElement.querySelectorAll('.item');
-      expect(items.length).toBe(1, 'Expected 1 item to be rendered');
-      expect(items[0].innerText.trim()).toBe('2 - 2', 'Expected item with index 2 to be rendered');
+      expect(items.length)
+        .withContext('Expected 1 item to be rendered').toBe(1);
+      expect(items[0].innerText.trim())
+        .withContext('Expected item with index 2 to be rendered').toBe('2 - 2');
     }));
 
     it('should set content offset to top of content', fakeAsync(() => {
@@ -298,14 +304,15 @@ describe('CdkVirtualScrollViewport', () => {
           end: Math.ceil((offset + testComponent.viewportSize) / testComponent.itemSize)
         };
         expect(viewport.getRenderedRange())
-            .toEqual(expectedRange,
-                `rendered range should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered range should match expected value at scroll offset ${offset}`)
+          .toEqual(expectedRange);
         expect(viewport.getOffsetToRenderedContentStart())
-            .toBe(expectedRange.start * testComponent.itemSize,
-                `rendered content offset should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered content offset should match expected value at ` +
+                       `scroll offset ${offset}`)
+                          .toBe(expectedRange.start * testComponent.itemSize);
         expect(viewport.measureRenderedContentSize())
-            .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize,
-                `rendered content size should match expected value at offset ${offset}`);
+          .withContext(`rendered content size should match expected value at offset ${offset}`)
+          .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize);
       }
     }));
 
@@ -324,14 +331,14 @@ describe('CdkVirtualScrollViewport', () => {
           end: Math.ceil((offset + testComponent.viewportSize) / testComponent.itemSize)
         };
         expect(viewport.getRenderedRange())
-            .toEqual(expectedRange,
-                `rendered range should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered range should match expected value at scroll offset ${offset}`)
+          .toEqual(expectedRange);
         expect(viewport.getOffsetToRenderedContentStart())
-            .toBe(expectedRange.start * testComponent.itemSize,
-                `rendered content offset should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered content offset should match expected value at scroll ` +
+                       `offset ${offset}`).toBe(expectedRange.start * testComponent.itemSize);
         expect(viewport.measureRenderedContentSize())
-            .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize,
-                `rendered content size should match expected value at offset ${offset}`);
+          .withContext(`rendered content size should match expected value at offset ${offset}`)
+          .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize);
       }
     }));
 
@@ -340,9 +347,9 @@ describe('CdkVirtualScrollViewport', () => {
       testComponent.maxBufferPx = testComponent.itemSize;
       finishInit(fixture);
 
-      expect(viewport.getRenderedRange()).toEqual({start: 0, end: 5},
-          'should render the first 5 50px items to fill 200px space, plus one buffer element at' +
-          ' the end');
+      expect(viewport.getRenderedRange())
+        .withContext('should render the first 5 50px items to fill 200px space, ' +
+                     'plus one buffer element at the end').toEqual({ start: 0, end: 5 });
     }));
 
     it('should render buffer element at the start and end when scrolled to the middle',
@@ -354,9 +361,9 @@ describe('CdkVirtualScrollViewport', () => {
           fixture.detectChanges();
           flush();
 
-          expect(viewport.getRenderedRange()).toEqual({start: 1, end: 7},
-              'should render 6 50px items to fill 200px space, plus one buffer element at the' +
-              ' start and end');
+          expect(viewport.getRenderedRange())
+            .withContext('should render 6 50px items to fill 200px space, plus one ' +
+                         'buffer element at the start and end').toEqual({ start: 1, end: 7 });
         }));
 
     it('should render buffer element at the start when scrolled to the bottom', fakeAsync(() => {
@@ -367,9 +374,9 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.getRenderedRange()).toEqual({start: 5, end: 10},
-          'should render the last 5 50px items to fill 200px space, plus one buffer element at' +
-          ' the start');
+      expect(viewport.getRenderedRange())
+        .withContext('should render the last 5 50px items to fill 200px space, plus one ' +
+                     'buffer element at the start').toEqual({ start: 5, end: 10 });
     }));
 
     it('should handle dynamic item size', fakeAsync(() => {
@@ -379,14 +386,16 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 2, end: 6}, 'should render 4 50px items to fill 200px space');
+        .withContext('should render 4 50px items to fill 200px space')
+        .toEqual({ start: 2, end: 6 });
 
       testComponent.itemSize *= 2;
       fixture.detectChanges();
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 1, end: 3}, 'should render 2 100px items to fill 200px space');
+        .withContext('should render 2 100px items to fill 200px space')
+        .toEqual({ start: 1, end: 3 });
     }));
 
     it('should handle dynamic buffer size', fakeAsync(() => {
@@ -396,7 +405,8 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 2, end: 6}, 'should render 4 50px items to fill 200px space');
+        .withContext('should render 4 50px items to fill 200px space')
+        .toEqual({ start: 2, end: 6 });
 
       testComponent.minBufferPx = testComponent.itemSize;
       testComponent.maxBufferPx = testComponent.itemSize;
@@ -404,7 +414,8 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 1, end: 7}, 'should expand to 1 buffer element on each side');
+        .withContext('should expand to 1 buffer element on each side')
+        .toEqual({ start: 1, end: 7 });
     }));
 
     it('should handle dynamic item array', fakeAsync(() => {
@@ -414,14 +425,15 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(testComponent.itemSize * 6, 'should be scrolled to bottom of 10 item list');
+        .withContext('should be scrolled to bottom of 10 item list')
+        .toBe(testComponent.itemSize * 6);
 
       testComponent.items = Array(5).fill(0);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(testComponent.itemSize, 'should be scrolled to bottom of 5 item list');
+        .withContext('should be scrolled to bottom of 5 item list').toBe(testComponent.itemSize);
     }));
 
     it('should handle dynamic item array with dynamic buffer', fakeAsync(() => {
@@ -431,7 +443,8 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(testComponent.itemSize * 6, 'should be scrolled to bottom of 10 item list');
+        .withContext('should be scrolled to bottom of 10 item list')
+        .toBe(testComponent.itemSize * 6);
 
       testComponent.items = Array(5).fill(0);
       testComponent.minBufferPx = testComponent.itemSize;
@@ -441,7 +454,7 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(0, 'should render from first item');
+        .withContext('should render from first item').toBe(0);
     }));
 
     it('should handle dynamic item array keeping position when possible', fakeAsync(() => {
@@ -452,14 +465,14 @@ describe('CdkVirtualScrollViewport', () => {
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(testComponent.itemSize * 50, 'should be scrolled to index 50 item list');
+        .withContext('should be scrolled to index 50 item list').toBe(testComponent.itemSize * 50);
 
       testComponent.items = Array(54).fill(0);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getOffsetToRenderedContentStart())
-          .toBe(testComponent.itemSize * 50, 'should be kept the scroll position');
+        .withContext('should be kept the scroll position').toBe(testComponent.itemSize * 50);
     }));
 
     it('should update viewport as user scrolls right in horizontal mode', fakeAsync(() => {
@@ -478,14 +491,14 @@ describe('CdkVirtualScrollViewport', () => {
           end: Math.ceil((offset + testComponent.viewportSize) / testComponent.itemSize)
         };
         expect(viewport.getRenderedRange())
-            .toEqual(expectedRange,
-                `rendered range should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered range should match expected value at scroll offset ${offset}`)
+          .toEqual(expectedRange);
         expect(viewport.getOffsetToRenderedContentStart())
-            .toBe(expectedRange.start * testComponent.itemSize,
-                `rendered content offset should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered content offset should match expected value at scroll ` +
+                       `offset ${offset}`).toBe(expectedRange.start * testComponent.itemSize);
         expect(viewport.measureRenderedContentSize())
-            .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize,
-                `rendered content size should match expected value at offset ${offset}`);
+          .withContext(`rendered content size should match expected value at offset ${offset}`)
+          .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize);
       }
     }));
 
@@ -505,14 +518,14 @@ describe('CdkVirtualScrollViewport', () => {
           end: Math.ceil((offset + testComponent.viewportSize) / testComponent.itemSize)
         };
         expect(viewport.getRenderedRange())
-            .toEqual(expectedRange,
-                `rendered range should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered range should match expected value at scroll offset ${offset}`)
+          .toEqual(expectedRange);
         expect(viewport.getOffsetToRenderedContentStart())
-            .toBe(expectedRange.start * testComponent.itemSize,
-                `rendered content offset should match expected value at scroll offset ${offset}`);
+          .withContext(`rendered content offset should match expected value at scroll ` +
+                       `offset ${offset}`).toBe(expectedRange.start * testComponent.itemSize);
         expect(viewport.measureRenderedContentSize())
-            .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize,
-                `rendered content size should match expected value at offset ${offset}`);
+          .withContext(`rendered content size should match expected value at offset ${offset}`)
+          .toBe((expectedRange.end - expectedRange.start) * testComponent.itemSize);
       }
     }));
 
@@ -522,7 +535,7 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 4}, 'newly emitted items should be rendered');
+        .withContext('newly emitted items should be rendered').toEqual({ start: 0, end: 4 });
     }));
 
     it('should work with an Observable', fakeAsync(() => {
@@ -531,14 +544,14 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 0}, 'no items should be rendered');
+        .withContext('no items should be rendered').toEqual({ start: 0, end: 0 });
 
       data.next([1, 2, 3]);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 3}, 'newly emitted items should be rendered');
+        .withContext('newly emitted items should be rendered').toEqual({ start: 0, end: 3 });
     }));
 
     it('should work with a DataSource', fakeAsync(() => {
@@ -547,14 +560,14 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 0}, 'no items should be rendered');
+        .withContext('no items should be rendered').toEqual({ start: 0, end: 0 });
 
       data.next([1, 2, 3]);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 3}, 'newly emitted items should be rendered');
+        .withContext('newly emitted items should be rendered').toEqual({ start: 0, end: 3 });
     }));
 
     it('should disconnect from data source on destroy', fakeAsync(() => {
@@ -692,21 +705,21 @@ describe('CdkVirtualScrollViewport', () => {
       finishInit(fixture);
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 6}, 'should have 2 buffer items initially');
+        .withContext('should have 2 buffer items initially').toEqual({ start: 0, end: 6 });
 
       triggerScroll(viewport, 50);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 6}, 'should not render additional buffer yet');
+        .withContext('should not render additional buffer yet').toEqual({ start: 0, end: 6 });
 
       triggerScroll(viewport, 51);
       fixture.detectChanges();
       flush();
 
       expect(viewport.getRenderedRange())
-          .toEqual({start: 0, end: 8}, 'should render 2 more buffer items');
+        .withContext('should render 2 more buffer items').toEqual({ start: 0, end: 8 });
     }));
 
     it('should throw if maxBufferPx is less than minBufferPx', fakeAsync(() => {
diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index d73dd322a50c..791b25bdd187 100644
--- a/src/cdk/table/table.spec.ts
+++ b/src/cdk/table/table.spec.ts
@@ -581,10 +581,11 @@ describe('CdkTable', () => {
     thisFixture.detectChanges();
 
     const rowGroups = Array.from(thisTableElement.querySelectorAll('thead, tbody, tfoot'));
-    expect(rowGroups.length).toBe(3, 'Expected table to have a thead, tbody, and tfoot');
+    expect(rowGroups.length)
+      .withContext('Expected table to have a thead, tbody, and tfoot').toBe(3);
     for (const group of rowGroups) {
       expect(group.getAttribute('role'))
-          .toBe('rowgroup', 'Expected thead, tbody, and tfoot to have role="rowgroup"');
+        .withContext('Expected thead, tbody, and tfoot to have role="rowgroup"').toBe('rowgroup');
     }
   });
 
@@ -594,9 +595,11 @@ describe('CdkTable', () => {
     thisFixture.detectChanges();
 
     const rowGroups: HTMLElement[] = Array.from(thisTableElement.querySelectorAll('thead, tfoot'));
-    expect(rowGroups.length).toBe(2, 'Expected table to have a thead and tfoot');
+    expect(rowGroups.length)
+      .withContext('Expected table to have a thead and tfoot').toBe(2);
     for (const group of rowGroups) {
-      expect(group.style.display).toBe('none', 'Expected thead and tfoot to be `display: none`');
+      expect(group.style.display)
+        .withContext('Expected thead and tfoot to be `display: none`').toBe('none');
     }
   });
 
@@ -873,21 +876,25 @@ describe('CdkTable', () => {
         expect(element.style.position).toBe('');
         expect(element.style.zIndex || '0').toBe('0');
         ['top', 'bottom', 'left', 'right'].forEach(d => {
-          expect(element.style[d] || 'unset').toBe('unset', `Expected ${d} to be unset`);
+          expect(element.style[d] || 'unset')
+            .withContext(`Expected ${d} to be unset`).toBe('unset');
         });
       });
     }
 
     function expectStickyStyles(element: any, zIndex: string, directions: PositionDirections = {}) {
       expect(element.style.position).toContain('sticky');
-      expect(element.style.zIndex).toBe(zIndex, `Expected zIndex to be ${zIndex}`);
+      expect(element.style.zIndex)
+        .withContext(`Expected zIndex to be ${zIndex}`).toBe(zIndex);
 
       ['top', 'bottom', 'left', 'right'].forEach(d => {
         const directionValue = directions[d];
 
         if (!directionValue) {
           // If no expected position for this direction, must either be unset or empty string
-          expect(element.style[d] || 'unset').toBe('unset', `Expected ${d} to be unset`);
+          // If no expected position for this direction, must either be unset or empty string
+          expect(element.style[d] || 'unset')
+            .withContext(`Expected ${d} to be unset`).toBe('unset');
           return;
         }
 
@@ -897,9 +904,10 @@ describe('CdkTable', () => {
         // caused by individual browsers.
         if (directionValue.includes('px')) {
           expect(Math.round(parseInt(element.style[d])))
-            .toBe(Math.round(parseInt(directionValue)), expectationMessage);
+            .withContext(expectationMessage).toBe(Math.round(parseInt(directionValue)));
         } else {
-          expect(element.style[d]).toBe(directionValue, expectationMessage);
+          expect(element.style[d])
+            .withContext(expectationMessage).toBe(directionValue);
         }
       });
     }
diff --git a/src/cdk/text-field/autosize.spec.ts b/src/cdk/text-field/autosize.spec.ts
index 14c4ed412dad..bece03583a5e 100644
--- a/src/cdk/text-field/autosize.spec.ts
+++ b/src/cdk/text-field/autosize.spec.ts
@@ -63,9 +63,11 @@ describe('CdkTextareaAutosize', () => {
     autosize.resizeToFitContent();
 
     expect(textarea.clientHeight)
-        .toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.');
+      .withContext('Expected textarea to have grown with added content.')
+      .toBeGreaterThan(previousHeight);
     expect(textarea.clientHeight)
-        .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+      .withContext('Expected textarea height to match its scrollHeight')
+      .toBe(textarea.scrollHeight);
 
     previousHeight = textarea.clientHeight;
     textarea.value += `
@@ -80,9 +82,11 @@ describe('CdkTextareaAutosize', () => {
     autosize.resizeToFitContent();
 
     expect(textarea.clientHeight)
-        .toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.');
+      .withContext('Expected textarea to have grown with added content.')
+      .toBeGreaterThan(previousHeight);
     expect(textarea.clientHeight)
-        .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+      .withContext('Expected textarea height to match its scrollHeight')
+      .toBe(textarea.scrollHeight);
   });
 
   it('should keep the placeholder size if the value is shorter than the placeholder', () => {
@@ -103,7 +107,8 @@ describe('CdkTextareaAutosize', () => {
     fixture.detectChanges();
 
     expect(textarea.clientHeight)
-        .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+      .withContext('Expected textarea height to match its scrollHeight')
+      .toBe(textarea.scrollHeight);
 
     let previousHeight = textarea.clientHeight;
 
@@ -114,7 +119,7 @@ describe('CdkTextareaAutosize', () => {
     autosize.resizeToFitContent();
 
     expect(textarea.clientHeight)
-        .toBe(previousHeight, 'Expected textarea height not to have changed');
+      .withContext('Expected textarea height not to have changed').toBe(previousHeight);
   });
 
   it('should set a min-height based on minRows', () => {
@@ -123,14 +128,16 @@ describe('CdkTextareaAutosize', () => {
     fixture.componentInstance.minRows = 4;
     fixture.detectChanges();
 
-    expect(textarea.style.minHeight).toBeDefined('Expected a min-height to be set via minRows.');
+    expect(textarea.style.minHeight)
+      .withContext('Expected a min-height to be set via minRows.').toBeDefined();
 
     let previousMinHeight = parseInt(textarea.style.minHeight as string);
     fixture.componentInstance.minRows = 6;
     fixture.detectChanges();
 
     expect(parseInt(textarea.style.minHeight as string))
-        .toBeGreaterThan(previousMinHeight, 'Expected increased min-height with minRows increase.');
+      .withContext('Expected increased min-height with minRows increase.')
+      .toBeGreaterThan(previousMinHeight);
   });
 
   it('should set a max-height based on maxRows', () => {
@@ -139,14 +146,16 @@ describe('CdkTextareaAutosize', () => {
     fixture.componentInstance.maxRows = 4;
     fixture.detectChanges();
 
-    expect(textarea.style.maxHeight).toBeDefined('Expected a max-height to be set via maxRows.');
+    expect(textarea.style.maxHeight)
+      .withContext('Expected a max-height to be set via maxRows.').toBeDefined();
 
     let previousMaxHeight = parseInt(textarea.style.maxHeight as string);
     fixture.componentInstance.maxRows = 6;
     fixture.detectChanges();
 
     expect(parseInt(textarea.style.maxHeight as string))
-        .toBeGreaterThan(previousMaxHeight, 'Expected increased max-height with maxRows increase.');
+      .withContext('Expected increased max-height with maxRows increase.')
+      .toBeGreaterThan(previousMaxHeight);
   });
 
   it('should reduce textarea height when minHeight decreases', () => {
@@ -155,14 +164,15 @@ describe('CdkTextareaAutosize', () => {
     fixture.componentInstance.minRows = 6;
     fixture.detectChanges();
 
-    expect(textarea.style.minHeight).toBeDefined('Expected a min-height to be set via minRows.');
+    expect(textarea.style.minHeight)
+      .withContext('Expected a min-height to be set via minRows.').toBeDefined();
 
     let previousHeight = parseInt(textarea.style.height!);
     fixture.componentInstance.minRows = 3;
     fixture.detectChanges();
 
     expect(parseInt(textarea.style.height!))
-        .toBeLessThan(previousHeight, 'Expected decreased height with minRows decrease.');
+      .withContext('Expected decreased height with minRows decrease.').toBeLessThan(previousHeight);
   });
 
   it('should export the cdkAutosize reference', () => {
@@ -172,24 +182,25 @@ describe('CdkTextareaAutosize', () => {
 
   it('should initially set the rows of a textarea to one', () => {
     expect(textarea.rows)
-      .toBe(1, 'Expected the directive to initially set the rows property to one.');
+      .withContext('Expected the directive to initially set the rows property to one.').toBe(1);
 
     fixture.componentInstance.minRows = 1;
     fixture.detectChanges();
 
     expect(textarea.rows)
-      .toBe(1, 'Expected the textarea to have the rows property set to one.');
+      .withContext('Expected the textarea to have the rows property set to one.').toBe(1);
 
     const previousMinHeight = parseInt(textarea.style.minHeight as string);
 
     fixture.componentInstance.minRows = 2;
     fixture.detectChanges();
 
-    expect(textarea.rows).toBe(1, 'Expected the rows property to be set to one. ' +
-      'The amount of rows will be specified using CSS.');
+    expect(textarea.rows)
+      .withContext('Expected the rows property to be set to one. ' +
+    'The amount of rows will be specified using CSS.').toBe(1);
 
     expect(parseInt(textarea.style.minHeight as string))
-      .toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.');
+      .withContext('Expected the textarea to grow to two rows.').toBeGreaterThan(previousMinHeight);
   });
 
   it('should calculate the proper height based on the specified amount of max rows', () => {
@@ -198,13 +209,15 @@ describe('CdkTextareaAutosize', () => {
     autosize.resizeToFitContent();
 
     expect(textarea.clientHeight)
-      .toBe(textarea.scrollHeight, 'Expected textarea to not have a vertical scrollbar.');
+      .withContext('Expected textarea to not have a vertical scrollbar.')
+      .toBe(textarea.scrollHeight);
 
     fixture.componentInstance.maxRows = 5;
     fixture.detectChanges();
 
     expect(textarea.clientHeight)
-      .toBeLessThan(textarea.scrollHeight, 'Expected textarea to have a vertical scrollbar.');
+      .withContext('Expected textarea to have a vertical scrollbar.')
+      .toBeLessThan(textarea.scrollHeight);
   });
 
   it('should properly resize to content on init', () => {
@@ -225,7 +238,8 @@ describe('CdkTextareaAutosize', () => {
     fixture.detectChanges();
 
     expect(textarea.clientHeight)
-      .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+      .withContext('Expected textarea height to match its scrollHeight')
+      .toBe(textarea.scrollHeight);
   });
 
   it('should properly resize to placeholder on init', () => {
@@ -246,7 +260,8 @@ describe('CdkTextareaAutosize', () => {
     fixture.detectChanges();
 
     expect(textarea.clientHeight)
-      .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+      .withContext('Expected textarea height to match its scrollHeight')
+      .toBe(textarea.scrollHeight);
   });
 
   it('should resize when an associated form control value changes', fakeAsync(() => {
@@ -268,7 +283,8 @@ describe('CdkTextareaAutosize', () => {
     fixtureWithForms.detectChanges();
 
     expect(textarea.clientHeight)
-        .toBeGreaterThan(previousHeight, 'Expected increased height when ngModel is updated.');
+      .withContext('Expected increased height when ngModel is updated.')
+      .toBeGreaterThan(previousHeight);
   }));
 
   it('should resize when the textarea value is changed programmatically', fakeAsync(() => {
@@ -284,7 +300,8 @@ describe('CdkTextareaAutosize', () => {
     fixture.detectChanges();
 
     expect(textarea.clientHeight)
-        .toBeGreaterThan(previousHeight, 'Expected the textarea height to have increased.');
+      .withContext('Expected the textarea height to have increased.')
+      .toBeGreaterThan(previousHeight);
   }));
 
   it('should trigger a resize when the window is resized', fakeAsync(() => {
@@ -317,26 +334,26 @@ describe('CdkTextareaAutosize', () => {
     fixtureWithoutAutosize.detectChanges();
 
     expect(textarea.clientHeight)
-        .toEqual(previousHeight, 'Expected textarea to still have the same size.');
+      .withContext('Expected textarea to still have the same size.').toEqual(previousHeight);
     expect(textarea.clientHeight)
-        .toBeLessThan(textarea.scrollHeight, 'Expected textarea to a have scrollbar.');
+      .withContext('Expected textarea to a have scrollbar.').toBeLessThan(textarea.scrollHeight);
 
     autosize.enabled = true;
     fixtureWithoutAutosize.detectChanges();
 
     expect(textarea.clientHeight)
-        .toBeGreaterThan(previousHeight,
-            'Expected textarea to have grown after enabling autosize.');
+      .withContext('Expected textarea to have grown after enabling autosize.')
+      .toBeGreaterThan(previousHeight);
     expect(textarea.clientHeight)
-        .toBe(textarea.scrollHeight, 'Expected textarea not to have a scrollbar');
+      .withContext('Expected textarea not to have a scrollbar').toBe(textarea.scrollHeight);
 
     autosize.enabled = false;
     fixtureWithoutAutosize.detectChanges();
 
     expect(textarea.clientHeight)
-        .toEqual(previousHeight, 'Expected textarea to have the original size.');
+      .withContext('Expected textarea to have the original size.').toEqual(previousHeight);
     expect(textarea.clientHeight)
-        .toBeLessThan(textarea.scrollHeight, 'Expected textarea to have a scrollbar.');
+      .withContext('Expected textarea to have a scrollbar.').toBeLessThan(textarea.scrollHeight);
   }));
 });
 
diff --git a/src/cdk/tree/control/flat-tree-control.spec.ts b/src/cdk/tree/control/flat-tree-control.spec.ts
index 0458d03bf33f..bedf0a92be8a 100644
--- a/src/cdk/tree/control/flat-tree-control.spec.ts
+++ b/src/cdk/tree/control/flat-tree-control.spec.ts
@@ -21,34 +21,39 @@ describe('CdkFlatTreeControl', () => {
 
 
       expect(treeControl.isExpanded(secondNode))
-          .toBeTruthy('Expect second node to be expanded');
+        .withContext('Expect second node to be expanded')
+        .toBeTruthy();
       expect(treeControl.expansionModel.selected)
-          .toContain(secondNode, 'Expect second node in expansionModel');
+        .withContext('Expect second node in expansionModel').toContain(secondNode);
       expect(treeControl.expansionModel.selected.length)
-          .toBe(1, 'Expect only second node in expansionModel');
+        .withContext('Expect only second node in expansionModel').toBe(1);
 
       treeControl.toggle(sixthNode);
 
       expect(treeControl.isExpanded(secondNode))
-          .toBeTruthy('Expect second node to stay expanded');
+          .withContext('Expect second node to stay expanded')
+          .toBeTruthy();
       expect(treeControl.isExpanded(sixthNode))
-          .toBeTruthy('Expect sixth node to be expanded');
+        .withContext('Expect sixth node to be expanded')
+        .toBeTruthy();
       expect(treeControl.expansionModel.selected)
-          .toContain(sixthNode, 'Expect sixth node in expansionModel');
+        .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
       expect(treeControl.expansionModel.selected)
-          .toContain(secondNode, 'Expect second node in expansionModel');
+        .withContext('Expect second node in expansionModel').toContain(secondNode);
       expect(treeControl.expansionModel.selected.length)
-          .toBe(2, 'Expect two dataNodes in expansionModel');
+        .withContext('Expect two dataNodes in expansionModel').toBe(2);
 
       treeControl.collapse(secondNode);
 
       expect(treeControl.isExpanded(secondNode))
-          .toBeFalsy('Expect second node to be collapsed');
+        .withContext('Expect second node to be collapsed')
+        .toBeFalsy();
       expect(treeControl.expansionModel.selected.length)
-          .toBe(1, 'Expect one node in expansionModel');
-      expect(treeControl.isExpanded(sixthNode)).toBeTruthy('Expect sixth node to stay expanded');
+        .withContext('Expect one node in expansionModel').toBe(1);
+      expect(treeControl.isExpanded(sixthNode))
+        .withContext('Expect sixth node to stay expanded').toBeTruthy();
       expect(treeControl.expansionModel.selected)
-          .toContain(sixthNode, 'Expect sixth node in expansionModel');
+        .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
     });
 
     it('should return correct expandable values', () => {
@@ -57,11 +62,13 @@ describe('CdkFlatTreeControl', () => {
 
       for (let i = 0; i < 10; i++) {
         expect(treeControl.isExpandable(nodes[i]))
-          .toBeTruthy(`Expect node[${i}] to be expandable`);
+          .withContext(`Expect node[${i}] to be expandable`)
+          .toBeTruthy();
 
         for (let j = 0; j < 4; j++) {
           expect(treeControl.isExpandable(nodes[i].children[j]))
-            .toBeFalsy(`Expect node[${i}]'s child[${j}] to be not expandable`);
+            .withContext(`Expect node[${i}]'s child[${j}] to be not expandable`)
+            .toBeFalsy();
         }
       }
     });
@@ -75,15 +82,15 @@ describe('CdkFlatTreeControl', () => {
 
       for (let i = 0; i < numNodes; i++) {
         expect(treeControl.getLevel(nodes[i]))
-          .toBe(1, `Expec node[${i}]'s level to be 1`);
+          .withContext(`Expec node[${i}]'s level to be 1`).toBe(1);
 
         for (let j = 0; j < numChildren; j++) {
           expect(treeControl.getLevel(nodes[i].children[j]))
-            .toBe(2, `Expect node[${i}]'s child[${j}] to be not expandable`);
+            .withContext(`Expect node[${i}]'s child[${j}] to be not expandable`).toBe(2);
 
           for (let k = 0; k < numGrandChildren; k++) {
             expect(treeControl.getLevel(nodes[i].children[j].children[k]))
-              .toBe(3, `Expect node[${i}]'s child[${j}] to be not expandable`);
+              .withContext(`Expect node[${i}]'s child[${j}] to be not expandable`).toBe(3);
           }
         }
       }
@@ -102,16 +109,20 @@ describe('CdkFlatTreeControl', () => {
 
       const expandedNodesNum = 1 + numChildren + numChildren * numGrandChildren;
       expect(treeControl.expansionModel.selected.length)
-          .toBe(expandedNodesNum, `Expect expanded ${expandedNodesNum} nodes`);
+        .withContext(`Expect expanded ${expandedNodesNum} nodes`).toBe(expandedNodesNum);
 
-      expect(treeControl.isExpanded(nodes[1])).toBeTruthy('Expect second node to be expanded');
+      expect(treeControl.isExpanded(nodes[1]))
+        .withContext('Expect second node to be expanded')
+        .toBeTruthy();
       for (let i = 0; i < numChildren; i++) {
 
         expect(treeControl.isExpanded(nodes[1].children[i]))
-          .toBeTruthy(`Expect second node's children to be expanded`);
+          .withContext(`Expect second node's children to be expanded`)
+          .toBeTruthy();
         for (let j = 0; j < numGrandChildren; j++) {
           expect(treeControl.isExpanded(nodes[1].children[i].children[j]))
-              .toBeTruthy(`Expect second node grand children to be not expanded`);
+            .withContext(`Expect second node grand children to be not expanded`)
+            .toBeTruthy();
         }
       }
 
@@ -130,14 +141,15 @@ describe('CdkFlatTreeControl', () => {
 
       treeControl.collapseAll();
 
-      expect(treeControl.expansionModel.selected.length).toBe(0, `Expect no expanded nodes`);
+      expect(treeControl.expansionModel.selected.length)
+        .withContext(`Expect no expanded nodes`).toBe(0);
 
       treeControl.expandAll();
 
       const totalNumber = numNodes + numNodes * numChildren
           + numNodes * numChildren * numGrandChildren;
       expect(treeControl.expansionModel.selected.length)
-        .toBe(totalNumber, `Expect ${totalNumber} expanded nodes`);
+        .withContext(`Expect ${totalNumber} expanded nodes`).toBe(totalNumber);
     });
   });
 
@@ -150,12 +162,14 @@ describe('CdkFlatTreeControl', () => {
     treeControl.trackBy = (node: TestData) => `${node.a} ${node.b} ${node.c}`;
 
     treeControl.expand(secondNode);
-    expect(treeControl.isExpanded(secondNode)).toBeTruthy('Expect second node to be expanded');
+    expect(treeControl.isExpanded(secondNode))
+      .withContext('Expect second node to be expanded').toBeTruthy();
 
     // Replace the second node with a brand new instance with same hash
     nodes[1] = new TestData(
         secondNode.a, secondNode.b, secondNode.c, secondNode.level, secondNode.children);
-    expect(treeControl.isExpanded(nodes[1])).toBeTruthy('Expect second node to still be expanded');
+    expect(treeControl.isExpanded(nodes[1]))
+      .withContext('Expect second node to still be expanded').toBeTruthy();
   });
 });
 
diff --git a/src/cdk/tree/control/nested-tree-control.spec.ts b/src/cdk/tree/control/nested-tree-control.spec.ts
index eb38072e610d..d426acdfe30a 100644
--- a/src/cdk/tree/control/nested-tree-control.spec.ts
+++ b/src/cdk/tree/control/nested-tree-control.spec.ts
@@ -22,30 +22,34 @@ describe('CdkNestedTreeControl', () => {
       treeControl.expand(node);
 
 
-      expect(treeControl.isExpanded(node)).toBeTruthy('Expect second node to be expanded');
+      expect(treeControl.isExpanded(node))
+        .withContext('Expect second node to be expanded').toBeTruthy();
       expect(treeControl.expansionModel.selected)
-        .toContain(node, 'Expect second node in expansionModel');
+        .withContext('Expect second node in expansionModel').toContain(node);
       expect(treeControl.expansionModel.selected.length)
-        .toBe(1, 'Expect only second node in expansionModel');
+        .withContext('Expect only second node in expansionModel').toBe(1);
 
       treeControl.toggle(sixthNode);
 
-      expect(treeControl.isExpanded(node)).toBeTruthy('Expect second node to stay expanded');
+      expect(treeControl.isExpanded(node))
+        .withContext('Expect second node to stay expanded').toBeTruthy();
       expect(treeControl.expansionModel.selected)
-        .toContain(sixthNode, 'Expect sixth node in expansionModel');
+        .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
       expect(treeControl.expansionModel.selected)
-        .toContain(node, 'Expect second node in expansionModel');
+        .withContext('Expect second node in expansionModel').toContain(node);
       expect(treeControl.expansionModel.selected.length)
-        .toBe(2, 'Expect two dataNodes in expansionModel');
+        .withContext('Expect two dataNodes in expansionModel').toBe(2);
 
       treeControl.collapse(node);
 
-      expect(treeControl.isExpanded(node)).toBeFalsy('Expect second node to be collapsed');
+      expect(treeControl.isExpanded(node))
+        .withContext('Expect second node to be collapsed').toBeFalsy();
       expect(treeControl.expansionModel.selected.length)
-        .toBe(1, 'Expect one node in expansionModel');
-      expect(treeControl.isExpanded(sixthNode)).toBeTruthy('Expect sixth node to stay expanded');
+        .withContext('Expect one node in expansionModel').toBe(1);
+      expect(treeControl.isExpanded(sixthNode))
+        .withContext('Expect sixth node to stay expanded').toBeTruthy();
       expect(treeControl.expansionModel.selected)
-        .toContain(sixthNode, 'Expect sixth node in expansionModel');
+        .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
     });
 
     it('should toggle descendants correctly', () => {
@@ -59,16 +63,19 @@ describe('CdkNestedTreeControl', () => {
 
       const expandedNodesNum = 1 + numChildren + numChildren * numGrandChildren;
       expect(treeControl.expansionModel.selected.length)
-        .toBe(expandedNodesNum, `Expect expanded ${expandedNodesNum} nodes`);
+        .withContext(`Expect expanded ${expandedNodesNum} nodes`).toBe(expandedNodesNum);
 
-      expect(treeControl.isExpanded(nodes[1])).toBeTruthy('Expect second node to be expanded');
+      expect(treeControl.isExpanded(nodes[1]))
+        .withContext('Expect second node to be expanded').toBeTruthy();
       for (let i = 0; i < numChildren; i++) {
 
         expect(treeControl.isExpanded(nodes[1].children[i]))
-          .toBeTruthy(`Expect second node's children to be expanded`);
+          .withContext(`Expect second node's children to be expanded`)
+          .toBeTruthy();
         for (let j = 0; j < numGrandChildren; j++) {
           expect(treeControl.isExpanded(nodes[1].children[i].children[j]))
-            .toBeTruthy(`Expect second node grand children to be expanded`);
+            .withContext(`Expect second node grand children to be expanded`)
+            .toBeTruthy();
         }
       }
     });
@@ -84,14 +91,15 @@ describe('CdkNestedTreeControl', () => {
 
       treeControl.collapseAll();
 
-      expect(treeControl.expansionModel.selected.length).toBe(0, `Expect no expanded nodes`);
+      expect(treeControl.expansionModel.selected.length)
+        .withContext(`Expect no expanded nodes`).toBe(0);
 
       treeControl.expandAll();
 
       const totalNumber = numNodes + numNodes * numChildren
         + numNodes * numChildren * numGrandChildren;
       expect(treeControl.expansionModel.selected.length)
-        .toBe(totalNumber, `Expect ${totalNumber} expanded nodes`);
+        .withContext(`Expect ${totalNumber} expanded nodes`).toBe(totalNumber);
     });
 
     // Note that this needs to be `fakeAsync` in order to
@@ -124,30 +132,34 @@ describe('CdkNestedTreeControl', () => {
         treeControl.expand(node);
 
 
-        expect(treeControl.isExpanded(node)).toBeTruthy('Expect second node to be expanded');
+        expect(treeControl.isExpanded(node))
+          .withContext('Expect second node to be expanded').toBeTruthy();
         expect(treeControl.expansionModel.selected)
-          .toContain(node, 'Expect second node in expansionModel');
+          .withContext('Expect second node in expansionModel').toContain(node);
         expect(treeControl.expansionModel.selected.length)
-          .toBe(1, 'Expect only second node in expansionModel');
+          .withContext('Expect only second node in expansionModel').toBe(1);
 
         treeControl.toggle(sixthNode);
 
-        expect(treeControl.isExpanded(node)).toBeTruthy('Expect second node to stay expanded');
+        expect(treeControl.isExpanded(node))
+          .withContext('Expect second node to stay expanded').toBeTruthy();
         expect(treeControl.expansionModel.selected)
-          .toContain(sixthNode, 'Expect sixth node in expansionModel');
+          .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
         expect(treeControl.expansionModel.selected)
-          .toContain(node, 'Expect second node in expansionModel');
+          .withContext('Expect second node in expansionModel').toContain(node);
         expect(treeControl.expansionModel.selected.length)
-          .toBe(2, 'Expect two dataNodes in expansionModel');
+          .withContext('Expect two dataNodes in expansionModel').toBe(2);
 
         treeControl.collapse(node);
 
-        expect(treeControl.isExpanded(node)).toBeFalsy('Expect second node to be collapsed');
+        expect(treeControl.isExpanded(node))
+          .withContext('Expect second node to be collapsed').toBeFalsy();
         expect(treeControl.expansionModel.selected.length)
-          .toBe(1, 'Expect one node in expansionModel');
-        expect(treeControl.isExpanded(sixthNode)).toBeTruthy('Expect sixth node to stay expanded');
+          .withContext('Expect one node in expansionModel').toBe(1);
+        expect(treeControl.isExpanded(sixthNode))
+          .withContext('Expect sixth node to stay expanded').toBeTruthy();
         expect(treeControl.expansionModel.selected)
-          .toContain(sixthNode, 'Expect sixth node in expansionModel');
+          .withContext('Expect sixth node in expansionModel').toContain(sixthNode);
       });
 
       it('should toggle descendants correctly', () => {
@@ -161,16 +173,19 @@ describe('CdkNestedTreeControl', () => {
 
         const expandedNodesNum = 1 + numChildren + numChildren * numGrandChildren;
         expect(treeControl.expansionModel.selected.length)
-          .toBe(expandedNodesNum, `Expect expanded ${expandedNodesNum} nodes`);
+          .withContext(`Expect expanded ${expandedNodesNum} nodes`).toBe(expandedNodesNum);
 
-        expect(treeControl.isExpanded(nodes[1])).toBeTruthy('Expect second node to be expanded');
+        expect(treeControl.isExpanded(nodes[1]))
+          .withContext('Expect second node to be expanded').toBeTruthy();
         for (let i = 0; i < numChildren; i++) {
 
           expect(treeControl.isExpanded(nodes[1].children[i]))
-            .toBeTruthy(`Expect second node's children to be expanded`);
+            .withContext(`Expect second node's children to be expanded`)
+            .toBeTruthy();
           for (let j = 0; j < numGrandChildren; j++) {
             expect(treeControl.isExpanded(nodes[1].children[i].children[j]))
-              .toBeTruthy(`Expect second node grand children to be expanded`);
+              .withContext(`Expect second node grand children to be expanded`)
+              .toBeTruthy();
           }
         }
       });
@@ -186,14 +201,15 @@ describe('CdkNestedTreeControl', () => {
 
         treeControl.collapseAll();
 
-        expect(treeControl.expansionModel.selected.length).toBe(0, `Expect no expanded nodes`);
+        expect(treeControl.expansionModel.selected.length)
+          .withContext(`Expect no expanded nodes`).toBe(0);
 
         treeControl.expandAll();
 
         const totalNumber = numNodes + (numNodes * numChildren)
           + (numNodes * numChildren * numGrandChildren);
         expect(treeControl.expansionModel.selected.length)
-          .toBe(totalNumber, `Expect ${totalNumber} expanded nodes`);
+          .withContext(`Expect ${totalNumber} expanded nodes`).toBe(totalNumber);
       });
     });
   });
@@ -207,12 +223,16 @@ describe('CdkNestedTreeControl', () => {
     treeControl.dataNodes = nodes;
 
     treeControl.expand(secondNode);
-    expect(treeControl.isExpanded(secondNode)).toBeTruthy('Expect second node to be expanded');
+    expect(treeControl.isExpanded(secondNode))
+      .withContext('Expect second node to be expanded')
+      .toBeTruthy();
 
     // Replace the second node with a brand new instance with same hash
     nodes[1] = new TestData(
         secondNode.a, secondNode.b, secondNode.c, secondNode.level, secondNode.children);
-    expect(treeControl.isExpanded(nodes[1])).toBeTruthy('Expect second node to still be expanded');
+    expect(treeControl.isExpanded(nodes[1]))
+      .withContext('Expect second node to still be expanded')
+      .toBeTruthy();
   });
 
 });
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index f0c0dcdd6d30..a1535c83d6f2 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/src/cdk/tree/tree.spec.ts
@@ -108,7 +108,7 @@ describe('CdkTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
@@ -242,7 +242,7 @@ describe('CdkTree', () => {
         expect(dataSource.data.length).toBe(3);
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect no expanded node`);
+          .withContext(`Expect no expanded node`).toBe(0);
 
         component.toggleRecursively = false;
         let data = dataSource.data;
@@ -262,21 +262,21 @@ describe('CdkTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(1, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(1);
         expect(component.treeControl.expansionModel.selected[0]).toBe(data[2]);
 
         (getNodes(treeElement)[2] as HTMLElement).click();
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
       });
 
       it('should expand/collapse the node recursively', () => {
         expect(dataSource.data.length).toBe(3);
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect no expanded node`);
+          .withContext(`Expect no expanded node`).toBe(0);
 
         let data = dataSource.data;
         dataSource.addChild(data[2]);
@@ -294,17 +294,17 @@ describe('CdkTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(2, `Expect nodes expanded`);
+          .withContext(`Expect nodes expanded`).toBe(2);
         expect(component.treeControl.expansionModel.selected[0])
-          .toBe(data[2], `Expect parent node expanded`);
+          .withContext(`Expect parent node expanded`).toBe(data[2]);
         expect(component.treeControl.expansionModel.selected[1])
-          .toBe(data[3], `Expected child node expanded`);
+          .withContext(`Expected child node expanded`).toBe(data[3]);
 
         (getNodes(treeElement)[2] as HTMLElement).click();
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
       });
     });
 
@@ -550,7 +550,7 @@ describe('CdkTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
@@ -745,7 +745,7 @@ describe('CdkTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(1, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(1);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
@@ -760,13 +760,13 @@ describe('CdkTree', () => {
           [`topping_2 - cheese_2 + base_2`],
           [`topping_3 - cheese_3 + base_3`]);
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
 
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(1, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(1);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
@@ -789,7 +789,7 @@ describe('CdkTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(3, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(3);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
@@ -801,7 +801,7 @@ describe('CdkTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
diff --git a/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts b/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts
index 7d0337a9d063..1885eda5eda1 100644
--- a/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts
+++ b/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts
@@ -144,7 +144,7 @@ describe('DateFnsAdapter', () => {
 
   it("should get today's date", () => {
     expect(adapter.sameDate(adapter.today(), new Date()))
-        .toBe(true, "should be equal to today's date");
+      .withContext("should be equal to today's date").toBe(true);
   });
 
   it('should parse string according to given format', () => {
@@ -180,7 +180,7 @@ describe('DateFnsAdapter', () => {
     expect(d).not.toBeNull();
     expect(adapter.isDateInstance(d)).toBe(true);
     expect(adapter.isValid(d as Date))
-        .toBe(false, 'Expected to parse as "invalid date" object');
+      .withContext('Expected to parse as "invalid date" object').toBe(false);
   });
 
   it('should format date according to given format', () => {
@@ -322,8 +322,8 @@ function stripDirectionalityCharacters(str: string) {
 }
 
 function assertValidDate(adapter: DateAdapter<Date, Locale>, d: Date | null, valid: boolean) {
-  expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
-  expect(adapter.isValid(d!)).toBe(valid,
-      `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
-      ` but was ${valid ? 'invalid' : 'valid'}`);
+  expect(adapter.isDateInstance(d)).not
+    .withContext(`Expected ${d} to be a date instance`).toBeNull();
+  expect(adapter.isValid(d!)).withContext(`Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
+    ` but was ${valid ? 'invalid' : 'valid'}`).toBe(valid);
 }
diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
index 9b52a7bbdc12..f9e821cd9db2 100644
--- a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
+++ b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
@@ -106,17 +106,17 @@ describe('MDC-based MatAutocomplete', () => {
 
     it('should open the panel when the input is focused', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when input is focused.`);
+        .withContext(`Expected panel state to read open when input is focused.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('California');
     });
 
     it('should not open the panel on focus if the input is readonly', fakeAsync(() => {
@@ -124,12 +124,14 @@ describe('MDC-based MatAutocomplete', () => {
       input.readOnly = true;
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel state to start out closed.').toBe(false);
       dispatchFakeEvent(input, 'focusin');
       flush();
 
       fixture.detectChanges();
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay closed.').toBe(false);
     }));
 
     it('should not open using the arrow keys when the input is readonly', fakeAsync(() => {
@@ -137,27 +139,31 @@ describe('MDC-based MatAutocomplete', () => {
       input.readOnly = true;
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel state to start out closed.').toBe(false);
       dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
       flush();
 
       fixture.detectChanges();
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay closed.').toBe(false);
     }));
 
     it('should open the panel programmatically', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when opened programmatically.`);
+        .withContext(`Expected panel state to read open when opened programmatically.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when opened programmatically.`);
+        .withContext(`Expected panel to display when opened programmatically.`)
+        .toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to display when opened programmatically.`);
+        .withContext(`Expected panel to display when opened programmatically.`)
+        .toContain('California');
     });
 
     it('should show the panel when the first open is after the initial zone stabilization',
@@ -170,7 +176,7 @@ describe('MDC-based MatAutocomplete', () => {
 
           Promise.resolve().then(() => {
             expect(fixture.componentInstance.panel.showPanel)
-                .toBe(true, `Expected panel to be visible.`);
+              .withContext(`Expected panel to be visible.`).toBe(true);
           });
         });
       }));
@@ -183,9 +189,9 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+        .withContext(`Expected clicking outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+        .withContext(`Expected clicking outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => {
@@ -196,9 +202,9 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+        .withContext(`Expected clicking outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+        .withContext(`Expected clicking outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
@@ -208,9 +214,9 @@ describe('MDC-based MatAutocomplete', () => {
       dispatchFakeEvent(document, 'touchend');
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected tapping outside the panel to set its state to closed.`);
+        .withContext(`Expected tapping outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected tapping outside the panel to close the panel.`);
+        .withContext(`Expected tapping outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when an option is clicked', fakeAsync(() => {
@@ -224,9 +230,9 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking an option to set the panel state to closed.`);
+        .withContext(`Expected clicking an option to set the panel state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking an option to close the panel.`);
+        .withContext(`Expected clicking an option to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when a newly created option is clicked', fakeAsync(() => {
@@ -257,9 +263,10 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking a new option to set the panel state to closed.`);
+        .withContext(`Expected clicking a new option to set the panel state to closed.`)
+        .toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking a new option to close the panel.`);
+        .withContext(`Expected clicking a new option to close the panel.`).toEqual('');
     }));
 
     it('should close the panel programmatically', fakeAsync(() => {
@@ -271,9 +278,10 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected closing programmatically to set the panel state to closed.`);
+        .withContext(`Expected closing programmatically to set the panel state to closed.`)
+        .toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected closing programmatically to close the panel.`);
+        .withContext(`Expected closing programmatically to close the panel.`).toEqual('');
     }));
 
     it('should not throw when attempting to close the panel of a destroyed autocomplete', () => {
@@ -294,7 +302,8 @@ describe('MDC-based MatAutocomplete', () => {
           overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement;
 
       expect(panel.classList)
-          .toContain('mat-mdc-autocomplete-visible', `Expected panel to start out visible.`);
+        .withContext(`Expected panel to start out visible.`)
+        .toContain('mat-mdc-autocomplete-visible');
 
       // Filter down the option list such that no options match the value
       typeInElement(input, 'af');
@@ -303,13 +312,14 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(panel.classList)
-          .toContain('mat-mdc-autocomplete-hidden', `Expected panel to hide itself when empty.`);
+        .withContext(`Expected panel to hide itself when empty.`)
+        .toContain('mat-mdc-autocomplete-hidden');
     }));
 
     it('should keep the label floating until the panel closes', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to float as soon as panel opens.');
+        .withContext('Expected label to float as soon as panel opens.').toEqual('always');
 
       zone.simulateZoneExit();
       fixture.detectChanges();
@@ -320,19 +330,19 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('auto', 'Expected label to return to auto state after panel closes.');
+        .withContext('Expected label to return to auto state after panel closes.').toEqual('auto');
     }));
 
     it('should not open the panel when the `input` event is invoked on a non-focused input', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       input.value = 'Alabama';
       dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to stay closed.`);
+        .withContext(`Expected panel state to stay closed.`).toBe(false);
     });
 
    it('should not mess with label placement if set to never', fakeAsync(() => {
@@ -341,7 +351,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('never', 'Expected label to stay static.');
+        .withContext('Expected label to stay static.').toEqual('never');
       flush();
       fixture.detectChanges();
 
@@ -351,7 +361,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('never', 'Expected label to stay in static state after close.');
+        .withContext('Expected label to stay in static state after close.').toEqual('never');
     }));
 
     it('should not mess with label placement if set to always', fakeAsync(() => {
@@ -360,7 +370,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to stay elevated on open.');
+        .withContext('Expected label to stay elevated on open.').toEqual('always');
       flush();
       fixture.detectChanges();
 
@@ -370,7 +380,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to stay elevated after close.');
+        .withContext('Expected label to stay elevated after close.').toEqual('always');
     }));
 
     it('should toggle the visibility when typing and closing the panel', fakeAsync(() => {
@@ -379,7 +389,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
-          .toContain('mat-mdc-autocomplete-visible', 'Expected panel to be visible.');
+        .withContext('Expected panel to be visible.').toContain('mat-mdc-autocomplete-visible');
 
       typeInElement(input, 'x');
       fixture.detectChanges();
@@ -387,7 +397,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
-          .toContain('mat-mdc-autocomplete-hidden', 'Expected panel to be hidden.');
+        .withContext('Expected panel to be hidden.').toContain('mat-mdc-autocomplete-hidden');
 
       fixture.componentInstance.trigger.closePanel();
       fixture.detectChanges();
@@ -402,7 +412,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
-          .toContain('mat-mdc-autocomplete-visible', 'Expected panel to be visible.');
+        .withContext('Expected panel to be visible.').toContain('mat-mdc-autocomplete-visible');
     }));
 
     it('should animate the label when the input is focused', () => {
@@ -502,7 +512,7 @@ describe('MDC-based MatAutocomplete', () => {
 
     it('should not be able to open the panel if the autocomplete is disabled', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       fixture.componentInstance.autocompleteDisabled = true;
       fixture.detectChanges();
@@ -511,7 +521,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel to remain closed.`);
+        .withContext(`Expected panel to remain closed.`).toBe(false);
     });
 
     it('should continue to update the model if the autocomplete is disabled', () => {
@@ -545,13 +555,13 @@ describe('MDC-based MatAutocomplete', () => {
        zone.simulateZoneExit();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to be opened on focus.');
+        .withContext('Expected panel to be opened on focus.').toBe(true);
 
        input.click();
        fixture.detectChanges();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+        .withContext('Expected panel to remain opened after clicking on the input.').toBe(true);
      }));
 
   it('should not close the panel when clicking on the input inside shadow DOM', fakeAsync(() => {
@@ -569,13 +579,13 @@ describe('MDC-based MatAutocomplete', () => {
        zone.simulateZoneExit();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to be opened on focus.');
+        .withContext('Expected panel to be opened on focus.').toBe(true);
 
        input.click();
        fixture.detectChanges();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+        .withContext('Expected panel to remain opened after clicking on the input.').toBe(true);
      }));
 
   it('should have the correct text direction in RTL', () => {
@@ -657,13 +667,13 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual('a', 'Expected control value to be updated as user types.');
+        .withContext('Expected control value to be updated as user types.').toEqual('a');
 
       typeInElement(input, 'l');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual('al', 'Expected control value to be updated as user types.');
+        .withContext('Expected control value to be updated as user types.').toEqual('al');
     });
 
     it('should update control value when autofilling', () => {
@@ -675,7 +685,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toBe('Alabama', 'Expected value to be propagated to the form control.');
+        .withContext('Expected value to be propagated to the form control.').toBe('Alabama');
     });
 
     it('should update control value when option is selected with option value', fakeAsync(() => {
@@ -689,8 +699,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual({code: 'CA', name: 'California'},
-              'Expected control value to equal the selected option value.');
+        .withContext('Expected control value to equal the selected option value.')
+        .toEqual({ code: 'CA', name: 'California' });
     }));
 
     it('should update the control back to a string if user types after an option is selected',
@@ -710,7 +720,7 @@ describe('MDC-based MatAutocomplete', () => {
         tick();
 
         expect(fixture.componentInstance.stateCtrl.value)
-            .toEqual('Californi', 'Expected control value to revert back to string.');
+          .withContext('Expected control value to revert back to string.').toEqual('Californi');
       }));
 
     it('should fill the text field with display value when an option is selected', fakeAsync(() => {
@@ -724,7 +734,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.value)
-          .toContain('California', `Expected text field to fill with selected value.`);
+        .withContext(`Expected text field to fill with selected value.`).toContain('California');
     }));
 
     it('should fill the text field with value if displayWith is not set', fakeAsync(() => {
@@ -742,7 +752,8 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.detectChanges();
       expect(input.value)
-          .toContain('test value', `Expected input to fall back to selected option's value.`);
+        .withContext(`Expected input to fall back to selected option's value.`)
+        .toContain('test value');
     }));
 
     it('should fill the text field correctly if value is set to obj programmatically',
@@ -753,7 +764,8 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(input.value)
-            .toContain('Alabama', `Expected input to fill with matching option's viewValue.`);
+          .withContext(`Expected input to fill with matching option's viewValue.`)
+          .toContain('Alabama');
       }));
 
     it('should clear the text field if value is reset programmatically', fakeAsync(() => {
@@ -767,7 +779,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(input.value).toEqual('', `Expected input value to be empty after reset.`);
+      expect(input.value)
+        .withContext(`Expected input value to be empty after reset.`).toEqual('');
     }));
 
     it('should disable input in view when disabled programmatically', () => {
@@ -775,33 +788,35 @@ describe('MDC-based MatAutocomplete', () => {
           fixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
 
       expect(input.disabled)
-          .toBe(false, `Expected input to start out enabled in view.`);
+        .withContext(`Expected input to start out enabled in view.`).toBe(false);
       expect(formFieldElement.classList.contains('mat-form-field-disabled'))
-          .toBe(false, `Expected input underline to start out with normal styles.`);
+        .withContext(`Expected input underline to start out with normal styles.`).toBe(false);
 
       fixture.componentInstance.stateCtrl.disable();
       fixture.detectChanges();
 
       expect(input.disabled)
-          .toBe(true, `Expected input to be disabled in view when disabled programmatically.`);
+        .withContext(`Expected input to be disabled in view when disabled programmatically.`)
+        .toBe(true);
       expect(formFieldElement.classList.contains('mat-form-field-disabled'))
-          .toBe(true, `Expected input underline to display disabled styles.`);
+        .withContext(`Expected input underline to display disabled styles.`).toBe(true);
     });
 
     it('should mark the autocomplete control as dirty as user types', () => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       typeInElement(input, 'a');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when the user types into the input.`);
+        .withContext(`Expected control to become dirty when the user types into the input.`)
+        .toBe(true);
     });
 
     it('should mark the autocomplete control as dirty when an option is selected', fakeAsync(() => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
@@ -813,31 +828,32 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when an option was selected.`);
+        .withContext(`Expected control to become dirty when an option was selected.`).toBe(true);
     }));
 
     it('should not mark the control dirty when the value is set programmatically', () => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.stateCtrl.setValue('AL');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
+        .withContext(`Expected control to stay pristine if value is set programmatically.`)
+        .toBe(false);
     });
 
     it('should mark the autocomplete control as touched on blur', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(false, `Expected control to start out untouched.`);
+        .withContext(`Expected control to start out untouched.`).toBe(false);
 
       dispatchFakeEvent(input, 'blur');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(true, `Expected control to become touched on blur.`);
+        .withContext(`Expected control to become touched on blur.`).toBe(true);
     });
 
     it('should disable the input when used with a value accessor and without `matInput`', () => {
@@ -891,11 +907,13 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to stay open when DOWN key is pressed.`);
+        .withContext(`Expected panel state to stay open when DOWN key is pressed.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to keep displaying when DOWN key is pressed.`);
+        .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
+        .toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to keep displaying when DOWN key is pressed.`);
+        .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
+        .toContain('California');
     });
 
     it('should set the active item to the first option when DOWN key is pressed', () => {
@@ -904,13 +922,13 @@ describe('MDC-based MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.panelOpen)
-          .toBe(true, 'Expected first down press to open the pane.');
+        .withContext('Expected first down press to open the pane.').toBe(true);
 
       componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-mdc-option-active');
       expect(optionEls[1].classList).not.toContain('mat-mdc-option-active');
 
@@ -918,7 +936,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.toArray()[1])
-          .toBe(true, 'Expected second option to be active.');
+        .withContext('Expected second option to be active.').toBe(true);
       expect(optionEls[0].classList).not.toContain('mat-mdc-option-active');
       expect(optionEls[1].classList).toContain('mat-mdc-option-active');
     });
@@ -929,13 +947,13 @@ describe('MDC-based MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.panelOpen)
-          .toBe(true, 'Expected first up press to open the pane.');
+        .withContext('Expected first up press to open the pane.').toBe(true);
 
       componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.last)
-          .toBe(true, 'Expected last option to be active.');
+        .withContext('Expected last option to be active.').toBe(true);
       expect(optionEls[10].classList).toContain('mat-mdc-option-active');
       expect(optionEls[0].classList).not.toContain('mat-mdc-option-active');
 
@@ -943,7 +961,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-mdc-option-active');
     });
 
@@ -968,7 +986,7 @@ describe('MDC-based MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-mdc-option-active');
       expect(optionEls[1].classList).not.toContain('mat-mdc-option-active');
     });
@@ -981,7 +999,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
       expect(input.value)
-          .toContain('Alabama', `Expected text field to fill with selected value on ENTER.`);
+        .withContext(`Expected text field to fill with selected value on ENTER.`)
+        .toContain('Alabama');
     }));
 
     it('should prevent the default enter key action', fakeAsync(() => {
@@ -991,7 +1010,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
 
       expect(ENTER_EVENT.defaultPrevented)
-          .toBe(true, 'Expected the default action to have been prevented.');
+        .withContext('Expected the default action to have been prevented.').toBe(true);
     }));
 
     it('should not prevent the default enter action for a closed panel after a user action', () => {
@@ -1002,7 +1021,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
 
-      expect(ENTER_EVENT.defaultPrevented).toBe(false, 'Default action should not be prevented.');
+      expect(ENTER_EVENT.defaultPrevented)
+        .withContext('Default action should not be prevented.').toBe(false);
     });
 
     it('should fill the text field, not select an option, when SPACE is entered', () => {
@@ -1016,12 +1036,13 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(SPACE_EVENT);
       fixture.detectChanges();
 
-      expect(input.value).not.toContain('New York', `Expected option not to be selected on SPACE.`);
+      expect(input.value).not
+        .withContext(`Expected option not to be selected on SPACE.`).toContain('New York');
     });
 
     it('should mark the control dirty when selecting an option from the keyboard', fakeAsync(() => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       flush();
@@ -1029,7 +1050,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when option was selected by ENTER.`);
+        .withContext(`Expected control to become dirty when option was selected by ENTER.`)
+        .toBe(true);
     }));
 
     it('should open the panel again when typing after making a selection', fakeAsync(() => {
@@ -1040,9 +1062,9 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to read closed after ENTER key.`);
+        .withContext(`Expected panel state to read closed after ENTER key.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected panel to close after ENTER key.`);
+        .withContext(`Expected panel to close after ENTER key.`).toEqual('');
 
       dispatchFakeEvent(input, 'focusin');
       clearElement(input);
@@ -1051,9 +1073,9 @@ describe('MDC-based MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when typing in input.`);
+        .withContext(`Expected panel state to read open when typing in input.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when typing in input.`);
+        .withContext(`Expected panel to display when typing in input.`).toContain('Alabama');
     }));
 
     it('should not open the panel if the `input` event was dispatched with changing the value',
@@ -1065,12 +1087,14 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.detectChanges();
         tick();
 
-        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to be open.').toBe(true);
 
         trigger.closePanel();
         fixture.detectChanges();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to be closed.').toBe(false);
 
         // Dispatch the event without actually changing the value
         // to simulate what happen in some cases on IE.
@@ -1078,7 +1102,8 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.detectChanges();
         tick();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to stay closed.').toBe(false);
       }));
 
     it('should scroll to active options below the fold', () => {
@@ -1088,14 +1113,16 @@ describe('MDC-based MatAutocomplete', () => {
 
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
       // Expect option bottom minus the panel height plus padding (288 - 256 + 8 = 40)
-      expect(scrollContainer.scrollTop)
-          .toEqual(40, `Expected panel to reveal the sixth option.`);
+      // Expect option bottom minus the panel height plus padding (288 - 256 + 8 = 40)
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel to reveal the sixth option.`).toEqual(40);
     });
 
     it('should scroll to active options below if the option height is variable', () => {
@@ -1113,14 +1140,16 @@ describe('MDC-based MatAutocomplete', () => {
 
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
       // Expect option bottom minus the panel height (336 - 256 + 8 = 88)
-      expect(scrollContainer.scrollTop)
-          .toEqual(88, `Expected panel to reveal the sixth option.`);
+      // Expect option bottom minus the panel height (336 - 256 + 8 = 88)
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel to reveal the sixth option.`).toEqual(88);
     });
 
     it('should scroll to active options on UP arrow', () => {
@@ -1132,7 +1161,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(scrollContainer.scrollTop)
-          .toBeGreaterThan(initialScrollTop, `Expected panel to reveal last option.`);
+        .withContext(`Expected panel to reveal last option.`).toBeGreaterThan(initialScrollTop);
     });
 
     it('should not scroll to active options that are fully in the panel', () => {
@@ -1143,21 +1172,25 @@ describe('MDC-based MatAutocomplete', () => {
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
+      // Expect option bottom minus the panel height plus the padding (288 - 256 + 8 = 40)
       // Expect option bottom minus the panel height plus the padding (288 - 256 + 8 = 40)
       expect(scrollContainer.scrollTop)
-          .toEqual(40, `Expected panel to reveal the sixth option.`);
+        .withContext(`Expected panel to reveal the sixth option.`).toEqual(40);
 
       // These up arrows will set the 2nd option active
       [4, 3, 2, 1].forEach(() => trigger._handleKeydown(UP_ARROW_EVENT));
 
+      // Expect no scrolling to have occurred. Still showing bottom of 6th option.
       // Expect no scrolling to have occurred. Still showing bottom of 6th option.
       expect(scrollContainer.scrollTop)
-          .toEqual(40, `Expected panel not to scroll up since sixth option still fully visible.`);
+        .withContext(`Expected panel not to scroll up since sixth option still fully visible.`)
+        .toEqual(40);
     });
 
     it('should scroll to active options that are above the panel', () => {
@@ -1168,7 +1201,8 @@ describe('MDC-based MatAutocomplete', () => {
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 7th option active, below the fold.
       [1, 2, 3, 4, 5, 6].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
@@ -1176,9 +1210,10 @@ describe('MDC-based MatAutocomplete', () => {
       // These up arrows will set the 2nd option active
       [5, 4, 3, 2, 1].forEach(() => trigger._handleKeydown(UP_ARROW_EVENT));
 
+      // Expect to show the top of the 2nd option at the top of the panel
       // Expect to show the top of the 2nd option at the top of the panel
       expect(scrollContainer.scrollTop)
-          .toEqual(56, `Expected panel to scroll up when option is above panel.`);
+        .withContext(`Expected panel to scroll up when option is above panel.`).toEqual(56);
     });
 
     it('should close the panel when pressing escape', fakeAsync(() => {
@@ -1188,14 +1223,18 @@ describe('MDC-based MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
     }));
 
     it('should prevent the default action when pressing escape', fakeAsync(() => {
@@ -1212,15 +1251,20 @@ describe('MDC-based MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {alt: true});
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
-      expect(event.defaultPrevented).toBe(false, 'Expected default action not to be prevented.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay open.').toBe(true);
+      expect(event.defaultPrevented)
+        .withContext('Expected default action not to be prevented.').toBe(false);
     }));
 
     it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
@@ -1232,14 +1276,18 @@ describe('MDC-based MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       dispatchEvent(document.body, upArrowEvent);
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
       expect(upArrowEvent.stopPropagation).toHaveBeenCalled();
     }));
 
@@ -1251,14 +1299,16 @@ describe('MDC-based MatAutocomplete', () => {
       flush();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel'))
-          .toBeTruthy('Expected panel to be rendered.');
+        .withContext('Expected panel to be rendered.')
+        .toBeTruthy();
 
       dispatchKeyboardEvent(input, 'keydown', TAB);
       fixture.detectChanges();
       tick();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel'))
-          .toBeFalsy('Expected panel to be removed.');
+        .withContext('Expected panel to be removed.')
+        .toBeFalsy();
     }));
 
     it('should reset the active option when closing with the escape key', fakeAsync(() => {
@@ -1268,8 +1318,10 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active option.').toBe(false);
 
       // Press the down arrow a few times.
       [1, 2, 3].forEach(() => {
@@ -1280,12 +1332,16 @@ describe('MDC-based MatAutocomplete', () => {
 
       // Note that this casts to a boolean, in order to prevent Jasmine
       // from crashing when trying to stringify the option if the test fails.
-      expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+      // Note that this casts to a boolean, in order to prevent Jasmine
+      // from crashing when trying to stringify the option if the test fails.
+      expect(!!trigger.activeOption)
+        .withContext('Expected to find an active option.').toBe(true);
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       tick();
 
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active options.').toBe(false);
     }));
 
     it('should reset the active option when closing by selecting with enter', fakeAsync(() => {
@@ -1295,8 +1351,10 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active option.').toBe(false);
 
       // Press the down arrow a few times.
       [1, 2, 3].forEach(() => {
@@ -1307,12 +1365,16 @@ describe('MDC-based MatAutocomplete', () => {
 
       // Note that this casts to a boolean, in order to prevent Jasmine
       // from crashing when trying to stringify the option if the test fails.
-      expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+      // Note that this casts to a boolean, in order to prevent Jasmine
+      // from crashing when trying to stringify the option if the test fails.
+      expect(!!trigger.activeOption)
+        .withContext('Expected to find an active option.').toBe(true);
 
       trigger._handleKeydown(ENTER_EVENT);
       tick();
 
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active options.').toBe(false);
     }));
 
   });
@@ -1339,7 +1401,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
-      expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+      expect(container.scrollTop)
+        .withContext('Expected the panel not to scroll.').toBe(0);
 
       // Press the down arrow five times.
       [1, 2, 3, 4, 5].forEach(() => {
@@ -1347,10 +1410,12 @@ describe('MDC-based MatAutocomplete', () => {
         tick();
       });
 
+      // <option bottom> - <panel height> + <2x group labels> + panel padding = 136
+      // 288 - 256 + 96 + 8 = 128
       // <option bottom> - <panel height> + <2x group labels> + panel padding = 136
       // 288 - 256 + 96 + 8 = 128
       expect(container.scrollTop)
-          .toBe(136, 'Expected panel to reveal the sixth option.');
+        .withContext('Expected panel to reveal the sixth option.').toBe(136);
     }));
 
     it('should scroll to active options on UP arrow', fakeAsync(() => {
@@ -1369,7 +1434,10 @@ describe('MDC-based MatAutocomplete', () => {
 
       // <option bottom> - <panel height> + <3x group label> + panel padding = 472
       // 576 - 256 + 144 + 8 = 472
-      expect(container.scrollTop).toBe(472, 'Expected panel to reveal last option.');
+      // <option bottom> - <panel height> + <3x group label> + panel padding = 472
+      // 576 - 256 + 144 + 8 = 472
+      expect(container.scrollTop)
+        .withContext('Expected panel to reveal last option.').toBe(472);
     }));
 
     it('should scroll to active options that are above the panel', fakeAsync(() => {
@@ -1385,7 +1453,8 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
-      expect(container.scrollTop).toBe(0, 'Expected panel not to scroll.');
+      expect(container.scrollTop)
+        .withContext('Expected panel not to scroll.').toBe(0);
 
       // These down arrows will set the 7th option active, below the fold.
       [1, 2, 3, 4, 5, 6].forEach(() => {
@@ -1399,10 +1468,12 @@ describe('MDC-based MatAutocomplete', () => {
         tick();
       });
 
+      // Expect to show the top of the 2nd option at the top of the panel.
+      // It is offset by 56, because there's a group label above it plus the panel padding.
       // Expect to show the top of the 2nd option at the top of the panel.
       // It is offset by 56, because there's a group label above it plus the panel padding.
       expect(container.scrollTop)
-          .toBe(104, 'Expected panel to scroll up when option is above panel.');
+        .withContext('Expected panel to scroll up when option is above panel.').toBe(104);
     }));
 
     it('should scroll back to the top when reaching the first option with preceding group label',
@@ -1419,7 +1490,8 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         tick();
         fixture.detectChanges();
-        expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+        expect(container.scrollTop)
+          .withContext('Expected the panel not to scroll.').toBe(0);
 
         // Press the down arrow five times.
         [1, 2, 3, 4, 5].forEach(() => {
@@ -1433,7 +1505,8 @@ describe('MDC-based MatAutocomplete', () => {
           tick();
         });
 
-        expect(container.scrollTop).toBe(0, 'Expected panel to be scrolled to the top.');
+        expect(container.scrollTop)
+          .withContext('Expected panel to be scrolled to the top.').toBe(0);
       }));
 
       it('should scroll to active option when group is indirect descendant', fakeAsync(() => {
@@ -1449,7 +1522,8 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         tick();
         fixture.detectChanges();
-        expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+        expect(container.scrollTop)
+          .withContext('Expected the panel not to scroll.').toBe(0);
 
         // Press the down arrow five times.
         [1, 2, 3, 4, 5].forEach(() => {
@@ -1457,10 +1531,12 @@ describe('MDC-based MatAutocomplete', () => {
           tick();
         });
 
+        // <option bottom> - <panel height> + <2x group labels> + panel padding = 128
+        // 288 - 256 + 96 + 8 = 136
         // <option bottom> - <panel height> + <2x group labels> + panel padding = 128
         // 288 - 256 + 96 + 8 = 136
         expect(container.scrollTop)
-            .toBe(136, 'Expected panel to reveal the sixth option.');
+          .withContext('Expected panel to reveal the sixth option.').toBe(136);
       }));
   });
 
@@ -1477,7 +1553,7 @@ describe('MDC-based MatAutocomplete', () => {
 
     it('should set role of input to combobox', () => {
       expect(input.getAttribute('role'))
-          .toEqual('combobox', 'Expected role of input to be combobox.');
+        .withContext('Expected role of input to be combobox.').toEqual('combobox');
     });
 
     it('should set role of autocomplete panel to listbox', () => {
@@ -1488,7 +1564,7 @@ describe('MDC-based MatAutocomplete', () => {
           fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
 
       expect(panel.getAttribute('role'))
-          .toEqual('listbox', 'Expected role of the panel to be listbox.');
+        .withContext('Expected role of the panel to be listbox.').toEqual('listbox');
     });
 
     it('should point the aria-labelledby of the panel to the field label', () => {
@@ -1562,7 +1638,7 @@ describe('MDC-based MatAutocomplete', () => {
 
     it('should set aria-autocomplete to list', () => {
       expect(input.getAttribute('aria-autocomplete'))
-          .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
+        .withContext('Expected aria-autocomplete attribute to equal list.').toEqual('list');
     });
 
     it('should set aria-activedescendant based on the active option', fakeAsync(() => {
@@ -1570,7 +1646,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.hasAttribute('aria-activedescendant'))
-          .toBe(false, 'Expected aria-activedescendant to be absent if no active item.');
+        .withContext('Expected aria-activedescendant to be absent if no active item.').toBe(false);
 
       const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
 
@@ -1579,40 +1655,40 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-activedescendant'))
-          .toEqual(fixture.componentInstance.options.first.id,
-              'Expected aria-activedescendant to match the active item after 1 down arrow.');
+        .withContext('Expected aria-activedescendant to match the active item after 1 down arrow.')
+        .toEqual(fixture.componentInstance.options.first.id);
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-activedescendant'))
-          .toEqual(fixture.componentInstance.options.toArray()[1].id,
-              'Expected aria-activedescendant to match the active item after 2 down arrows.');
+        .withContext('Expected aria-activedescendant to match the active item after 2 down arrows.')
+        .toEqual(fixture.componentInstance.options.toArray()[1].id);
     }));
 
     it('should set aria-expanded based on whether the panel is open', () => {
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false while panel is closed.');
+        .withContext('Expected aria-expanded to be false while panel is closed.').toBe('false');
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+        .withContext('Expected aria-expanded to be true while panel is open.').toBe('true');
 
       fixture.componentInstance.trigger.closePanel();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false when panel closes again.');
+        .withContext('Expected aria-expanded to be false when panel closes again.').toBe('false');
     });
 
     it('should set aria-expanded properly when the panel is hidden', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       expect(input.getAttribute('aria-expanded'))
-          .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+        .withContext('Expected aria-expanded to be true while panel is open.').toBe('true');
 
       typeInElement(input, 'zz');
       fixture.detectChanges();
@@ -1620,7 +1696,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false when panel hides itself.');
+        .withContext('Expected aria-expanded to be false when panel hides itself.').toBe('false');
     }));
 
     it('should set aria-owns based on the attached autocomplete', () => {
@@ -1631,7 +1707,8 @@ describe('MDC-based MatAutocomplete', () => {
           fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
 
       expect(input.getAttribute('aria-owns'))
-          .toBe(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.');
+        .withContext('Expected aria-owns to match attached autocomplete.')
+        .toBe(panel.getAttribute('id'));
     });
 
     it('should not set aria-owns while the autocomplete is closed', () => {
@@ -1655,7 +1732,8 @@ describe('MDC-based MatAutocomplete', () => {
       option.click();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected focus to be restored to the input.');
+      expect(document.activeElement)
+        .withContext('Expected focus to be restored to the input.').toBe(input);
     }));
 
     it('should remove autocomplete-specific aria attributes when autocomplete is disabled', () => {
@@ -1687,7 +1765,8 @@ describe('MDC-based MatAutocomplete', () => {
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
-          .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
+        .withContext(`Expected panel top to match input bottom by default.`)
+        .toEqual(Math.floor(panelTop));
       expect(panel.classList).not.toContain('mat-mdc-autocomplete-panel-above');
     }));
 
@@ -1717,8 +1796,9 @@ describe('MDC-based MatAutocomplete', () => {
       const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
       const panelTop = panel.getBoundingClientRect().top;
 
-      expect(Math.floor(inputBottom)).toEqual(Math.floor(panelTop),
-          'Expected panel top to match input bottom after scrolling.');
+      expect(Math.floor(inputBottom))
+        .withContext('Expected panel top to match input bottom after scrolling.')
+        .toEqual(Math.floor(panelTop));
 
       document.body.removeChild(spacer);
       window.scroll(0, 0);
@@ -1744,7 +1824,8 @@ describe('MDC-based MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+        .withContext(`Expected panel to fall back to above position.`)
+        .toEqual(Math.floor(panelBottom));
 
       expect(panel.classList).toContain('mat-mdc-autocomplete-panel-above');
     }));
@@ -1816,7 +1897,8 @@ describe('MDC-based MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), `Expected panel to stay aligned after filtering.`);
+        .withContext(`Expected panel to stay aligned after filtering.`)
+        .toEqual(Math.floor(panelBottom));
     }));
 
     it('should fall back to above position when requested if options are added while ' +
@@ -1844,8 +1926,8 @@ describe('MDC-based MatAutocomplete', () => {
       let panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(panelRect.top))
-        .toBe(Math.floor(inputRect.bottom),
-          `Expected panel top to be below input before repositioning.`);
+        .withContext(`Expected panel top to be below input before repositioning.`)
+        .toBe(Math.floor(inputRect.bottom));
 
       for (let i = 0; i < 20; i++) {
         fixture.componentInstance.filteredStates.push({code: 'FK', name: 'Fake State'});
@@ -1859,8 +1941,8 @@ describe('MDC-based MatAutocomplete', () => {
       panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(panelRect.bottom))
-        .toBe(Math.floor(inputRect.top),
-          `Expected panel to fall back to above position after repositioning.`);
+        .withContext(`Expected panel to fall back to above position after repositioning.`)
+        .toBe(Math.floor(inputRect.top));
       tick();
     }));
 
@@ -1892,7 +1974,7 @@ describe('MDC-based MatAutocomplete', () => {
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
-          .toEqual(Math.floor(panelTop), 'Expected panel to be below the input.');
+        .withContext('Expected panel to be below the input.').toEqual(Math.floor(panelTop));
 
       expect(panel.classList).not.toContain('mat-mdc-autocomplete-panel-above');
     }));
@@ -1918,7 +2000,7 @@ describe('MDC-based MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), 'Expected panel to be above the input.');
+        .withContext('Expected panel to be above the input.').toEqual(Math.floor(panelBottom));
 
       expect(panel.classList).toContain('mat-mdc-autocomplete-panel-above');
     }));
@@ -1945,7 +2027,7 @@ describe('MDC-based MatAutocomplete', () => {
       let panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.top))
-          .toEqual(Math.floor(panelRect.bottom), 'Expected panel to be above the input.');
+        .withContext('Expected panel to be above the input.').toEqual(Math.floor(panelRect.bottom));
       expect(panel.classList).toContain('mat-mdc-autocomplete-panel-above');
 
       fixture.componentInstance.trigger.closePanel();
@@ -1960,7 +2042,7 @@ describe('MDC-based MatAutocomplete', () => {
       panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.bottom))
-          .toEqual(Math.floor(panelRect.top), 'Expected panel to be below the input.');
+        .withContext('Expected panel to be below the input.').toEqual(Math.floor(panelRect.top));
       expect(panel.classList).not.toContain('mat-mdc-autocomplete-panel-above');
     }));
 
@@ -1987,7 +2069,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       let componentOptions = fixture.componentInstance.options.toArray();
       expect(componentOptions[0].selected)
-          .toBe(true, `Clicked option should be selected.`);
+        .withContext(`Clicked option should be selected.`).toBe(true);
 
       options =
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
@@ -1995,9 +2077,9 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentOptions[0].selected)
-          .toBe(false, `Previous option should not be selected.`);
+        .withContext(`Previous option should not be selected.`).toBe(false);
       expect(componentOptions[1].selected)
-          .toBe(true, `New Clicked option should be selected.`);
+        .withContext(`New Clicked option should be selected.`).toBe(true);
     }));
 
     it('should call deselect only on the previous selected option', fakeAsync(() => {
@@ -2015,7 +2097,7 @@ describe('MDC-based MatAutocomplete', () => {
       componentOptions.forEach(option => spyOn(option, 'deselect'));
 
       expect(componentOptions[0].selected)
-          .toBe(true, `Clicked option should be selected.`);
+        .withContext(`Clicked option should be selected.`).toBe(true);
 
       options =
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
@@ -2034,7 +2116,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mat-mdc-option-active', 'Expected first option to be highlighted.');
+        .withContext('Expected first option to be highlighted.').toContain('mat-mdc-option-active');
     }));
 
     it('should skip to the next enabled option if the first one is disabled ' +
@@ -2049,7 +2131,8 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
-            .toContain('mat-mdc-option-active', 'Expected third option to be highlighted.');
+          .withContext('Expected third option to be highlighted.')
+          .toContain('mat-mdc-option-active');
       }));
 
     it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption',
@@ -2057,7 +2140,7 @@ describe('MDC-based MatAutocomplete', () => {
         const input: HTMLElement = fixture.nativeElement.querySelector('input');
 
         expect(input.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no active descendant on init.');
+          .withContext('Expected no active descendant on init.').toBe(false);
 
         fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
         fixture.componentInstance.trigger.openPanel();
@@ -2066,13 +2149,14 @@ describe('MDC-based MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(input.getAttribute('aria-activedescendant'))
-            .toBeTruthy('Expected active descendant while open.');
+          .withContext('Expected active descendant while open.')
+          .toBeTruthy();
 
         fixture.componentInstance.trigger.closePanel();
         fixture.detectChanges();
 
         expect(input.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no active descendant when closed.');
+          .withContext('Expected no active descendant when closed.').toBe(false);
       }));
 
     it('should be able to configure preselecting the first option globally', fakeAsync(() => {
@@ -2090,7 +2174,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mat-mdc-option-active', 'Expected first option to be highlighted.');
+        .withContext('Expected first option to be highlighted.').toContain('mat-mdc-option-active');
     }));
 
     it('should handle `optionSelections` being accessed too early', fakeAsync(() => {
@@ -2139,8 +2223,9 @@ describe('MDC-based MatAutocomplete', () => {
       const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
-      expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop),
-          `Expected panel top to match input bottom when there is only one option.`);
+      expect(Math.floor(inputBottom))
+        .withContext(`Expected panel top to match input bottom when there is only one option.`)
+        .toBe(Math.floor(panelTop));
 
       clearElement(input);
       fixture.detectChanges();
@@ -2150,8 +2235,9 @@ describe('MDC-based MatAutocomplete', () => {
       const inputTop = inputReference.getBoundingClientRect().top;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
-      expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom),
-          `Expected panel switch to the above position if the options no longer fit.`);
+      expect(Math.floor(inputTop))
+        .withContext(`Expected panel switch to the above position if the options no longer fit.`)
+        .toBe(Math.floor(panelBottom));
     }));
 
   });
@@ -2321,11 +2407,11 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when input is focused.`);
+        .withContext(`Expected panel state to read open when input is focused.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('One', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('One');
       expect(overlayContainerElement.textContent)
-          .toContain('Two', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('Two');
     });
 
     it('should filter properly with ngIf after setting the active item', () => {
@@ -2428,12 +2514,14 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       zone.simulateZoneExit();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       scrolledSubject.next();
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
     }));
 
     it('should handle autocomplete being attached to number inputs', fakeAsync(() => {
@@ -2523,12 +2611,14 @@ describe('MDC-based MatAutocomplete', () => {
     input.focus();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to be open.').toBe(true);
 
     trigger.closePanel();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to be closed.').toBe(false);
 
     // Simulate the user going to a different tab.
     dispatchFakeEvent(window, 'blur');
@@ -2540,7 +2630,8 @@ describe('MDC-based MatAutocomplete', () => {
     input.focus();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(false, 'Expected panel to remain closed.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to remain closed.').toBe(false);
   });
 
   it('should update the panel width if the window is resized', fakeAsync(() => {
@@ -2626,7 +2717,8 @@ describe('MDC-based MatAutocomplete', () => {
         let visibleClass = 'mat-mdc-autocomplete-visible';
 
         fixture.detectChanges();
-        expect(panel.classList).toContain(visibleClass, `Expected panel to be visible.`);
+        expect(panel.classList)
+          .withContext(`Expected panel to be visible.`).toContain(visibleClass);
       });
     }));
 
@@ -2723,8 +2815,9 @@ describe('MDC-based MatAutocomplete', () => {
         overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
 
-    expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
-        'Expected autocomplete panel to align with the bottom of the new origin.');
+    expect(Math.floor(overlayRect.top))
+      .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
+      .toBe(Math.floor(originRect.bottom));
   });
 
   it('should be able to change the origin after the panel has been opened', () => {
@@ -2749,8 +2842,9 @@ describe('MDC-based MatAutocomplete', () => {
         overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
 
-    expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
-        'Expected autocomplete panel to align with the bottom of the new origin.');
+    expect(Math.floor(overlayRect.top))
+      .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
+      .toBe(Math.floor(originRect.bottom));
   });
 
   it('should be able to re-type the same value when it is reset while open', fakeAsync(() => {
@@ -2764,19 +2858,22 @@ describe('MDC-based MatAutocomplete', () => {
     tick();
     fixture.detectChanges();
 
-    expect(formControl.value).toBe('Cal', 'Expected initial value to be propagated to model');
+    expect(formControl.value)
+      .withContext('Expected initial value to be propagated to model').toBe('Cal');
 
     formControl.setValue('');
     fixture.detectChanges();
 
-    expect(input.value).toBe('', 'Expected input value to reset when model is reset');
+    expect(input.value)
+      .withContext('Expected input value to reset when model is reset').toBe('');
 
     typeInElement(input, 'Cal');
     fixture.detectChanges();
     tick();
     fixture.detectChanges();
 
-    expect(formControl.value).toBe('Cal', 'Expected new value to be propagated to model');
+    expect(formControl.value)
+      .withContext('Expected new value to be propagated to model').toBe('Cal');
   }));
 
   it('should not close when clicking inside alternate origin', () => {
diff --git a/src/material-experimental/mdc-button/button.spec.ts b/src/material-experimental/mdc-button/button.spec.ts
index a8ed0da67fc7..ba215f3fdf1a 100644
--- a/src/material-experimental/mdc-button/button.spec.ts
+++ b/src/material-experimental/mdc-button/button.spec.ts
@@ -78,7 +78,8 @@ describe('MDC-based MatButton', () => {
       fixture.detectChanges();
 
       expect(fabButtonDebugEl.nativeElement.classList)
-          .toContain('mat-accent', 'Expected fab buttons to use accent palette by default');
+        .withContext('Expected fab buttons to use accent palette by default')
+        .toContain('mat-accent');
     });
   });
 
@@ -90,7 +91,8 @@ describe('MDC-based MatButton', () => {
       fixture.detectChanges();
 
       expect(miniFabButtonDebugEl.nativeElement.classList)
-          .toContain('mat-accent', 'Expected mini-fab buttons to use accent palette by default');
+        .withContext('Expected mini-fab buttons to use accent palette by default')
+        .toContain('mat-accent');
     });
   });
 
@@ -137,11 +139,13 @@ describe('MDC-based MatButton', () => {
     it('should disable the native button element', () => {
       let fixture = TestBed.createComponent(TestApp);
       let buttonNativeElement = fixture.nativeElement.querySelector('button');
-      expect(buttonNativeElement.disabled).toBeFalsy('Expected button not to be disabled');
+      expect(buttonNativeElement.disabled)
+        .withContext('Expected button not to be disabled').toBeFalsy();
 
       fixture.componentInstance.isDisabled = true;
       fixture.detectChanges();
-      expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be disabled');
+      expect(buttonNativeElement.disabled)
+        .withContext('Expected button to be disabled').toBeTruthy();
     });
 
   });
@@ -188,16 +192,18 @@ describe('MDC-based MatButton', () => {
       let buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
       fixture.detectChanges();
       expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
-          .toBe('false', 'Expect aria-disabled="false"');
+        .withContext('Expect aria-disabled="false"').toBe('false');
       expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
-          .toBeNull('Expect disabled="false"');
+        .withContext('Expect disabled="false"')
+        .toBeNull();
 
       testComponent.isDisabled = false;
       fixture.detectChanges();
       expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
-          .toBe('false', 'Expect no aria-disabled');
+        .withContext('Expect no aria-disabled').toBe('false');
       expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
-          .toBeNull('Expect no disabled');
+        .withContext('Expect no disabled')
+        .toBeNull();
     });
 
     it('should be able to set a custom tabindex', () => {
@@ -209,13 +215,13 @@ describe('MDC-based MatButton', () => {
       fixture.detectChanges();
 
       expect(buttonElement.getAttribute('tabIndex'))
-          .toBe('3', 'Expected custom tabindex to be set');
+        .withContext('Expected custom tabindex to be set').toBe('3');
 
       testComponent.isDisabled = true;
       fixture.detectChanges();
 
       expect(buttonElement.getAttribute('tabIndex'))
-          .toBe('-1', 'Expected custom tabindex to be overwritten when disabled.');
+        .withContext('Expected custom tabindex to be overwritten when disabled.').toBe('-1');
     });
   });
 
diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts
index bd21c9d4f1cb..734e3961a693 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts
+++ b/src/material-experimental/mdc-checkbox/checkbox.spec.ts
@@ -100,7 +100,7 @@ describe('MDC-based MatCheckbox', () => {
          expect(inputElement.checked).toBe(false);
          expect(inputElement.indeterminate).toBe(false);
          expect(inputElement.getAttribute('aria-checked'))
-             .toBe('false', 'Expect aria-checked to be false');
+          .withContext('Expect aria-checked to be false').toBe('false');
 
          testComponent.isIndeterminate = true;
          fixture.detectChanges();
@@ -108,7 +108,7 @@ describe('MDC-based MatCheckbox', () => {
          expect(inputElement.checked).toBe(false);
          expect(inputElement.indeterminate).toBe(true);
          expect(inputElement.getAttribute('aria-checked'))
-             .toBe('mixed', 'Expect aria checked to be mixed for indeterminate checkbox');
+          .withContext('Expect aria checked to be mixed for indeterminate checkbox').toBe('mixed');
 
          testComponent.isIndeterminate = false;
          fixture.detectChanges();
@@ -148,7 +148,7 @@ describe('MDC-based MatCheckbox', () => {
          expect(inputElement.checked).toBe(true);
          expect(testComponent.isIndeterminate).toBe(true);
          expect(inputElement.getAttribute('aria-checked'))
-             .toBe('true', 'Expect aria checked to be true');
+          .withContext('Expect aria checked to be true').toBe('true');
 
          inputElement.click();
          fixture.detectChanges();
@@ -584,7 +584,8 @@ describe('MDC-based MatCheckbox', () => {
            flush();
 
            expect(inputElement.checked).toBe(false);
-           expect(inputElement.indeterminate).toBe(true, 'indeterminate should not change');
+           expect(inputElement.indeterminate)
+            .withContext('indeterminate should not change').toBe(true);
          }));
     });
 
@@ -772,7 +773,8 @@ describe('MDC-based MatCheckbox', () => {
              .componentInstance as MatCheckbox;
 
          expect(checkbox.tabIndex)
-             .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
+          .withContext('Expected tabIndex property to have been set based on the native attribute')
+          .toBe(5);
        }));
 
     it('should clear the tabindex attribute from the host element', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-chips/chip-grid.spec.ts b/src/material-experimental/mdc-chips/chip-grid.spec.ts
index c6277b1197d7..c21afccfb598 100644
--- a/src/material-experimental/mdc-chips/chip-grid.spec.ts
+++ b/src/material-experimental/mdc-chips/chip-grid.spec.ts
@@ -145,7 +145,8 @@ describe('MDC-based MatChipGrid', () => {
       });
 
       it('should not be able to become focused when disabled', () => {
-        expect(chipGridInstance.focused).toBe(false, 'Expected grid to not be focused.');
+        expect(chipGridInstance.focused)
+          .withContext('Expected grid to not be focused.').toBe(false);
 
         chipGridInstance.disabled = true;
         fixture.detectChanges();
@@ -153,7 +154,8 @@ describe('MDC-based MatChipGrid', () => {
         chipGridInstance.focus();
         fixture.detectChanges();
 
-        expect(chipGridInstance.focused).toBe(false, 'Expected grid to continue not to be focused');
+        expect(chipGridInstance.focused)
+          .withContext('Expected grid to continue not to be focused').toBe(false);
       });
 
       it('should remove the tabindex from the grid if it is disabled', () => {
@@ -309,7 +311,7 @@ describe('MDC-based MatChipGrid', () => {
           fixture.detectChanges();
 
           expect(manager.activeRowIndex)
-              .toBe(initialActiveIndex, 'Expected focused item not to have changed.');
+            .withContext('Expected focused item not to have changed.').toBe(initialActiveIndex);
         });
       });
 
@@ -366,11 +368,12 @@ describe('MDC-based MatChipGrid', () => {
           dispatchKeyboardEvent(firstNativeChip, 'keydown', TAB);
 
           expect(chipGridInstance.tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipGridInstance.tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
+          expect(chipGridInstance.tabIndex)
+            .withContext('Expected tabIndex to be reset back to 0').toBe(0);
         }));
 
         it(`should use user defined tabIndex`, fakeAsync(() => {
@@ -379,18 +382,19 @@ describe('MDC-based MatChipGrid', () => {
           fixture.detectChanges();
 
           expect(chipGridInstance.tabIndex)
-            .toBe(4, 'Expected tabIndex to be set to user defined value 4.');
+            .withContext('Expected tabIndex to be set to user defined value 4.').toBe(4);
 
           let nativeChips = chipGridNativeElement.querySelectorAll('mat-chip-row');
           let firstNativeChip = nativeChips[0] as HTMLElement;
 
           dispatchKeyboardEvent(firstNativeChip, 'keydown', TAB);
           expect(chipGridInstance.tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipGridInstance.tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
+          expect(chipGridInstance.tabIndex)
+            .withContext('Expected tabIndex to be reset back to 4').toBe(4);
         }));
       });
 
@@ -632,7 +636,8 @@ describe('MDC-based MatChipGrid', () => {
     it('should set the view value from the form', () => {
       const chipGrid = fixture.componentInstance.chipGrid;
 
-      expect(chipGrid.value).toBeFalsy('Expect chip grid to have no initial value');
+      expect(chipGrid.value)
+        .withContext('Expect chip grid to have no initial value').toBeFalsy();
 
       fixture.componentInstance.control.setValue('[pizza-1]');
       fixture.detectChanges();
@@ -642,7 +647,7 @@ describe('MDC-based MatChipGrid', () => {
 
     it('should update the form value when the view changes', fakeAsync(() => {
       expect(fixture.componentInstance.control.value)
-        .toEqual(null, `Expected the control's value to be empty initially.`);
+        .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
       nativeInput.focus();
 
@@ -670,31 +675,31 @@ describe('MDC-based MatChipGrid', () => {
 
     it('should set the control to touched when the chip grid is touched', fakeAsync(() => {
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to start off as untouched.');
+        .withContext('Expected the control to start off as untouched.').toBe(false);
 
       dispatchFakeEvent(nativeChipGrid, 'blur');
       tick();
 
       expect(fixture.componentInstance.control.touched)
-        .toBe(true, 'Expected the control to be touched.');
+        .withContext('Expected the control to be touched.').toBe(true);
     }));
 
     it('should not set touched when a disabled chip grid is touched', fakeAsync(() => {
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to start off as untouched.');
+        .withContext('Expected the control to start off as untouched.').toBe(false);
 
       fixture.componentInstance.control.disable();
       dispatchFakeEvent(nativeChipGrid, 'blur');
       tick();
 
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to stay untouched.');
+        .withContext('Expected the control to stay untouched.').toBe(false);
     }));
 
     it('should set the control to dirty when the chip grid\'s value changes in the DOM',
       fakeAsync(() => {
       expect(fixture.componentInstance.control.dirty)
-          .toEqual(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toEqual(false);
 
       nativeInput.focus();
 
@@ -708,30 +713,32 @@ describe('MDC-based MatChipGrid', () => {
       tick();
 
       expect(fixture.componentInstance.control.dirty)
-          .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+        .withContext(`Expected control to be dirty after value was changed by user.`).toEqual(true);
     }));
 
     it('should not set the control to dirty when the value changes programmatically', () => {
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toEqual(false);
 
       fixture.componentInstance.control.setValue(['pizza-1']);
 
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+        .withContext(`Expected control to stay pristine after programmatic change.`).toEqual(false);
     });
 
     it('should set an asterisk after the placeholder if the control is required', () => {
       let requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!;
       expect(requiredMarker)
-        .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+        .withContext(`Expected placeholder not to have an asterisk, as control was not required.`)
+        .toBeNull();
 
       fixture.componentInstance.isRequired = true;
       fixture.detectChanges();
 
       requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!;
-      expect(requiredMarker)
-        .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+      expect(requiredMarker).not
+        .withContext(`Expected placeholder to have an asterisk, as control was required.`)
+        .toBeNull();
     });
 
     it('should blur the form field when the active chip is blurred', fakeAsync(() => {
@@ -764,8 +771,10 @@ describe('MDC-based MatChipGrid', () => {
       });
 
       nativeInput.focus();
-      expect(fixture.componentInstance.foods).toEqual([], 'Expected all chips to be removed.');
-      expect(document.activeElement).toBe(nativeInput, 'Expected input to be focused.');
+      expect(fixture.componentInstance.foods)
+        .withContext('Expected all chips to be removed.').toEqual([]);
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(nativeInput);
 
       typeInElement(nativeInput, '123');
       fixture.detectChanges();
@@ -773,7 +782,8 @@ describe('MDC-based MatChipGrid', () => {
       fixture.detectChanges();
       tick();
 
-      expect(document.activeElement).toBe(nativeInput, 'Expected input to remain focused.');
+      expect(document.activeElement)
+        .withContext('Expected input to remain focused.').toBe(nativeInput);
     }));
 
     it('should set aria-invalid if the form field is invalid', fakeAsync(() => {
@@ -861,49 +871,53 @@ describe('MDC-based MatChipGrid', () => {
 
     it('should not show any errors if the user has not interacted', () => {
       expect(errorTestComponent.formControl.untouched)
-        .toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+        .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(chipGridEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
     });
 
     it('should display an error message when the grid is touched and invalid', fakeAsync(() => {
       expect(errorTestComponent.formControl.invalid)
-        .toBe(true, 'Expected form control to be invalid');
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error message');
+        .withContext('Expected no error message').toBe(0);
 
       errorTestComponent.formControl.markAsTouched();
       fixture.detectChanges();
       tick();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(chipGridEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should display an error message when the parent form is submitted', fakeAsync(() => {
       expect(errorTestComponent.form.submitted)
-        .toBe(false, 'Expected form not to have been submitted');
+        .withContext('Expected form not to have been submitted').toBe(false);
       expect(errorTestComponent.formControl.invalid)
-        .toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(errorTestComponent.form.submitted)
-          .toBe(true, 'Expected form to have been submitted');
+          .withContext('Expected form to have been submitted').toBe(true);
         expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+          .withContext('Expected container to have the invalid CSS class.')
+          .toContain('mat-form-field-invalid');
         expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
+          .withContext('Expected one error message to have been rendered.').toBe(1);
         expect(chipGridEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
+          .withContext('Expected aria-invalid to be set to "true".').toBe('true');
       });
     }));
 
@@ -914,11 +928,12 @@ describe('MDC-based MatChipGrid', () => {
 
       fixture.whenStable().then(() => {
         expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+          .withContext('Expected container to have the invalid CSS class.')
+          .toContain('mat-form-field-invalid');
         expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
+          .withContext('Expected one error message to have been rendered.').toBe(1);
         expect(containerEl.querySelectorAll('mat-hint').length)
-          .toBe(0, 'Expected no hints to be shown.');
+          .withContext('Expected no hints to be shown.').toBe(0);
 
         errorTestComponent.formControl.setValue('something');
         fixture.detectChanges();
@@ -927,9 +942,9 @@ describe('MDC-based MatChipGrid', () => {
           expect(containerEl.classList).not.toContain('mat-form-field-invalid',
             'Expected container not to have the invalid class when valid.');
           expect(containerEl.querySelectorAll('mat-error').length)
-            .toBe(0, 'Expected no error messages when the input is valid.');
+            .withContext('Expected no error messages when the input is valid.').toBe(0);
           expect(containerEl.querySelectorAll('mat-hint').length)
-            .toBe(1, 'Expected one hint to be shown once the input is valid.');
+            .withContext('Expected one hint to be shown once the input is valid.').toBe(1);
         });
       });
     }));
@@ -946,7 +961,7 @@ describe('MDC-based MatChipGrid', () => {
           .getAttribute('id');
       let describedBy = chipGridEl.getAttribute('aria-describedby');
 
-      expect(hintId).toBeTruthy('hint should be shown');
+      expect(hintId).withContext('hint should be shown').toBeTruthy();
       expect(describedBy).toBe(hintId);
 
       fixture.componentInstance.formControl.markAsTouched();
@@ -956,7 +971,7 @@ describe('MDC-based MatChipGrid', () => {
         .map(el => el.nativeElement.getAttribute('id')).join(' ');
       describedBy = chipGridEl.getAttribute('aria-describedby');
 
-      expect(errorIds).toBeTruthy('errors should be shown');
+      expect(errorIds).withContext('errors should be shown').toBeTruthy();
       expect(describedBy).toBe(errorIds);
     });
   });
diff --git a/src/material-experimental/mdc-chips/chip-input.spec.ts b/src/material-experimental/mdc-chips/chip-input.spec.ts
index 98da76e8dbf1..8f38955ba7d9 100644
--- a/src/material-experimental/mdc-chips/chip-input.spec.ts
+++ b/src/material-experimental/mdc-chips/chip-input.spec.ts
@@ -112,13 +112,13 @@ describe('MDC-based MatChipInput', () => {
       fixture.detectChanges();
 
       expect(gridElement.getAttribute('tabindex'))
-        .toBe('-1', 'Expected tabIndex to be set to -1 temporarily.');
+        .withContext('Expected tabIndex to be set to -1 temporarily.').toBe('-1');
 
       tick();
       fixture.detectChanges();
 
       expect(gridElement.getAttribute('tabindex'))
-        .toBe('0', 'Expected tabIndex to be reset back to 0');
+        .withContext('Expected tabIndex to be reset back to 0').toBe('0');
     }));
 
     it('should not allow focus to escape when tabbing backwards', fakeAsync(() => {
@@ -129,12 +129,14 @@ describe('MDC-based MatChipInput', () => {
       dispatchKeyboardEvent(inputNativeElement, 'keydown', TAB, undefined, {shift: true});
       fixture.detectChanges();
 
-      expect(gridElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+      expect(gridElement.getAttribute('tabindex'))
+        .withContext('Expected tabindex to remain 0').toBe('0');
 
       tick();
       fixture.detectChanges();
 
-      expect(gridElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+      expect(gridElement.getAttribute('tabindex'))
+        .withContext('Expected tabindex to remain 0').toBe('0');
     }));
 
     it('should set input styling classes', () => {
diff --git a/src/material-experimental/mdc-chips/chip-listbox.spec.ts b/src/material-experimental/mdc-chips/chip-listbox.spec.ts
index 1de69a0cc929..d1ec0c1c5fdd 100644
--- a/src/material-experimental/mdc-chips/chip-listbox.spec.ts
+++ b/src/material-experimental/mdc-chips/chip-listbox.spec.ts
@@ -116,9 +116,12 @@ describe('MDC-based MatChipListbox', () => {
       it('should not override chips selected', () => {
         const instanceChips = fixture.componentInstance.chips.toArray();
 
-        expect(instanceChips[0].selected).toBe(true, 'Expected first option to be selected.');
-        expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.');
-        expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.');
+        expect(instanceChips[0].selected)
+          .withContext('Expected first option to be selected.').toBe(true);
+        expect(instanceChips[1].selected)
+          .withContext('Expected second option to be not selected.').toBe(false);
+        expect(instanceChips[2].selected)
+          .withContext('Expected third option to be selected.').toBe(true);
       });
 
       it('should have role listbox', () => {
@@ -129,7 +132,8 @@ describe('MDC-based MatChipListbox', () => {
         fixture.componentInstance.foods = [];
         fixture.detectChanges();
 
-        expect(chipListboxNativeElement.getAttribute('role')).toBeNull('Expect no role attribute');
+        expect(chipListboxNativeElement.getAttribute('role'))
+          .withContext('Expect no role attribute').toBeNull();
       });
     });
 
@@ -159,7 +163,8 @@ describe('MDC-based MatChipListbox', () => {
       });
 
       it('should not be able to become focused when disabled', () => {
-        expect(chipListboxInstance.focused).toBe(false, 'Expected listbox to not be focused.');
+        expect(chipListboxInstance.focused)
+          .withContext('Expected listbox to not be focused.').toBe(false);
 
         chipListboxInstance.disabled = true;
         fixture.detectChanges();
@@ -167,8 +172,8 @@ describe('MDC-based MatChipListbox', () => {
         chipListboxInstance.focus();
         fixture.detectChanges();
 
-        expect(chipListboxInstance.focused).toBe(false,
-          'Expected listbox to continue not to be focused');
+        expect(chipListboxInstance.focused)
+          .withContext('Expected listbox to continue not to be focused').toBe(false);
       });
 
       it('should remove the tabindex from the listbox if it is disabled', () => {
@@ -299,7 +304,7 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(manager.activeItemIndex)
-              .toBe(initialActiveIndex, 'Expected focused item not to have changed.');
+            .withContext('Expected focused item not to have changed.').toBe(initialActiveIndex);
         });
 
         it('should focus the first item when pressing HOME', () => {
@@ -384,11 +389,12 @@ describe('MDC-based MatChipListbox', () => {
           chipListboxInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
           expect(chipListboxInstance.tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipListboxInstance.tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
+          expect(chipListboxInstance.tabIndex)
+            .withContext('Expected tabIndex to be reset back to 0').toBe(0);
         }));
 
         it(`should use user defined tabIndex`, fakeAsync(() => {
@@ -397,16 +403,17 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(chipListboxInstance.tabIndex)
-            .toBe(4, 'Expected tabIndex to be set to user defined value 4.');
+            .withContext('Expected tabIndex to be set to user defined value 4.').toBe(4);
 
           chipListboxInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
           expect(chipListboxInstance.tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipListboxInstance.tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
+          expect(chipListboxInstance.tabIndex)
+            .withContext('Expected tabIndex to be reset back to 4').toBe(4);
         }));
       });
 
@@ -463,15 +470,18 @@ describe('MDC-based MatChipListbox', () => {
         dispatchKeyboardEvent(firstChip, 'keydown', SPACE);
         fixture.detectChanges();
 
-        expect(instanceChips.first.selected).toBe(true, 'Expected first option to be selected.');
-        expect(chipListbox.selected).toBe(chips.first, 'Expected first option to be selected.');
+        expect(instanceChips.first.selected)
+          .withContext('Expected first option to be selected.').toBe(true);
+        expect(chipListbox.selected)
+          .withContext('Expected first option to be selected.').toBe(chips.first);
 
         fixture.componentInstance.foods = [];
         fixture.detectChanges();
         tick();
 
         expect(chipListbox.selected)
-          .toBe(undefined, 'Expected selection to be removed when option no longer exists.');
+          .withContext('Expected selection to be removed when option no longer exists.')
+          .toBe(undefined);
       }));
 
 
@@ -486,9 +496,9 @@ describe('MDC-based MatChipListbox', () => {
         fixture.detectChanges();
 
         expect(fixture.componentInstance.chipListbox.value)
-          .toContain('potatoes-8', 'Expect value contain the value of the last option');
+          .withContext('Expect value contain the value of the last option').toContain('potatoes-8');
         expect(fixture.componentInstance.chips.last.selected)
-          .toBeTruthy('Expect last option selected');
+          .withContext('Expect last option selected').toBeTruthy();
       });
 
       it('should not select disabled chips', () => {
@@ -498,10 +508,10 @@ describe('MDC-based MatChipListbox', () => {
         fixture.detectChanges();
 
         expect(fixture.componentInstance.chipListbox.value)
-          .toBeUndefined('Expect value to be undefined');
-        expect(array[2].selected).toBeFalsy('Expect disabled chip not selected');
+          .withContext('Expect value to be undefined').toBeUndefined();
+        expect(array[2].selected).withContext('Expect disabled chip not selected').toBeFalsy();
         expect(fixture.componentInstance.chipListbox.selected)
-          .toBeUndefined('Expect no selected chips');
+          .withContext('Expect no selected chips').toBeUndefined();
       });
     });
 
@@ -524,30 +534,32 @@ describe('MDC-based MatChipListbox', () => {
           tick();
           const array = chips.toArray();
 
-          expect(array[1].selected).toBeTruthy('Expect pizza-1 chip to be selected');
+          expect(array[1].selected).withContext('Expect pizza-1 chip to be selected').toBeTruthy();
 
           dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
           fixture.detectChanges();
 
-          expect(array[1].selected).toBeFalsy(
-            'Expect chip to be not selected after toggle selected');
+          expect(array[1].selected)
+            .withContext('Expect chip to be not selected after toggle selected').toBeFalsy();
         }));
 
         it('should set the view value from the form', () => {
           const chipListbox = fixture.componentInstance.chipListbox;
           const array = chips.toArray();
 
-          expect(chipListbox.value).toBeFalsy('Expect chip listbox to have no initial value');
+          expect(chipListbox.value)
+            .withContext('Expect chip listbox to have no initial value').toBeFalsy();
 
           fixture.componentInstance.control.setValue('pizza-1');
           fixture.detectChanges();
 
-          expect(array[1].selected).toBeTruthy('Expect chip to be selected');
+          expect(array[1].selected)
+            .withContext('Expect chip to be selected').toBeTruthy();
         });
 
         it('should update the form value when the view changes', fakeAsync(() => {
           expect(fixture.componentInstance.control.value)
-            .toEqual(null, `Expected the control's value to be empty initially.`);
+            .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
           dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
           fixture.detectChanges();
@@ -555,7 +567,8 @@ describe('MDC-based MatChipListbox', () => {
           tick();
 
           expect(fixture.componentInstance.control.value)
-            .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+            .withContext(`Expected control's value to be set to the new option.`)
+            .toEqual('steak-0');
         }));
 
         it('should clear the selection when a nonexistent option value is selected', () => {
@@ -565,14 +578,16 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeTruthy(`Expected chip with the value to be selected.`);
+            .withContext(`Expected chip with the value to be selected.`)
+            .toBeTruthy();
 
           fixture.componentInstance.control.setValue('gibberish');
 
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeFalsy(`Expected chip with the old value not to be selected.`);
+            .withContext(`Expected chip with the old value not to be selected.`)
+            .toBeFalsy();
         });
 
 
@@ -586,12 +601,13 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeFalsy(`Expected chip with the old value not to be selected.`);
+            .withContext(`Expected chip with the old value not to be selected.`)
+            .toBeFalsy();
         });
 
         it('should set the control to touched when the chip listbox is touched', fakeAsync(() => {
           expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+            .withContext('Expected the control to start off as untouched.').toBe(false);
 
           const nativeChipListbox = fixture.debugElement.query(
             By.css('mat-chip-listbox'))!.nativeElement;
@@ -599,12 +615,12 @@ describe('MDC-based MatChipListbox', () => {
           tick();
 
           expect(fixture.componentInstance.control.touched)
-            .toBe(true, 'Expected the control to be touched.');
+            .withContext('Expected the control to be touched.').toBe(true);
         }));
 
         it('should not set touched when a disabled chip listbox is touched', fakeAsync(() => {
           expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+            .withContext('Expected the control to start off as untouched.').toBe(false);
 
           fixture.componentInstance.control.disable();
           const nativeChipListbox = fixture.debugElement.query(
@@ -613,29 +629,31 @@ describe('MDC-based MatChipListbox', () => {
           tick();
 
           expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to stay untouched.');
+            .withContext('Expected the control to stay untouched.').toBe(false);
         }));
 
         it('should set the control to dirty when the chip listbox\'s value changes in the DOM',
           () => {
           expect(fixture.componentInstance.control.dirty)
-            .toEqual(false, `Expected control to start out pristine.`);
+            .withContext(`Expected control to start out pristine.`).toEqual(false);
 
           dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
           fixture.detectChanges();
 
           expect(fixture.componentInstance.control.dirty)
-            .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+            .withContext(`Expected control to be dirty after value was changed by user.`)
+            .toEqual(true);
         });
 
         it('should not set the control to dirty when the value changes programmatically', () => {
           expect(fixture.componentInstance.control.dirty)
-            .toEqual(false, `Expected control to start out pristine.`);
+            .withContext(`Expected control to start out pristine.`).toEqual(false);
 
           fixture.componentInstance.control.setValue('pizza-1');
 
           expect(fixture.componentInstance.control.dirty)
-            .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+            .withContext(`Expected control to stay pristine after programmatic change.`)
+            .toEqual(false);
         });
 
         it('should be able to programmatically select a falsy option', () => {
@@ -650,7 +668,7 @@ describe('MDC-based MatChipListbox', () => {
           falsyFixture.detectChanges();
 
           expect(falsyFixture.componentInstance.chips.first.selected)
-            .toBe(true, 'Expected first option to be selected');
+            .withContext('Expected first option to be selected').toBe(true);
         });
 
         it('should not focus the active chip when the value is set programmatically', () => {
@@ -681,37 +699,41 @@ describe('MDC-based MatChipListbox', () => {
 
           const array = chips.toArray();
 
-          expect(array[1].selected).toBeTruthy('Expect pizza-1 chip to be selected');
+          expect(array[1].selected)
+            .withContext('Expect pizza-1 chip to be selected').toBeTruthy();
 
           dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
           fixture.detectChanges();
 
-          expect(array[1].selected).toBeFalsy(
-            'Expect chip to be not selected after toggle selected');
+          expect(array[1].selected)
+            .withContext('Expect chip to be not selected after toggle selected').toBeFalsy();
         });
 
         it('should set the view value from the form', () => {
           const chipListbox = fixture.componentInstance.chipListbox;
           const array = chips.toArray();
 
-          expect(chipListbox.value).toBeFalsy('Expect chip listbox to have no initial value');
+          expect(chipListbox.value)
+            .withContext('Expect chip listbox to have no initial value').toBeFalsy();
 
           fixture.componentInstance.control.setValue(['pizza-1']);
           fixture.detectChanges();
 
-          expect(array[1].selected).toBeTruthy('Expect chip to be selected');
+          expect(array[1].selected)
+            .withContext('Expect chip to be selected').toBeTruthy();
         });
 
         it('should update the form value when the view changes', () => {
 
           expect(fixture.componentInstance.control.value)
-            .toEqual(null, `Expected the control's value to be empty initially.`);
+            .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
           dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
           fixture.detectChanges();
 
           expect(fixture.componentInstance.control.value)
-            .toEqual(['steak-0'], `Expected control's value to be set to the new option.`);
+            .withContext(`Expected control's value to be set to the new option.`)
+            .toEqual(['steak-0']);
         });
 
         it('should clear the selection when a nonexistent option value is selected', () => {
@@ -721,14 +743,16 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeTruthy(`Expected chip with the value to be selected.`);
+            .withContext(`Expected chip with the value to be selected.`)
+            .toBeTruthy();
 
           fixture.componentInstance.control.setValue(['gibberish']);
 
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeFalsy(`Expected chip with the old value not to be selected.`);
+            .withContext(`Expected chip with the old value not to be selected.`)
+            .toBeFalsy();
         });
 
         it('should clear the selection when the control is reset', () => {
@@ -741,7 +765,8 @@ describe('MDC-based MatChipListbox', () => {
           fixture.detectChanges();
 
           expect(array[1].selected)
-            .toBeFalsy(`Expected chip with the old value not to be selected.`);
+            .withContext(`Expected chip with the old value not to be selected.`)
+            .toBeFalsy();
         });
       });
     });
diff --git a/src/material-experimental/mdc-chips/chip-option.spec.ts b/src/material-experimental/mdc-chips/chip-option.spec.ts
index 5b442a889dc4..efbec4770c57 100644
--- a/src/material-experimental/mdc-chips/chip-option.spec.ts
+++ b/src/material-experimental/mdc-chips/chip-option.spec.ts
@@ -176,12 +176,12 @@ describe('MDC-based Option Chips', () => {
 
       it('should be able to disable ripples through ripple global options at runtime', () => {
         expect(chipInstance._isRippleDisabled())
-            .toBe(false, 'Expected chip ripples to be enabled.');
+          .withContext('Expected chip ripples to be enabled.').toBe(false);
 
         globalRippleOptions.disabled = true;
 
         expect(chipInstance._isRippleDisabled())
-            .toBe(true, 'Expected chip ripples to be disabled.');
+          .withContext('Expected chip ripples to be disabled.').toBe(true);
       });
 
     });
diff --git a/src/material-experimental/mdc-chips/chip.spec.ts b/src/material-experimental/mdc-chips/chip.spec.ts
index 613ec7e8b69a..a929bf9056d6 100644
--- a/src/material-experimental/mdc-chips/chip.spec.ts
+++ b/src/material-experimental/mdc-chips/chip.spec.ts
@@ -81,7 +81,8 @@ describe('MDC-based MatChip', () => {
       chipDebugElement = fixture.debugElement.query(By.directive(MatChip))!;
       chipRippleDebugElement = chipDebugElement.query(By.directive(MatRipple))!;
       chipRippleInstance = chipRippleDebugElement.injector.get<MatRipple>(MatRipple);
-      expect(chipRippleInstance.disabled).toBe(true, 'Expected basic chip ripples to be disabled.');
+      expect(chipRippleInstance.disabled)
+        .withContext('Expected basic chip ripples to be disabled.').toBe(true);
     });
   });
 
@@ -138,21 +139,25 @@ describe('MDC-based MatChip', () => {
     });
 
     it('should be able to disable ripples with the `[rippleDisabled]` input', () => {
-      expect(chipRippleInstance.disabled).toBe(false, 'Expected chip ripples to be enabled.');
+      expect(chipRippleInstance.disabled)
+        .withContext('Expected chip ripples to be enabled.').toBe(false);
 
       testComponent.rippleDisabled = true;
       fixture.detectChanges();
 
-      expect(chipRippleInstance.disabled).toBe(true, 'Expected chip ripples to be disabled.');
+      expect(chipRippleInstance.disabled)
+        .withContext('Expected chip ripples to be disabled.').toBe(true);
     });
 
     it('should disable ripples when the chip is disabled', () => {
-      expect(chipRippleInstance.disabled).toBe(false, 'Expected chip ripples to be enabled.');
+      expect(chipRippleInstance.disabled)
+        .withContext('Expected chip ripples to be enabled.').toBe(false);
 
       testComponent.disabled = true;
       fixture.detectChanges();
 
-      expect(chipRippleInstance.disabled).toBe(true, 'Expected chip ripples to be disabled.');
+      expect(chipRippleInstance.disabled)
+        .withContext('Expected chip ripples to be disabled.').toBe(true);
     });
 
     it('should update the aria-label for disabled chips', () => {
diff --git a/src/material-experimental/mdc-core/option/option.spec.ts b/src/material-experimental/mdc-core/option/option.spec.ts
index fd80891c3abf..6de4311d622b 100644
--- a/src/material-experimental/mdc-core/option/option.spec.ts
+++ b/src/material-experimental/mdc-core/option/option.spec.ts
@@ -163,20 +163,21 @@ describe('MatOption component', () => {
     });
 
     it('should show ripples by default', () => {
-      expect(optionInstance.disableRipple).toBeFalsy('Expected ripples to be enabled by default');
+      expect(optionInstance.disableRipple)
+        .withContext('Expected ripples to be enabled by default').toBeFalsy();
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially');
+        .withContext('Expected no ripples to show up initially').toBe(0);
 
       dispatchFakeEvent(optionNativeElement, 'mousedown');
       dispatchFakeEvent(optionNativeElement, 'mouseup');
 
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up after a fake click.');
+        .withContext('Expected one ripple to show up after a fake click.').toBe(1);
     });
 
     it('should not show ripples if the option is disabled', () => {
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially');
+        .withContext('Expected no ripples to show up initially').toBe(0);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
@@ -185,7 +186,7 @@ describe('MatOption component', () => {
       dispatchFakeEvent(optionNativeElement, 'mouseup');
 
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up after click on a disabled option.');
+        .withContext('Expected no ripples to show up after click on a disabled option.').toBe(0);
     });
 
   });
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index 089153936790..93c735dcc0f2 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -156,8 +156,9 @@ describe('MDC-based MatDialog', () => {
 
     expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef);
     expect(dialogInjector.get<DirectiveWithViewContainer>(DirectiveWithViewContainer))
-        .toBeTruthy('Expected the dialog component to be created with the injector from ' +
-          'the viewContainerRef.');
+      .withContext('Expected the dialog component to be created with the injector from ' +
+                   'the viewContainerRef.')
+      .toBeTruthy();
   });
 
   it('should open a dialog with a component and no ViewContainerRef', () => {
@@ -262,8 +263,8 @@ describe('MDC-based MatDialog', () => {
 
        // beforeClose should emit before dialog container is destroyed
        const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
-         expect(overlayContainerElement.querySelector('mat-dialog-container'))
-             .not.toBeNull('dialog container exists when beforeClose is called');
+         expect(overlayContainerElement.querySelector('mat-dialog-container')).not
+          .withContext('dialog container exists when beforeClose is called').toBeNull();
        });
 
        dialogRef.beforeClosed().subscribe(beforeCloseHandler);
@@ -311,7 +312,7 @@ describe('MDC-based MatDialog', () => {
        flushMicrotasks();
 
        expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-           .toBe(1, 'Expected one open dialog.');
+        .withContext('Expected one open dialog.').toBe(1);
 
        dialogRef.close();
        flushMicrotasks();
@@ -319,7 +320,7 @@ describe('MDC-based MatDialog', () => {
        tick(500);
 
        expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-           .toBe(0, 'Expected no open dialogs.');
+        .withContext('Expected no open dialogs.').toBe(0);
      }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
@@ -446,7 +447,7 @@ describe('MDC-based MatDialog', () => {
        let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
        expect(overlayPane.style.maxWidth)
-           .toBe('80vw', 'Expected dialog to set a default max-width on overlay pane');
+        .withContext('Expected dialog to set a default max-width on overlay pane').toBe('80vw');
 
        dialogRef.close();
 
@@ -707,7 +708,7 @@ describe('MDC-based MatDialog', () => {
        dialogRef.afterClosed().subscribe(() => {
          spy();
          expect(dialogRef.componentInstance)
-             .toBeTruthy('Expected component instance to be defined.');
+          .withContext('Expected component instance to be defined.').toBeTruthy();
        });
 
        dialogRef.close();
@@ -769,7 +770,8 @@ describe('MDC-based MatDialog', () => {
        viewContainerFixture.detectChanges();
        flush();
 
-       expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
+       expect(dialogRef.componentInstance)
+        .withContext('Expected reference to have been cleared.').toBeFalsy();
      }));
 
   it('should assign a unique id to each dialog', () => {
@@ -804,16 +806,17 @@ describe('MDC-based MatDialog', () => {
        viewContainerFixture.detectChanges();
        flush();
 
-       expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden');
+       expect(sibling.getAttribute('aria-hidden'))
+        .withContext('Expected sibling to be hidden').toBe('true');
        expect(overlayContainerElement.hasAttribute('aria-hidden'))
-           .toBe(false, 'Expected overlay container not to be hidden.');
+        .withContext('Expected overlay container not to be hidden.').toBe(false);
 
        dialogRef.close();
        viewContainerFixture.detectChanges();
        flush();
 
        expect(sibling.hasAttribute('aria-hidden'))
-           .toBe(false, 'Expected sibling to no longer be hidden.');
+        .withContext('Expected sibling to no longer be hidden.').toBe(false);
        sibling.parentNode!.removeChild(sibling);
      }));
 
@@ -827,14 +830,15 @@ describe('MDC-based MatDialog', () => {
        viewContainerFixture.detectChanges();
        flush();
 
-       expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden.');
+       expect(sibling.getAttribute('aria-hidden'))
+        .withContext('Expected sibling to be hidden.').toBe('true');
 
        dialogRef.close();
        viewContainerFixture.detectChanges();
        flush();
 
        expect(sibling.getAttribute('aria-hidden'))
-           .toBe('true', 'Expected sibling to remain hidden.');
+        .withContext('Expected sibling to remain hidden.').toBe('true');
        sibling.parentNode!.removeChild(sibling);
      }));
 
@@ -849,7 +853,7 @@ describe('MDC-based MatDialog', () => {
        flush();
 
        expect(sibling.hasAttribute('aria-hidden'))
-           .toBe(false, 'Expected live element not to be hidden.');
+        .withContext('Expected live element not to be hidden.').toBe(false);
        sibling.parentNode!.removeChild(sibling);
      }));
 
@@ -862,7 +866,8 @@ describe('MDC-based MatDialog', () => {
         .not.toContain('custom-class-one', 'Expected class to be initially missing');
 
     dialogRef.addPanelClass('custom-class-one');
-    expect(pane.classList).toContain('custom-class-one', 'Expected class to be added');
+    expect(pane.classList)
+      .withContext('Expected class to be added').toContain('custom-class-one');
 
     dialogRef.removePanelClass('custom-class-one');
     expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed');
@@ -924,14 +929,16 @@ describe('MDC-based MatDialog', () => {
              overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
          let input = overlayContainerElement.querySelector('input') as HTMLInputElement;
 
-         expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
+         expect(document.activeElement)
+          .withContext('Expected input to be focused on open').toBe(input);
 
          input.blur();  // Programmatic clicks might not move focus so we simulate it.
          backdrop.click();
          viewContainerFixture.detectChanges();
          flush();
 
-         expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
+         expect(document.activeElement)
+          .withContext('Expected input to stay focused after click').toBe(input);
        }));
 
     it('should recapture focus to the first tabbable element when clicking on the backdrop with ' +
@@ -947,14 +954,16 @@ describe('MDC-based MatDialog', () => {
       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       let input = overlayContainerElement.querySelector('input') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused on open').toBe(input);
 
       input.blur(); // Programmatic clicks might not move focus so we simulate it.
       backdrop.click();
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
+      expect(document.activeElement)
+        .withContext('Expected input to stay focused after click').toBe(input);
     }));
 
     it('should recapture focus to the container when clicking on the backdrop with ' +
@@ -974,7 +983,8 @@ describe('MDC-based MatDialog', () => {
         let container =
             overlayContainerElement.querySelector('.mat-mdc-dialog-container') as HTMLInputElement;
 
-        expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+        expect(document.activeElement)
+          .withContext('Expected container to be focused on open').toBe(container);
 
         container.blur();  // Programmatic clicks might not move focus so we simulate it.
         backdrop.click();
@@ -982,7 +992,7 @@ describe('MDC-based MatDialog', () => {
         flush();
 
         expect(document.activeElement)
-            .toBe(container, 'Expected container to stay focused after click');
+          .withContext('Expected container to stay focused after click').toBe(container);
       }));
   });
 
@@ -1003,7 +1013,7 @@ describe('MDC-based MatDialog', () => {
       .querySelector('.mat-mdc-dialog-title[tabindex="-1"]') as HTMLInputElement;
 
     expect(document.activeElement)
-      .toBe(firstHeader, 'Expected first header to be focused on open');
+      .withContext('Expected first header to be focused on open').toBe(firstHeader);
 
     firstHeader.blur(); // Programmatic clicks might not move focus so we simulate it.
     backdrop.click();
@@ -1011,7 +1021,7 @@ describe('MDC-based MatDialog', () => {
     flush();
 
     expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to stay focused after click');
+      .withContext('Expected first header to stay focused after click').toBe(firstHeader);
   }));
 
   it('should recapture focus to the first element that matches the css selector when ' +
@@ -1031,7 +1041,7 @@ describe('MDC-based MatDialog', () => {
       overlayContainerElement.querySelector('[mat-dialog-close]') as HTMLInputElement;
 
     expect(document.activeElement)
-      .toBe(firstButton, 'Expected first button to be focused on open');
+      .withContext('Expected first button to be focused on open').toBe(firstButton);
 
     firstButton.blur(); // Programmatic clicks might not move focus so we simulate it.
     backdrop.click();
@@ -1039,7 +1049,7 @@ describe('MDC-based MatDialog', () => {
     flush();
 
     expect(document.activeElement)
-        .toBe(firstButton, 'Expected first button to stay focused after click');
+      .withContext('Expected first button to stay focused after click').toBe(firstButton);
   }));
 
   describe('hasBackdrop option', () => {
@@ -1104,7 +1114,8 @@ describe('MDC-based MatDialog', () => {
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+        .withContext('Expected first tabbable element (input) in the dialog to be focused.')
+        .toBe('INPUT');
     }));
 
     it('should focus the dialog element on open', fakeAsync(() => {
@@ -1119,7 +1130,8 @@ describe('MDC-based MatDialog', () => {
       let container =
         overlayContainerElement.querySelector('.mat-mdc-dialog-container') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected container to be focused on open').toBe(container);
     }));
 
     it('should focus the first header element on open', fakeAsync(() => {
@@ -1135,7 +1147,7 @@ describe('MDC-based MatDialog', () => {
         overlayContainerElement.querySelector('h1[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to be focused on open');
+        .withContext('Expected first header to be focused on open').toBe(firstHeader);
     }));
 
     it('should focus the first element that matches the css selector from autoFocus on open',
@@ -1152,7 +1164,7 @@ describe('MDC-based MatDialog', () => {
         overlayContainerElement.querySelector('p[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstParagraph, 'Expected first paragraph to be focused on open');
+        .withContext('Expected first paragraph to be focused on open').toBe(firstParagraph);
     }));
 
     it('should attach the focus trap even if automatic focus is disabled', fakeAsync(() => {
@@ -1195,9 +1207,8 @@ describe('MDC-based MatDialog', () => {
          tick(500);
 
          expect(document.activeElement!.id)
-             .toBe(
-                 'dialog-trigger',
-                 'Expected that the trigger was refocused after the dialog is closed.');
+          .withContext('Expected that the trigger was refocused after the dialog is closed.')
+          .toBe('dialog-trigger');
 
          document.body.removeChild(button);
        }));
@@ -1247,7 +1258,8 @@ describe('MDC-based MatDialog', () => {
 
          tick(500);
          viewContainerFixture.detectChanges();
-         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         expect(lastFocusOrigin!)
+          .withContext('Expected the trigger button to be blurred').toBeNull();
 
          dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
 
@@ -1256,7 +1268,7 @@ describe('MDC-based MatDialog', () => {
          tick(500);
 
          expect(lastFocusOrigin!)
-             .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+          .withContext('Expected the trigger button to be focused via keyboard').toBe('keyboard');
 
          focusMonitor.stopMonitoring(button);
          document.body.removeChild(button);
@@ -1281,7 +1293,8 @@ describe('MDC-based MatDialog', () => {
 
          tick(500);
          viewContainerFixture.detectChanges();
-         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         expect(lastFocusOrigin!)
+          .withContext('Expected the trigger button to be blurred').toBeNull();
 
          const backdrop =
              overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1291,7 +1304,7 @@ describe('MDC-based MatDialog', () => {
          tick(500);
 
          expect(lastFocusOrigin!)
-             .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+          .withContext('Expected the trigger button to be focused via mouse').toBe('mouse');
 
          focusMonitor.stopMonitoring(button);
          document.body.removeChild(button);
@@ -1317,7 +1330,8 @@ describe('MDC-based MatDialog', () => {
 
          tick(500);
          viewContainerFixture.detectChanges();
-         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         expect(lastFocusOrigin!)
+          .withContext('Expected the trigger button to be blurred').toBeNull();
 
          const closeButton =
              overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1330,7 +1344,7 @@ describe('MDC-based MatDialog', () => {
          tick(500);
 
          expect(lastFocusOrigin!)
-             .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+          .withContext('Expected the trigger button to be focused via keyboard').toBe('keyboard');
 
          focusMonitor.stopMonitoring(button);
          document.body.removeChild(button);
@@ -1355,7 +1369,8 @@ describe('MDC-based MatDialog', () => {
 
          tick(500);
          viewContainerFixture.detectChanges();
-         expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+         expect(lastFocusOrigin!)
+          .withContext('Expected the trigger button to be blurred').toBeNull();
 
          const closeButton =
              overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1369,7 +1384,7 @@ describe('MDC-based MatDialog', () => {
          tick(500);
 
          expect(lastFocusOrigin!)
-             .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+          .withContext('Expected the trigger button to be focused via mouse').toBe('mouse');
 
          focusMonitor.stopMonitoring(button);
          document.body.removeChild(button);
@@ -1400,9 +1415,8 @@ describe('MDC-based MatDialog', () => {
          flush();
 
          expect(document.activeElement!.id)
-             .toBe(
-                 'input-to-be-focused',
-                 'Expected that the trigger was refocused after the dialog is closed.');
+          .withContext('Expected that the trigger was refocused after the dialog is closed.')
+          .toBe('input-to-be-focused');
 
          document.body.removeChild(button);
          document.body.removeChild(input);
@@ -1417,7 +1431,7 @@ describe('MDC-based MatDialog', () => {
          flushMicrotasks();
 
          expect(document.activeElement!.tagName)
-             .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
+          .withContext('Expected dialog container to be focused.').toBe('MAT-DIALOG-CONTAINER');
        }));
 
     it('should be able to disable focus restoration', fakeAsync(() => {
@@ -1473,14 +1487,14 @@ describe('MDC-based MatDialog', () => {
          otherButton.focus();
 
          expect(document.activeElement!.id)
-             .toBe('other-button', 'Expected focus to be on the alternate button.');
+          .withContext('Expected focus to be on the alternate button.').toBe('other-button');
 
          flushMicrotasks();
          viewContainerFixture.detectChanges();
          flush();
 
          expect(document.activeElement!.id)
-             .toBe('other-button', 'Expected focus to stay on the alternate button.');
+          .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
          body.removeChild(button);
          body.removeChild(otherButton);
@@ -1575,9 +1589,9 @@ describe('MDC-based MatDialog', () => {
            flush();
            viewContainerFixture.detectChanges();
 
-           expect(title.id).toBeTruthy('Expected title element to have an id.');
+           expect(title.id).withContext('Expected title element to have an id.').toBeTruthy();
            expect(container.getAttribute('aria-labelledby'))
-               .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
+            .withContext('Expected the aria-labelledby to match the title id.').toBe(title.id);
          }));
     }
   });
@@ -1621,7 +1635,7 @@ describe('MDC-based MatDialog', () => {
          flush();
          viewContainerFixture.detectChanges();
 
-         expect(title.id).toBeTruthy('Expected title element to have an id.');
+         expect(title.id).withContext('Expected title element to have an id.').toBeTruthy();
          expect(container.getAttribute('aria-labelledby')).toBe('Labelled By');
        }));
   });
@@ -1708,14 +1722,15 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
        flush();
 
        expect(overlayContainerElement.textContent)
-           .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
        childDialog.closeAll();
        fixture.detectChanges();
        flush();
 
        expect(overlayContainerElement.textContent!.trim())
-           .toBe('', 'Expected closeAll on child MatDialog to close dialog opened by parent');
+        .withContext('Expected closeAll on child MatDialog to close dialog opened by parent')
+        .toBe('');
      }));
 
   it('should close dialogs opened by a child when calling closeAll on a parent MatDialog',
@@ -1724,14 +1739,15 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
        fixture.detectChanges();
 
        expect(overlayContainerElement.textContent)
-           .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
        parentDialog.closeAll();
        fixture.detectChanges();
        flush();
 
        expect(overlayContainerElement.textContent!.trim())
-           .toBe('', 'Expected closeAll on parent MatDialog to close dialog opened by child');
+        .withContext('Expected closeAll on parent MatDialog to close dialog opened by child')
+        .toBe('');
      }));
 
   it('should close the top dialog via the escape key', fakeAsync(() => {
@@ -1750,14 +1766,14 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
        flush();
 
        expect(overlayContainerElement.textContent)
-           .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
        childDialog.ngOnDestroy();
        fixture.detectChanges();
        flush();
 
        expect(overlayContainerElement.textContent)
-           .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
      }));
 });
 
diff --git a/src/material-experimental/mdc-input/input.spec.ts b/src/material-experimental/mdc-input/input.spec.ts
index 1a97d32697c1..b971b87f59cd 100644
--- a/src/material-experimental/mdc-input/input.spec.ts
+++ b/src/material-experimental/mdc-input/input.spec.ts
@@ -45,8 +45,8 @@ describe('MatMdcInput without forms', () => {
 
     let formField = fixture.debugElement.query(By.directive(MatFormField))!
       .componentInstance as MatFormField;
-    expect(formField.floatLabel).toBe('auto',
-      'Expected MatInput to set floatingLabel to auto by default.');
+    expect(formField.floatLabel)
+      .withContext('Expected MatInput to set floatingLabel to auto by default.').toBe('auto');
   }));
 
   it('should default to global floating label type', fakeAsync(() => {
@@ -57,8 +57,9 @@ describe('MatMdcInput without forms', () => {
 
     let formField = fixture.debugElement.query(By.directive(MatFormField))!
       .componentInstance as MatFormField;
-    expect(formField.floatLabel).toBe('always',
-      'Expected MatInput to set floatingLabel to always from global option.');
+    expect(formField.floatLabel)
+      .withContext('Expected MatInput to set floatingLabel to always from global option.')
+      .toBe('always');
   }));
 
   it('should not be treated as empty if type is date', fakeAsync(() => {
@@ -203,13 +204,13 @@ describe('MatMdcInput without forms', () => {
       fixture.debugElement.query(By.css('input'))!.nativeElement;
 
     expect(inputElement.getAttribute('aria-required'))
-      .toBe('false', 'Expected aria-required to reflect required state of false');
+      .withContext('Expected aria-required to reflect required state of false').toBe('false');
 
     fixture.componentInstance.required = true;
     fixture.detectChanges();
 
     expect(inputElement.getAttribute('aria-required'))
-      .toBe('true', 'Expected aria-required to reflect required state of true');
+      .withContext('Expected aria-required to reflect required state of true').toBe('true');
   }));
 
   it('should not overwrite existing id', fakeAsync(() => {
@@ -363,14 +364,14 @@ describe('MatMdcInput without forms', () => {
     const inputEl = fixture.debugElement.query(By.css('input'))!.nativeElement;
 
     expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
-      .toBe(false, `Expected form field not to start out disabled.`);
+      .withContext(`Expected form field not to start out disabled.`).toBe(false);
     expect(inputEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
     expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
-      .toBe(true, `Expected form field to look disabled after property is set.`);
+      .withContext(`Expected form field to look disabled after property is set.`).toBe(true);
     expect(inputEl.disabled).toBe(true);
   }));
 
@@ -383,14 +384,14 @@ describe('MatMdcInput without forms', () => {
     const selectEl = fixture.debugElement.query(By.css('select'))!.nativeElement;
 
     expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
-      .toBe(false, `Expected form field not to start out disabled.`);
+      .withContext(`Expected form field not to start out disabled.`).toBe(false);
     expect(selectEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
     expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
-      .toBe(true, `Expected form field to look disabled after property is set.`);
+      .withContext(`Expected form field to look disabled after property is set.`).toBe(true);
     expect(selectEl.disabled).toBe(true);
   }));
 
@@ -879,15 +880,19 @@ describe('MatMdcInput with forms', () => {
     }));
 
     it('should not show any errors if the user has not interacted', fakeAsync(() => {
-      expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.untouched)
+        .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
     }));
 
     it('should display an error message when the input is touched and invalid', fakeAsync(() => {
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       inputEl.value = 'not valid';
       testComponent.formControl.markAsTouched();
@@ -895,11 +900,12 @@ describe('MatMdcInput with forms', () => {
       flush();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should not reset text-field validity if focus changes for an invalid input',
@@ -918,22 +924,27 @@ describe('MatMdcInput with forms', () => {
     }));
 
     it('should display an error message when the parent form is submitted', fakeAsync(() => {
-      expect(testComponent.form.submitted).toBe(false, 'Expected form not to have been submitted');
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.form.submitted)
+        .withContext('Expected form not to have been submitted').toBe(false);
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       inputEl.value = 'not valid';
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.form.submitted).toBe(true, 'Expected form to have been submitted');
+      expect(testComponent.form.submitted)
+        .withContext('Expected form to have been submitted').toBe(true);
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should display an error message when the parent form group is submitted', fakeAsync(() => {
@@ -948,12 +959,14 @@ describe('MatMdcInput with forms', () => {
       containerEl = groupFixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
       inputEl = groupFixture.debugElement.query(By.css('input'))!.nativeElement;
 
-      expect(component.formGroup.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(component.formGroup.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
       expect(component.formGroupDirective.submitted)
-        .toBe(false, 'Expected form not to have been submitted');
+        .withContext('Expected form not to have been submitted').toBe(false);
 
       inputEl.value = 'not valid';
       dispatchFakeEvent(groupFixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
@@ -961,13 +974,14 @@ describe('MatMdcInput with forms', () => {
       flush();
 
       expect(component.formGroupDirective.submitted)
-        .toBe(true, 'Expected form to have been submitted');
+        .withContext('Expected form to have been submitted').toBe(true);
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should hide the errors and show the hints once the input becomes valid', fakeAsync(() => {
@@ -976,11 +990,12 @@ describe('MatMdcInput with forms', () => {
       flush();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(0, 'Expected no hints to be shown.');
+        .withContext('Expected no hints to be shown.').toBe(0);
 
       testComponent.formControl.setValue('valid value');
       fixture.detectChanges();
@@ -989,9 +1004,9 @@ describe('MatMdcInput with forms', () => {
       expect(containerEl.classList).not.toContain('mat-form-field-invalid',
         'Expected container not to have the invalid class when valid.');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages when the input is valid.');
+        .withContext('Expected no error messages when the input is valid.').toBe(0);
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to be shown once the input is valid.');
+        .withContext('Expected one hint to be shown once the input is valid.').toBe(1);
     }));
 
     it('should not hide the hint if there are no error messages', fakeAsync(() => {
@@ -999,14 +1014,14 @@ describe('MatMdcInput with forms', () => {
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to be shown on load.');
+        .withContext('Expected one hint to be shown on load.').toBe(1);
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
       flush();
 
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to still be shown.');
+        .withContext('Expected one hint to still be shown.').toBe(1);
     }));
 
     it('should set the proper aria-live attribute on the error messages', fakeAsync(() => {
@@ -1021,7 +1036,7 @@ describe('MatMdcInput with forms', () => {
           .query(By.css('.mat-mdc-form-field-hint'))!.nativeElement.getAttribute('id');
       let describedBy = inputEl.getAttribute('aria-describedby');
 
-      expect(hintId).toBeTruthy('hint should be shown');
+      expect(hintId).withContext('hint should be shown').toBeTruthy();
       expect(describedBy).toBe(hintId);
 
       fixture.componentInstance.formControl.markAsTouched();
@@ -1031,7 +1046,7 @@ describe('MatMdcInput with forms', () => {
         .map(el => el.nativeElement.getAttribute('id')).join(' ');
       describedBy = inputEl.getAttribute('aria-describedby');
 
-      expect(errorIds).toBeTruthy('errors should be shown');
+      expect(errorIds).withContext('errors should be shown').toBeTruthy();
       expect(describedBy).toBe(errorIds);
     }));
 
@@ -1041,17 +1056,19 @@ describe('MatMdcInput with forms', () => {
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(inputEl.value).toBeFalsy();
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true"');
+        .withContext('Expected aria-invalid to be set to "true"').toBe('true');
 
       inputEl.value = 'not valid';
       fixture.detectChanges();
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
   });
@@ -1067,21 +1084,22 @@ describe('MatMdcInput with forms', () => {
 
       const control = component.formGroup.get('name')!;
 
-      expect(control.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(control.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages');
+        .withContext('Expected no error messages').toBe(0);
 
       control.markAsTouched();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages after being touched.');
+        .withContext('Expected no error messages after being touched.').toBe(0);
 
       component.errorState = true;
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error messages to have been rendered.');
+        .withContext('Expected one error messages to have been rendered.').toBe(1);
     }));
 
     it('should display an error message when global error matcher returns true', fakeAsync(() => {
@@ -1095,8 +1113,11 @@ describe('MatMdcInput with forms', () => {
       let testComponent = fixture.componentInstance;
 
       // Expect the control to still be untouched but the error to show due to the global setting
-      expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(1, 'Expected an error message');
+      // Expect the control to still be untouched but the error to show due to the global setting
+expect(testComponent.formControl.untouched)
+  .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected an error message').toBe(1);
     }));
 
     it('should display an error message when using ShowOnDirtyErrorStateMatcher', fakeAsync(() => {
@@ -1108,20 +1129,22 @@ describe('MatMdcInput with forms', () => {
       let containerEl = fixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
       let testComponent = fixture.componentInstance;
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages when touched');
+        .withContext('Expected no error messages when touched').toBe(0);
 
       testComponent.formControl.markAsDirty();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message when dirty');
+        .withContext('Expected one error message when dirty').toBe(1);
     }));
   });
 
@@ -1154,8 +1177,9 @@ describe('MatMdcInput with forms', () => {
     fixture.componentInstance.formControl.disable();
     fixture.detectChanges();
 
-    expect(formFieldEl.classList).toContain('mat-form-field-disabled',
-      `Expected form field to look disabled after disable() is called.`);
+    expect(formFieldEl.classList)
+      .withContext(`Expected form field to look disabled after disable() is called.`)
+      .toContain('mat-form-field-disabled');
     expect(inputEl.disabled).toBe(true);
   }));
 
diff --git a/src/material-experimental/mdc-list/list.spec.ts b/src/material-experimental/mdc-list/list.spec.ts
index 7ab93bfe283a..206122a00ad3 100644
--- a/src/material-experimental/mdc-list/list.spec.ts
+++ b/src/material-experimental/mdc-list/list.spec.ts
@@ -78,7 +78,7 @@ describe('MDC-based MatList', () => {
       .map(debugEl => debugEl.nativeElement as HTMLElement);
 
     expect(listItems.every(i => i.querySelector('.mat-mdc-focus-indicator') !== null))
-      .toBe(true, 'Expected all list items to have a strong focus indicator element.');
+      .withContext('Expected all list items to have a strong focus indicator element.').toBe(true);
   });
 
   it('should not clear custom classes provided by user', () => {
@@ -112,9 +112,12 @@ describe('MDC-based MatList', () => {
 
     const list = fixture.debugElement.children[0];
     const listItem = fixture.debugElement.children[0].query(By.css('mat-list-item'))!;
-    expect(list.nativeElement.getAttribute('role')).toBeNull('Expect mat-list no role');
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-list no role')
+      .toBeNull();
     expect(listItem.nativeElement.getAttribute('role'))
-        .toBeNull('Expect mat-list-item no role');
+      .withContext('Expect mat-list-item no role')
+      .toBeNull();
   });
 
   it('should not show ripples for non-nav lists', fakeAsync(() => {
@@ -243,12 +246,12 @@ describe('MDC-based MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected ripples to be enabled by default.');
+        .withContext('Expected ripples to be enabled by default.').toBe(1);
 
       // Wait for the ripples to go away.
       tick(enterDuration + exitDuration);
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected ripples to go away.');
+        .withContext('Expected ripples to go away.').toBe(0);
 
       fixture.componentInstance.disableListRipple = true;
       fixture.detectChanges();
@@ -257,7 +260,7 @@ describe('MDC-based MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples after list ripples are disabled.');
+        .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
     }));
 
   it('should disable item ripples when list ripples are disabled via the input in an action list',
@@ -271,12 +274,12 @@ describe('MDC-based MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected ripples to be enabled by default.');
+        .withContext('Expected ripples to be enabled by default.').toBe(1);
 
       // Wait for the ripples to go away.
       tick(enterDuration + exitDuration);
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected ripples to go away.');
+        .withContext('Expected ripples to go away.').toBe(0);
 
       fixture.componentInstance.disableListRipple = true;
       fixture.detectChanges();
@@ -285,7 +288,7 @@ describe('MDC-based MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples after list ripples are disabled.');
+        .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
     }));
 
 
diff --git a/src/material-experimental/mdc-list/selection-list.spec.ts b/src/material-experimental/mdc-list/selection-list.spec.ts
index 89d514cf9861..012eec771f90 100644
--- a/src/material-experimental/mdc-list/selection-list.spec.ts
+++ b/src/material-experimental/mdc-list/selection-list.spec.ts
@@ -214,13 +214,13 @@ describe('MDC-based MatSelectionList without forms', () => {
       let selectList =
         selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
 
-      expect(selectList.selected.length).toBe(0, 'before click');
+      expect(selectList.selected.length).withContext('before click').toBe(0);
       expect(listOptions[0].nativeElement.getAttribute('aria-disabled')).toBe('true');
 
       dispatchMouseEvent(testListItem._hostElement, 'click');
       fixture.detectChanges();
 
-      expect(selectList.selected.length).toBe(0, 'after click');
+      expect(selectList.selected.length).withContext('after click').toBe(0);
     });
 
     it('should be able to un-disable disabled items', () => {
@@ -529,12 +529,12 @@ describe('MDC-based MatSelectionList without forms', () => {
         dispatchMouseEvent(rippleTarget, 'mouseup');
 
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected ripples to be enabled by default.');
+          .withContext('Expected ripples to be enabled by default.').toBe(1);
 
         // Wait for the ripples to go away.
         tick(enterDuration + exitDuration);
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected ripples to go away.');
+          .withContext('Expected ripples to go away.').toBe(0);
 
         fixture.componentInstance.listRippleDisabled = true;
         fixture.detectChanges();
@@ -543,7 +543,7 @@ describe('MDC-based MatSelectionList without forms', () => {
         dispatchMouseEvent(rippleTarget, 'mouseup');
 
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples after list ripples are disabled.');
+          .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
       }));
 
     it('can bind both selected and value at the same time', () => {
@@ -639,13 +639,13 @@ describe('MDC-based MatSelectionList without forms', () => {
 
     it('should disable ripples for disabled option', () => {
       expect(listOption.rippleDisabled)
-        .toBe(false, 'Expected ripples to be enabled by default');
+        .withContext('Expected ripples to be enabled by default').toBe(false);
 
       fixture.componentInstance.disableItem = true;
       fixture.detectChanges();
 
       expect(listOption.rippleDisabled)
-        .toBe(true, 'Expected ripples to be disabled if option is disabled');
+        .withContext('Expected ripples to be disabled if option is disabled').toBe(true);
     });
 
     it('should apply the "mat-list-item-disabled" class properly', () => {
@@ -701,13 +701,13 @@ describe('MDC-based MatSelectionList without forms', () => {
       const testOption = listOption[2].componentInstance as MatListOption;
 
       expect(testOption.rippleDisabled)
-        .toBe(true, 'Expected ripples of list option to be disabled');
+        .withContext('Expected ripples of list option to be disabled').toBe(true);
 
       fixture.componentInstance.disabled = false;
       fixture.detectChanges();
 
       expect(testOption.rippleDisabled)
-        .toBe(false, 'Expected ripples of list option to be enabled');
+        .withContext('Expected ripples of list option to be enabled').toBe(false);
     });
   });
 
@@ -735,11 +735,11 @@ describe('MDC-based MatSelectionList without forms', () => {
 
     it('should be able to customize checkbox position', () => {
       expect(fixture.nativeElement.querySelector('.mdc-list-item__end .mdc-checkbox'))
-        .toBeTruthy('Expected checkbox to show up after content.');
-      expect(
-        fixture.nativeElement.querySelector('.mdc-list-item__start .mdc-checkbox')
-      )
-        .toBeFalsy('Expected no checkbox to show up before content.');
+        .withContext('Expected checkbox to show up after content.')
+        .toBeTruthy();
+      expect(fixture.nativeElement.querySelector('.mdc-list-item__start .mdc-checkbox'))
+        .withContext('Expected no checkbox to show up before content.')
+        .toBeFalsy();
     });
   });
 
@@ -761,7 +761,8 @@ describe('MDC-based MatSelectionList without forms', () => {
       const checkboxPositionClass = position === 'before' ?
           'mdc-list-item--with-leading-checkbox' : 'mdc-list-item--with-trailing-checkbox';
       expect(listItemElement.querySelector(`${containerSelector} .mdc-checkbox`))
-          .toBeDefined(`Expected checkbox to be aligned ${position}`);
+        .withContext(`Expected checkbox to be aligned ${position}`)
+        .toBeDefined();
       expect(listItemElement.classList).toContain(checkboxPositionClass);
     }
 
@@ -1061,7 +1062,7 @@ describe('MDC-based MatSelectionList with forms', () => {
 
     it('should update the model if an option got selected programmatically', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       listOptions[0].toggle();
       fixture.detectChanges();
@@ -1069,12 +1070,12 @@ describe('MDC-based MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should update the model if an option got clicked', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       dispatchMouseEvent(listOptions[0]._hostElement, 'click');
       fixture.detectChanges();
@@ -1082,12 +1083,12 @@ describe('MDC-based MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should update the options if a model value is set', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       fixture.componentInstance.selectedOptions = ['opt3'];
       fixture.detectChanges();
@@ -1095,30 +1096,32 @@ describe('MDC-based MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should not mark the model as touched when the list is blurred', fakeAsync(() => {
       expect(ngModel.touched)
-        .toBe(false, 'Expected the selection-list to be untouched by default.');
+        .withContext('Expected the selection-list to be untouched by default.').toBe(false);
 
       dispatchFakeEvent(selectionListDebug.nativeElement, 'blur');
       fixture.detectChanges();
       tick();
 
-      expect(ngModel.touched).toBe(false, 'Expected the selection-list to remain untouched.');
+      expect(ngModel.touched)
+        .withContext('Expected the selection-list to remain untouched.').toBe(false);
     }));
 
     it('should mark the model as touched when a list item is blurred', fakeAsync(() => {
       expect(ngModel.touched)
-        .toBe(false, 'Expected the selection-list to be untouched by default.');
+        .withContext('Expected the selection-list to be untouched by default.').toBe(false);
 
       dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-mdc-list-option'), 'blur');
       fixture.detectChanges();
       tick();
 
       expect(ngModel.touched)
-        .toBe(true, 'Expected the selection-list to be touched after an item is blurred.');
+        .withContext('Expected the selection-list to be touched after an item is blurred.')
+        .toBe(true);
     }));
 
     it('should be pristine by default', fakeAsync(() => {
@@ -1136,7 +1139,7 @@ describe('MDC-based MatSelectionList with forms', () => {
       tick();
 
       expect(ngModel.pristine)
-        .toBe(true, 'Expected the selection-list to be pristine by default.');
+        .withContext('Expected the selection-list to be pristine by default.').toBe(true);
 
       listOptions[1].toggle();
       fixture.detectChanges();
@@ -1144,7 +1147,7 @@ describe('MDC-based MatSelectionList with forms', () => {
       tick();
 
       expect(ngModel.pristine)
-        .toBe(false, 'Expected the selection-list to be dirty after state change.');
+        .withContext('Expected the selection-list to be dirty after state change.').toBe(false);
     }));
 
     it('should remove a selected option from the value on destroy', fakeAsync(() => {
@@ -1255,28 +1258,28 @@ describe('MDC-based MatSelectionList with forms', () => {
 
     it('should be able to disable options from the control', () => {
       expect(selectionList.disabled)
-        .toBe(false, 'Expected the selection list to be enabled.');
+        .withContext('Expected the selection list to be enabled.').toBe(false);
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
 
       expect(selectionList.disabled)
-        .toBe(true, 'Expected the selection list to be disabled.');
+        .withContext('Expected the selection list to be disabled.').toBe(true);
       expect(listOptions.every(option => option.disabled))
-        .toBe(true, 'Expected every list option to be disabled.');
+        .withContext('Expected every list option to be disabled.').toBe(true);
     });
 
     it('should be able to update the disabled property after form control disabling', () => {
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
 
       expect(listOptions.every(option => option.disabled))
-        .toBe(true, 'Expected every list option to be disabled.');
+        .withContext('Expected every list option to be disabled.').toBe(true);
 
       // Previously the selection list has been disabled through FormControl#disable. Now we
       // want to verify that we can still change the disabled state through updating the disabled
@@ -1286,24 +1289,26 @@ describe('MDC-based MatSelectionList with forms', () => {
       fixture.detectChanges();
 
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
     });
 
     it('should be able to set the value through the form control', () => {
       expect(listOptions.every(option => !option.selected))
-        .toBe(true, 'Expected every list option to be unselected.');
+        .withContext('Expected every list option to be unselected.').toBe(true);
 
       fixture.componentInstance.formControl.setValue(['opt2', 'opt3']);
       fixture.detectChanges();
 
-      expect(listOptions[1].selected).toBe(true, 'Expected second option to be selected.');
-      expect(listOptions[2].selected).toBe(true, 'Expected third option to be selected.');
+      expect(listOptions[1].selected)
+        .withContext('Expected second option to be selected.').toBe(true);
+      expect(listOptions[2].selected)
+        .withContext('Expected third option to be selected.').toBe(true);
 
       fixture.componentInstance.formControl.setValue(null);
       fixture.detectChanges();
 
       expect(listOptions.every(option => !option.selected))
-        .toBe(true, 'Expected every list option to be unselected.');
+        .withContext('Expected every list option to be unselected.').toBe(true);
     });
 
     it('should deselect option whose value no longer matches', () => {
@@ -1312,12 +1317,14 @@ describe('MDC-based MatSelectionList with forms', () => {
       fixture.componentInstance.formControl.setValue(['opt2']);
       fixture.detectChanges();
 
-      expect(option.selected).toBe(true, 'Expected option to be selected.');
+      expect(option.selected)
+        .withContext('Expected option to be selected.').toBe(true);
 
       option.value = 'something-different';
       fixture.detectChanges();
 
-      expect(option.selected).toBe(false, 'Expected option not to be selected.');
+      expect(option.selected)
+        .withContext('Expected option not to be selected.').toBe(false);
       expect(fixture.componentInstance.formControl.value).toEqual([]);
     });
 
@@ -1331,8 +1338,10 @@ describe('MDC-based MatSelectionList with forms', () => {
       listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
         .map(optionDebugEl => optionDebugEl.componentInstance);
 
-      expect(listOptions[1].selected).toBe(true, 'Expected second option to be selected.');
-      expect(listOptions[2].selected).toBe(true, 'Expected third option to be selected.');
+      expect(listOptions[1].selected)
+        .withContext('Expected second option to be selected.').toBe(true);
+      expect(listOptions[2].selected)
+        .withContext('Expected third option to be selected.').toBe(true);
     });
 
     it('should not clear the form control when the list is destroyed', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts
index d310f46000f8..7e6927b0d486 100644
--- a/src/material-experimental/mdc-menu/menu.spec.ts
+++ b/src/material-experimental/mdc-menu/menu.spec.ts
@@ -562,7 +562,8 @@ describe('MDC-based MatMenu', () => {
       expect(panel.classList).toContain('custom-two');
       expect(panel.classList).toContain('mat-mdc-elevation-specific');
       expect(panel.classList)
-          .toContain('mat-mdc-elevation-z8', 'Expected mat-mdc-elevation-z8 not to be removed');
+        .withContext('Expected mat-mdc-elevation-z8 not to be removed')
+        .toContain('mat-mdc-elevation-z8');
     }));
 
   it('should set the "menu" role on the overlay panel', fakeAsync(() => {
@@ -574,10 +575,10 @@ describe('MDC-based MatMenu', () => {
 
     const menuPanel = overlayContainerElement.querySelector('.mat-mdc-menu-panel');
 
-    expect(menuPanel).toBeTruthy('Expected to find a menu panel.');
+    expect(menuPanel).withContext('Expected to find a menu panel.').toBeTruthy();
 
     const role = menuPanel ? menuPanel.getAttribute('role') : '';
-    expect(role).toBe('menu', 'Expected panel to have the "menu" role.');
+    expect(role).withContext('Expected panel to have the "menu" role.').toBe('menu');
   }));
 
   it('should forward ARIA attributes to the menu panel', fakeAsync(() => {
@@ -979,7 +980,8 @@ describe('MDC-based MatMenu', () => {
       let menuPanel = document.querySelector('.mat-mdc-menu-panel')!;
       let items = menuPanel.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
 
-      expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected first item to be focused on open').toBe(items[0]);
 
       // Add a new item after the first one.
       fixture.componentInstance.items.splice(1, 0, {label: 'Calzone', disabled: false});
@@ -990,7 +992,8 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick();
 
-      expect(document.activeElement).toBe(items[1], 'Expected second item to be focused');
+      expect(document.activeElement)
+        .withContext('Expected second item to be focused').toBe(items[1]);
       flush();
     }));
 
@@ -1010,18 +1013,21 @@ describe('MDC-based MatMenu', () => {
     const menuPanel = document.querySelector('.mat-mdc-menu-panel')!;
     const items = menuPanel.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
 
-    expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+    expect(document.activeElement)
+      .withContext('Expected first item to be focused on open').toBe(items[0]);
 
     fixture.componentInstance.itemInstances.toArray()[3].focus();
     fixture.detectChanges();
 
-    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fourth item to be focused').toBe(items[3]);
 
     dispatchKeyboardEvent(menuPanel, 'keydown', DOWN_ARROW);
     fixture.detectChanges();
     tick();
 
-    expect(document.activeElement).toBe(items[4], 'Expected fifth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fifth item to be focused').toBe(items[4]);
     flush();
   }));
 
@@ -1041,7 +1047,7 @@ describe('MDC-based MatMenu', () => {
     flush();
 
     expect(overlayContainerElement.querySelectorAll('.mat-mdc-menu-item').length)
-        .toBe(2, 'Expected two open menus');
+      .withContext('Expected two open menus').toBe(2);
   }));
 
   it('should focus the menu panel if all items are disabled', fakeAsync(() => {
@@ -1100,7 +1106,8 @@ describe('MDC-based MatMenu', () => {
     tick(500);
 
     const items = document.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
-    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fourth item to be focused').toBe(items[3]);
   }));
 
   it('should default to the "below" and "after" positions', fakeAsync(() => {
@@ -1126,9 +1133,11 @@ describe('MDC-based MatMenu', () => {
 
       const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
 
-      expect(panel).toBeTruthy('Expected panel to be defined');
-      expect(panel.textContent).toContain('Another item', 'Expected panel to have correct content');
-      expect(fixture.componentInstance.trigger.menuOpen).toBe(true, 'Expected menu to be open');
+      expect(panel).withContext('Expected panel to be defined').toBeTruthy();
+      expect(panel.textContent)
+        .withContext('Expected panel to have correct content').toContain('Another item');
+      expect(fixture.componentInstance.trigger.menuOpen)
+        .withContext('Expected menu to be open').toBe(true);
     }));
 
     it('should detach the lazy content when the menu is closed', fakeAsync(() => {
@@ -1155,23 +1164,27 @@ describe('MDC-based MatMenu', () => {
         fixture.detectChanges();
         const trigger = fixture.componentInstance.trigger;
 
-        expect(trigger.menuOpen).toBe(false, 'Expected menu to start off closed');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to start off closed').toBe(false);
 
         trigger.openMenu();
         fixture.detectChanges();
         tick(500);
 
-        expect(trigger.menuOpen).toBe(true, 'Expected menu to be open');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to be open').toBe(true);
 
         trigger.closeMenu();
         fixture.detectChanges();
 
         expect(trigger.menuOpen)
-            .toBe(true, 'Expected menu to be considered open while the close animation is running');
+          .withContext('Expected menu to be considered open while the close animation is running')
+          .toBe(true);
         tick(500);
         fixture.detectChanges();
 
-        expect(trigger.menuOpen).toBe(false, 'Expected menu to be closed');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to be closed').toBe(false);
       }));
 
     it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => {
@@ -1193,7 +1206,8 @@ describe('MDC-based MatMenu', () => {
 
       const item = document.querySelector('.mat-mdc-menu-panel [mat-menu-item]')!;
 
-      expect(document.activeElement).toBe(item, 'Expected first item to be focused');
+      expect(document.activeElement)
+        .withContext('Expected first item to be focused').toBe(item);
     }));
 
     it('should be able to open the same menu with a different context', fakeAsync(() => {
@@ -1287,7 +1301,8 @@ describe('MDC-based MatMenu', () => {
       let panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel') as HTMLElement;
 
       expect(Math.floor(panel.getBoundingClientRect().bottom))
-          .toBe(Math.floor(trigger.getBoundingClientRect().top), 'Expected menu to open above');
+        .withContext('Expected menu to open above')
+        .toBe(Math.floor(trigger.getBoundingClientRect().top));
 
       fixture.componentInstance.trigger.closeMenu();
       fixture.detectChanges();
@@ -1302,7 +1317,8 @@ describe('MDC-based MatMenu', () => {
       panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel') as HTMLElement;
 
       expect(Math.floor(panel.getBoundingClientRect().top))
-          .toBe(Math.floor(trigger.getBoundingClientRect().bottom), 'Expected menu to open below');
+        .withContext('Expected menu to open below')
+        .toBe(Math.floor(trigger.getBoundingClientRect().bottom));
     }));
 
     it('should not throw if a menu reposition is requested while the menu is closed',
@@ -1336,13 +1352,14 @@ describe('MDC-based MatMenu', () => {
         // To find the overlay left, subtract the menu width from the origin's right side.
         const expectedLeft = triggerRect.right - overlayRect.width;
         expect(Math.floor(overlayRect.left))
-            .toBe(Math.floor(expectedLeft),
-                `Expected menu to open in "before" position if "after" position wouldn't fit.`);
+          .withContext(`Expected menu to open in "before" position if "after" position ` +
+                       `wouldn't fit.`).toBe(Math.floor(expectedLeft));
 
+        // The y-position of the overlay should be unaffected, as it can already fit vertically
         // The y-position of the overlay should be unaffected, as it can already fit vertically
         expect(Math.floor(overlayRect.top))
-            .toBe(Math.floor(triggerRect.bottom),
-                `Expected menu top position to be unchanged if it can fit in the viewport.`);
+          .withContext(`Expected menu top position to be unchanged if it can fit in the viewport.`)
+          .toBe(Math.floor(triggerRect.bottom));
       }));
 
     it('should fall back to "above" mode if "below" mode would not fit on screen', fakeAsync(() => {
@@ -1363,13 +1380,14 @@ describe('MDC-based MatMenu', () => {
       const overlayRect = overlayPane.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(triggerRect.top),
-              `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "above" position if "below" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.top));
 
+      // The x-position of the overlay should be unaffected, as it can already fit horizontally
       // The x-position of the overlay should be unaffected, as it can already fit horizontally
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(triggerRect.left),
-              `Expected menu x position to be unchanged if it can fit in the viewport.`);
+        .withContext(`Expected menu x position to be unchanged if it can fit in the viewport.`)
+        .toBe(Math.floor(triggerRect.left));
     }));
 
     it('should re-position menu on both axes if both defaults would not fit', fakeAsync(() => {
@@ -1393,12 +1411,12 @@ describe('MDC-based MatMenu', () => {
       const expectedLeft = triggerRect.right - overlayRect.width;
 
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(expectedLeft),
-              `Expected menu to open in "before" position if "after" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "before" position if "after" position wouldn't fit.`)
+        .toBe(Math.floor(expectedLeft));
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(triggerRect.top),
-              `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "above" position if "below" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.top));
     }));
 
     it('should re-position a menu with custom position set', fakeAsync(() => {
@@ -1413,17 +1431,21 @@ describe('MDC-based MatMenu', () => {
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
+      // As designated "before" position won't fit on screen, the menu should fall back
+      // to "after" mode, where the left sides of the overlay and trigger are aligned.
       // As designated "before" position won't fit on screen, the menu should fall back
       // to "after" mode, where the left sides of the overlay and trigger are aligned.
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(triggerRect.left),
-              `Expected menu to open in "after" position if "before" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "after" position if "before" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.left));
 
+      // As designated "above" position won't fit on screen, the menu should fall back
+      // to "below" mode, where the top edges of the overlay and trigger are aligned.
       // As designated "above" position won't fit on screen, the menu should fall back
       // to "below" mode, where the top edges of the overlay and trigger are aligned.
       expect(Math.floor(overlayRect.top))
-          .toBe(Math.floor(triggerRect.bottom),
-              `Expected menu to open in "below" position if "above" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "below" position if "above" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.bottom));
     }));
 
     function getOverlayPane(): HTMLElement {
@@ -1486,10 +1508,11 @@ describe('MDC-based MatMenu', () => {
       it('positions the overlay below the trigger', fakeAsync(() => {
         subject.openMenu();
 
+        // Since the menu is overlaying the trigger, the overlay top should be the trigger top.
         // Since the menu is overlaying the trigger, the overlay top should be the trigger top.
         expect(Math.floor(subject.overlayRect.top))
-            .toBe(Math.floor(subject.triggerRect.top),
-                `Expected menu to open in default "below" position.`);
+          .withContext(`Expected menu to open in default "below" position.`)
+          .toBe(Math.floor(subject.triggerRect.top));
       }));
     });
 
@@ -1501,10 +1524,11 @@ describe('MDC-based MatMenu', () => {
       it('positions the overlay below the trigger', fakeAsync(() => {
         subject.openMenu();
 
+        // Since the menu is below the trigger, the overlay top should be the trigger bottom.
         // Since the menu is below the trigger, the overlay top should be the trigger bottom.
         expect(Math.floor(subject.overlayRect.top))
-            .toBe(Math.floor(subject.triggerRect.bottom),
-                `Expected menu to open directly below the trigger.`);
+          .withContext(`Expected menu to open directly below the trigger.`)
+          .toBe(Math.floor(subject.triggerRect.bottom));
       }));
 
       it('supports above position fall back', fakeAsync(() => {
@@ -1514,10 +1538,11 @@ describe('MDC-based MatMenu', () => {
         subject.trigger.style.bottom = '0';
         subject.openMenu();
 
+        // Since the menu is above the trigger, the overlay bottom should be the trigger top.
         // Since the menu is above the trigger, the overlay bottom should be the trigger top.
         expect(Math.floor(subject.overlayRect.bottom))
-            .toBe(Math.floor(subject.triggerRect.top),
-                `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+          .withContext(`Expected menu to open in "above" position if "below" position ` +
+                       `wouldn't fit.`).toBe(Math.floor(subject.triggerRect.top));
       }));
 
       it('repositions the origin to be below, so the menu opens from the trigger', fakeAsync(() => {
@@ -1722,7 +1747,7 @@ describe('MDC-based MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const items = Array.from(overlay.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]'));
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')!;
@@ -1733,16 +1758,17 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
 
       expect(levelOneTrigger.classList)
-          .toContain('mat-mdc-menu-item-highlighted', 'Expected the trigger to be highlighted');
+        .withContext('Expected the trigger to be highlighted')
+        .toContain('mat-mdc-menu-item-highlighted');
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
       expect(levelOneTrigger.classList)
           .not.toContain('mat-mdc-menu-item-highlighted',
               'Expected the trigger to not be highlighted');
@@ -1767,14 +1793,14 @@ describe('MDC-based MatMenu', () => {
         tick();
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(3, 'Expected three open menus');
+          .withContext('Expected three open menus').toBe(3);
 
         dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
         fixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
       }));
 
       it('should close submenu when hovering over disabled sibling item', fakeAsync(() => {
@@ -1790,7 +1816,7 @@ describe('MDC-based MatMenu', () => {
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
 
         items[1].componentInstance.disabled = true;
         fixture.detectChanges();
@@ -1801,7 +1827,7 @@ describe('MDC-based MatMenu', () => {
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
       }));
 
     it('should not open submenu when hovering over disabled trigger', fakeAsync(() => {
@@ -1811,7 +1837,7 @@ describe('MDC-based MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const item = fixture.debugElement.query(By.directive(MatMenuItem))!;
 
@@ -1824,7 +1850,7 @@ describe('MDC-based MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected to remain at one open menu');
+        .withContext('Expected to remain at one open menu').toBe(1);
     }));
 
 
@@ -1834,7 +1860,7 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1842,12 +1868,12 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       levelOneTrigger.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected repeat clicks not to close the menu.');
+        .withContext('Expected repeat clicks not to close the menu.').toBe(2);
     }));
 
     it('should open and close a nested menu with arrow keys in ltr', fakeAsync(() => {
@@ -1855,7 +1881,7 @@ describe('MDC-based MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1864,7 +1890,8 @@ describe('MDC-based MatMenu', () => {
 
       const panels = overlay.querySelectorAll('.mat-mdc-menu-panel');
 
-      expect(panels.length).toBe(2, 'Expected two open menus');
+      expect(panels.length)
+        .withContext('Expected two open menus').toBe(2);
       dispatchKeyboardEvent(panels[1], 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       tick(500);
@@ -1877,7 +1904,7 @@ describe('MDC-based MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1886,7 +1913,8 @@ describe('MDC-based MatMenu', () => {
 
       const panels = overlay.querySelectorAll('.mat-mdc-menu-panel');
 
-      expect(panels.length).toBe(2, 'Expected two open menus');
+      expect(panels.length)
+        .withContext('Expected two open menus').toBe(2);
       dispatchKeyboardEvent(panels[1], 'keydown', RIGHT_ARROW);
       fixture.detectChanges();
       tick(500);
@@ -1906,13 +1934,13 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one menu to remain open');
+        .withContext('Expected one menu to remain open').toBe(1);
 
       dispatchKeyboardEvent(menu, 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one menu to remain open');
+        .withContext('Expected one menu to remain open').toBe(1);
     }));
 
     it('should close all of the menus when the backdrop is clicked', fakeAsync(() => {
@@ -1930,18 +1958,19 @@ describe('MDC-based MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(3, 'Expected three open menus');
+        .withContext('Expected three open menus').toBe(3);
       expect(overlay.querySelectorAll('.cdk-overlay-backdrop').length)
-          .toBe(1, 'Expected one backdrop element');
+        .withContext('Expected one backdrop element').toBe(1);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel, .cdk-overlay-backdrop')[0].classList)
-          .toContain('cdk-overlay-backdrop', 'Expected backdrop to be beneath all of the menus');
+        .withContext('Expected backdrop to be beneath all of the menus')
+        .toContain('cdk-overlay-backdrop');
 
       (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should shift focus between the sub-menus', fakeAsync(() => {
@@ -1951,35 +1980,35 @@ describe('MDC-based MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelector('.mat-mdc-menu-panel')!.contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the root menu');
+        .withContext('Expected focus to be inside the root menu').toBe(true);
 
       instance.levelOneTrigger.openMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel')[1].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the first nested menu');
+        .withContext('Expected focus to be inside the first nested menu').toBe(true);
 
       instance.levelTwoTrigger.openMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel')[2].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the second nested menu');
+        .withContext('Expected focus to be inside the second nested menu').toBe(true);
 
       instance.levelTwoTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel')[1].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be back inside the first nested menu');
+        .withContext('Expected focus to be back inside the first nested menu').toBe(true);
 
       instance.levelOneTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelector('.mat-mdc-menu-panel')!.contains(document.activeElement))
-          .toBe(true, 'Expected focus to be back inside the root menu');
+        .withContext('Expected focus to be back inside the root menu').toBe(true);
     }));
 
     it('should restore focus to a nested trigger when navgating via the keyboard', fakeAsync(() => {
@@ -2093,14 +2122,15 @@ describe('MDC-based MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-mdc-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       (menus[2].querySelector('.mat-mdc-menu-item')! as HTMLElement).click();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should close all of the menus when the user tabs away', fakeAsync(() => {
@@ -2116,14 +2146,15 @@ describe('MDC-based MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-mdc-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       dispatchKeyboardEvent(menus[menus.length - 1], 'keydown', TAB);
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should set a class on the menu items that trigger a sub-menu', fakeAsync(() => {
@@ -2158,15 +2189,18 @@ describe('MDC-based MatMenu', () => {
 
       expect(menus[0].classList).toContain('mat-mdc-elevation-specific');
       expect(menus[0].classList)
-        .toContain('mat-mdc-elevation-z8', 'Expected root menu to have base elevation.');
+        .withContext('Expected root menu to have base elevation.')
+        .toContain('mat-mdc-elevation-z8');
 
       expect(menus[1].classList).toContain('mat-mdc-elevation-specific');
       expect(menus[1].classList)
-        .toContain('mat-mdc-elevation-z9', 'Expected first sub-menu to have base elevation + 1.');
+        .withContext('Expected first sub-menu to have base elevation + 1.')
+        .toContain('mat-mdc-elevation-z9');
 
       expect(menus[2].classList).toContain('mat-mdc-elevation-specific');
       expect(menus[2].classList)
-        .toContain('mat-mdc-elevation-z10', 'Expected second sub-menu to have base elevation + 2.');
+        .withContext('Expected second sub-menu to have base elevation + 2.')
+        .toContain('mat-mdc-elevation-z10');
     }));
 
     it('should update the elevation when the same menu is opened at a different depth',
@@ -2185,14 +2219,15 @@ describe('MDC-based MatMenu', () => {
 
         expect(lastMenu.classList).toContain('mat-mdc-elevation-specific');
         expect(lastMenu.classList)
-          .toContain('mat-mdc-elevation-z10', 'Expected menu to have the base elevation plus two.');
+          .withContext('Expected menu to have the base elevation plus two.')
+          .toContain('mat-mdc-elevation-z10');
 
         (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click();
         fixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(0, 'Expected no open menus');
+          .withContext('Expected no open menus').toBe(0);
 
         instance.alternateTrigger.openMenu();
         fixture.detectChanges();
@@ -2201,10 +2236,11 @@ describe('MDC-based MatMenu', () => {
         lastMenu = overlay.querySelector('.mat-mdc-menu-panel') as HTMLElement;
 
         expect(lastMenu.classList).toContain('mat-mdc-elevation-specific');
-        expect(lastMenu.classList).not.toContain('mat-mdc-elevation-z10',
-          'Expected menu not to maintain old elevation.');
-        expect(lastMenu.classList).toContain('mat-mdc-elevation-z8',
-          'Expected menu to have the proper updated elevation.');
+        expect(lastMenu.classList).not.withContext('Expected menu not to maintain old elevation.')
+          .toContain('mat-mdc-elevation-z10');
+        expect(lastMenu.classList)
+          .withContext('Expected menu to have the proper updated elevation.')
+          .toContain('mat-mdc-elevation-z8');
       }));
 
     it('should not change focus origin if origin not specified for trigger', fakeAsync(() => {
@@ -2243,7 +2279,7 @@ describe('MDC-based MatMenu', () => {
 
       expect(menuClasses).toContain('mat-mdc-elevation-specific');
       expect(menuClasses)
-          .toContain('mat-mdc-elevation-z24', 'Expected user elevation to be maintained');
+        .withContext('Expected user elevation to be maintained').toContain('mat-mdc-elevation-z24');
       expect(menuClasses)
           .not.toContain('mat-mdc-elevation-z8', 'Expected no stacked elevation.');
     }));
@@ -2261,14 +2297,15 @@ describe('MDC-based MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-mdc-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       instance.rootTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should toggle a nested menu when its trigger is added after init', fakeAsync(() => {
@@ -2277,7 +2314,7 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       instance.showLazy = true;
       fixture.detectChanges();
@@ -2290,9 +2327,10 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
 
       expect(lazyTrigger.classList)
-          .toContain('mat-mdc-menu-item-highlighted', 'Expected the trigger to be highlighted');
+        .withContext('Expected the trigger to be highlighted')
+        .toContain('mat-mdc-menu-item-highlighted');
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should prevent the default mousedown action if the menu item opens a sub-menu',
@@ -2323,13 +2361,13 @@ describe('MDC-based MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should be able to trigger the same nested menu from different triggers', fakeAsync(() => {
@@ -2341,7 +2379,7 @@ describe('MDC-based MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const triggers = overlay.querySelectorAll('.level-one-trigger');
 
@@ -2349,14 +2387,14 @@ describe('MDC-based MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(triggers[1], 'mouseenter');
       repeaterFixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should close the initial menu if the user moves away while animating', fakeAsync(() => {
@@ -2368,7 +2406,7 @@ describe('MDC-based MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const triggers = overlay.querySelectorAll('.level-one-trigger');
 
@@ -2380,7 +2418,7 @@ describe('MDC-based MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should be able to open a submenu through an item that is not a direct descendant ' +
@@ -2393,14 +2431,14 @@ describe('MDC-based MatMenu', () => {
         nestedFixture.detectChanges();
         tick(500);
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
 
         dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
       }));
 
     it('should not close when hovering over a menu item inside a sub-menu panel that is declared' +
@@ -2413,21 +2451,21 @@ describe('MDC-based MatMenu', () => {
         nestedFixture.detectChanges();
         tick(500);
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
 
         dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
 
         dispatchMouseEvent(overlay.querySelector('.level-two-item')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-            .toBe(2, 'Expected two open menus to remain');
+          .withContext('Expected two open menus to remain').toBe(2);
       }));
 
     it('should not re-focus a child menu trigger when hovering another trigger', fakeAsync(() => {
@@ -2444,7 +2482,7 @@ describe('MDC-based MatMenu', () => {
       fixture.detectChanges();
       tick();
       expect(overlay.querySelectorAll('.mat-mdc-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
       fixture.detectChanges();
diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts
index 8056bd572b4c..76027102b9ea 100644
--- a/src/material-experimental/mdc-paginator/paginator.spec.ts
+++ b/src/material-experimental/mdc-paginator/paginator.spec.ts
@@ -135,19 +135,23 @@ describe('MDC-based MatPaginator', () => {
   it('should be able to show the first/last buttons', () => {
     const fixture = createComponent(MatPaginatorApp);
     expect(getFirstButton(fixture))
-        .toBeNull('Expected first button to not exist.');
+      .withContext('Expected first button to not exist.')
+      .toBeNull();
 
     expect(getLastButton(fixture))
-        .toBeNull('Expected last button to not exist.');
+      .withContext('Expected last button to not exist.')
+      .toBeNull();
 
     fixture.componentInstance.showFirstLastButtons = true;
     fixture.detectChanges();
 
     expect(getFirstButton(fixture))
-        .toBeTruthy('Expected first button to be rendered.');
+      .withContext('Expected first button to be rendered.')
+      .toBeTruthy();
 
     expect(getLastButton(fixture))
-        .toBeTruthy('Expected last button to be rendered.');
+      .withContext('Expected last button to be rendered.')
+      .toBeTruthy();
   });
 
   it('should mark itself as initialized', fakeAsync(() => {
@@ -419,13 +423,15 @@ describe('MDC-based MatPaginator', () => {
     const element = fixture.nativeElement;
 
     expect(element.querySelector('.mat-mdc-paginator-page-size'))
-        .toBeTruthy('Expected select to be rendered.');
+      .withContext('Expected select to be rendered.')
+      .toBeTruthy();
 
     fixture.componentInstance.hidePageSize = true;
     fixture.detectChanges();
 
     expect(element.querySelector('.mat-mdc-paginator-page-size'))
-        .toBeNull('Expected select to be removed.');
+      .withContext('Expected select to be removed.')
+      .toBeNull();
   });
 
   it('should be able to disable all the controls in the paginator via the binding', () => {
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts b/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts
index cb6051511085..a838f76c08c4 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.spec.ts
@@ -122,13 +122,13 @@ describe('MDC-based MatProgressBar', () => {
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.getAttribute('aria-valuenow'))
-            .toBe('50', 'Expected aria-valuenow to be set in determinate mode.');
+          .withContext('Expected aria-valuenow to be set in determinate mode.').toBe('50');
 
         progressComponent.mode = 'indeterminate';
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.hasAttribute('aria-valuenow'))
-            .toBe(false, 'Expect aria-valuenow to be cleared in indeterminate mode.');
+          .withContext('Expect aria-valuenow to be cleared in indeterminate mode.').toBe(false);
       });
 
       it('should remove the `aria-valuenow` attribute in query mode', () => {
@@ -143,13 +143,13 @@ describe('MDC-based MatProgressBar', () => {
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.getAttribute('aria-valuenow'))
-            .toBe('50', 'Expected aria-valuenow to be set in determinate mode.');
+          .withContext('Expected aria-valuenow to be set in determinate mode.').toBe('50');
 
         progressComponent.mode = 'query';
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.hasAttribute('aria-valuenow'))
-            .toBe(false, 'Expect aria-valuenow to be cleared in query mode.');
+          .withContext('Expect aria-valuenow to be cleared in query mode.').toBe(false);
       });
 
     });
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
index 9dd797a64509..b502097f7533 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -126,15 +126,20 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.detectChanges();
 
     expect(parseInt(spinner.style.width))
-      .toBe(32, 'Expected the custom diameter to be applied to the host element width.');
+      .withContext('Expected the custom diameter to be applied to the host element width.')
+      .toBe(32);
     expect(parseInt(spinner.style.height))
-      .toBe(32, 'Expected the custom diameter to be applied to the host element height.');
+      .withContext('Expected the custom diameter to be applied to the host element height.')
+      .toBe(32);
     expect(parseInt(svgElement.clientWidth))
-      .toBe(32, 'Expected the custom diameter to be applied to the svg element width.');
+      .withContext('Expected the custom diameter to be applied to the svg element width.')
+      .toBe(32);
     expect(parseInt(svgElement.clientHeight))
-      .toBe(32, 'Expected the custom diameter to be applied to the svg element height.');
+      .withContext('Expected the custom diameter to be applied to the svg element height.')
+      .toBe(32);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 25.2 25.2', 'Expected the custom diameter to be applied to the svg viewBox.');
+      .withContext('Expected the custom diameter to be applied to the svg viewBox.')
+      .toBe('0 0 25.2 25.2');
   });
 
   it('should allow a custom stroke width', () => {
@@ -146,10 +151,12 @@ describe('MDC-based MatProgressSpinner', () => {
     const circleElement = fixture.nativeElement.querySelector('circle');
     const svgElement = fixture.nativeElement.querySelector('svg');
 
-    expect(parseInt(circleElement.style.strokeWidth)).toBe(40, 'Expected the custom stroke ' +
-      'width to be applied to the circle element as a percentage of the element size.');
+    expect(parseInt(circleElement.style.strokeWidth))
+      .withContext('Expected the custom stroke ' +
+    'width to be applied to the circle element as a percentage of the element size.').toBe(40);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.');
+      .withContext('Expected the viewBox to be adjusted based on the stroke width.')
+      .toBe('0 0 130 130');
   });
 
   it('should allow floating point values for custom diameter', () => {
@@ -162,15 +169,20 @@ describe('MDC-based MatProgressSpinner', () => {
     const svgElement: HTMLElement = fixture.nativeElement.querySelector('svg');
 
     expect(parseFloat(spinner.style.width))
-      .toBe(32.5, 'Expected the custom diameter to be applied to the host element width.');
+      .withContext('Expected the custom diameter to be applied to the host element width.')
+      .toBe(32.5);
     expect(parseFloat(spinner.style.height))
-      .toBe(32.5, 'Expected the custom diameter to be applied to the host element height.');
+      .withContext('Expected the custom diameter to be applied to the host element height.')
+      .toBe(32.5);
     expect(Math.ceil(svgElement.clientWidth))
-      .toBe(33, 'Expected the custom diameter to be applied to the svg element width.');
+      .withContext('Expected the custom diameter to be applied to the svg element width.')
+      .toBe(33);
     expect(Math.ceil(svgElement.clientHeight))
-      .toBe(33, 'Expected the custom diameter to be applied to the svg element height.');
+      .withContext('Expected the custom diameter to be applied to the svg element height.')
+      .toBe(33);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 25.75 25.75', 'Expected the custom diameter to be applied to the svg viewBox.');
+      .withContext('Expected the custom diameter to be applied to the svg viewBox.')
+      .toBe('0 0 25.75 25.75');
   });
 
   it('should allow floating point values for custom stroke width', () => {
@@ -182,10 +194,12 @@ describe('MDC-based MatProgressSpinner', () => {
     const circleElement = fixture.nativeElement.querySelector('circle');
     const svgElement = fixture.nativeElement.querySelector('svg');
 
-    expect(parseFloat(circleElement.style.strokeWidth)).toBe(40.5, 'Expected the custom stroke ' +
-      'width to be applied to the circle element as a percentage of the element size.');
+    expect(parseFloat(circleElement.style.strokeWidth))
+      .withContext('Expected the custom stroke ' +
+    'width to be applied to the circle element as a percentage of the element size.').toBe(40.5);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 130.5 130.5', 'Expected the viewBox to be adjusted based on the stroke width.');
+      .withContext('Expected the viewBox to be adjusted based on the stroke width.')
+      .toBe('0 0 130.5 130.5');
   });
 
   it('should expand the host element if the stroke width is greater than the default', () => {
diff --git a/src/material-experimental/mdc-radio/radio.spec.ts b/src/material-experimental/mdc-radio/radio.spec.ts
index db63b41fdb22..b9806b56fc19 100644
--- a/src/material-experimental/mdc-radio/radio.spec.ts
+++ b/src/material-experimental/mdc-radio/radio.spec.ts
@@ -246,7 +246,8 @@ describe('MDC-based MatRadio', () => {
       let rippleAmount = radioNativeElements[0]
           .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
 
-      expect(rippleAmount).toBe(0, 'Expected a disabled radio button to not show ripples');
+      expect(rippleAmount)
+        .withContext('Expected a disabled radio button to not show ripples').toBe(0);
 
       testComponent.isFirstDisabled = false;
       fixture.detectChanges();
@@ -258,7 +259,7 @@ describe('MDC-based MatRadio', () => {
           .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
 
       expect(rippleAmount)
-          .toBe(1, 'Expected an enabled radio button to show ripples');
+        .withContext('Expected an enabled radio button to show ripples').toBe(1);
     });
 
     it('should not show ripples if matRippleDisabled input is set', () => {
@@ -336,44 +337,53 @@ describe('MDC-based MatRadio', () => {
 
       expect(changeSpy).not.toHaveBeenCalled();
       expect(groupInstance.value).toBe('apple');
-      expect(groupInstance.selected).toBeFalsy('expect group selected to be null');
-      expect(radioInstances[0].checked).toBeFalsy('should not select the first button');
-      expect(radioInstances[1].checked).toBeFalsy('should not select the second button');
-      expect(radioInstances[2].checked).toBeFalsy('should not select the third button');
+      expect(groupInstance.selected)
+        .withContext('expect group selected to be null').toBeFalsy();
+      expect(radioInstances[0].checked)
+        .withContext('should not select the first button').toBeFalsy();
+      expect(radioInstances[1].checked)
+        .withContext('should not select the second button').toBeFalsy();
+      expect(radioInstances[2].checked)
+        .withContext('should not select the third button').toBeFalsy();
 
       radioInstances[0].value = 'apple';
 
       fixture.detectChanges();
 
-      expect(groupInstance.selected).toBe(
-          radioInstances[0], 'expect group selected to be first button');
-      expect(radioInstances[0].checked).toBeTruthy('expect group select the first button');
-      expect(radioInstances[1].checked).toBeFalsy('should not select the second button');
-      expect(radioInstances[2].checked).toBeFalsy('should not select the third button');
+      expect(groupInstance.selected)
+        .withContext('expect group selected to be first button').toBe(radioInstances[0]);
+      expect(radioInstances[0].checked)
+        .withContext('expect group select the first button').toBeTruthy();
+      expect(radioInstances[1].checked)
+        .withContext('should not select the second button').toBeFalsy();
+      expect(radioInstances[2].checked)
+        .withContext('should not select the third button').toBeFalsy();
     });
 
     it('should apply class based on color attribute', () => {
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-accent')))
-          .toBe(true, 'Expected every radio element to use the accent color by default.');
+        .withContext('Expected every radio element to use the accent color by default.').toBe(true);
 
       testComponent.color = 'primary';
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-primary')))
-          .toBe(true, 'Expected every radio element to use the primary color from the binding.');
+        .withContext('Expected every radio element to use the primary color from the binding.')
+        .toBe(true);
 
       testComponent.color = 'warn';
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-warn')))
-          .toBe(true, 'Expected every radio element to use the primary color from the binding.');
+        .withContext('Expected every radio element to use the primary color from the binding.')
+        .toBe(true);
 
       testComponent.color = null;
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-accent')))
-          .toBe(true,
-              'Expected every radio element to fallback to accent color if value is falsy.');
+        .withContext('Expected every radio element to fallback to accent color if value is falsy.')
+        .toBe(true);
     });
 
     it('should be able to inherit the color from the radio group', () => {
@@ -381,7 +391,7 @@ describe('MDC-based MatRadio', () => {
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-warn')))
-          .toBe(true, 'Expected every radio element to have the warn color.');
+        .withContext('Expected every radio element to have the warn color.').toBe(true);
     });
 
     it('should have the individual button color take precedence over the group color', () => {
@@ -450,14 +460,14 @@ describe('MDC-based MatRadio', () => {
       const nodes: HTMLInputElement[] = innerRadios.map(radio => radio.nativeElement);
 
       expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all radios to have the initial name.');
+        .withContext('Expected all radios to have the initial name.').toBe(true);
 
       fixture.componentInstance.groupName = 'changed-name';
       fixture.detectChanges();
 
       expect(groupInstance.name).toBe('changed-name');
       expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all radios to have the new name.');
+        .withContext('Expected all radios to have the new name.').toBe(true);
     });
 
     it('should check the corresponding radio button on group value change', () => {
@@ -780,13 +790,13 @@ describe('MDC-based MatRadio', () => {
           .query(By.css('.mat-mdc-radio-button input'))!.nativeElement as HTMLInputElement;
 
       expect(radioButtonInput.tabIndex)
-          .toBe(0, 'Expected the tabindex to be set to "0" by default.');
+        .withContext('Expected the tabindex to be set to "0" by default.').toBe(0);
 
       fixture.componentInstance.tabIndex = 4;
       fixture.detectChanges();
 
       expect(radioButtonInput.tabIndex)
-          .toBe(4, 'Expected the tabindex to be set to "4".');
+        .withContext('Expected the tabindex to be set to "4".').toBe(4);
     });
 
     it('should remove the tabindex from the host element', () => {
diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts
index 56531b793202..9d4647314e32 100644
--- a/src/material-experimental/mdc-select/select.spec.ts
+++ b/src/material-experimental/mdc-select/select.spec.ts
@@ -236,13 +236,15 @@ describe('MDC-based MatSelect', () => {
 
         it('should set aria-required for required selects', fakeAsync(() => {
           expect(select.getAttribute('aria-required'))
-              .toEqual('false', `Expected aria-required attr to be false for normal selects.`);
+            .withContext(`Expected aria-required attr to be false for normal selects.`)
+            .toEqual('false');
 
           fixture.componentInstance.isRequired = true;
           fixture.detectChanges();
 
           expect(select.getAttribute('aria-required'))
-              .toEqual('true', `Expected aria-required attr to be true for required selects.`);
+            .withContext(`Expected aria-required attr to be true for required selects.`)
+            .toEqual('true');
         }));
 
         it('should set the mat-select-required class for required selects', fakeAsync(() => {
@@ -252,20 +254,23 @@ describe('MDC-based MatSelect', () => {
           fixture.componentInstance.isRequired = true;
           fixture.detectChanges();
 
-          expect(select.classList).toContain(
-              'mat-mdc-select-required', `Expected the mat-mdc-select-required class to be set.`);
+          expect(select.classList)
+            .withContext(`Expected the mat-mdc-select-required class to be set.`)
+            .toContain('mat-mdc-select-required');
         }));
 
         it('should set aria-invalid for selects that are invalid and touched', fakeAsync(() => {
           expect(select.getAttribute('aria-invalid'))
-              .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
+            .withContext(`Expected aria-invalid attr to be false for valid selects.`)
+            .toEqual('false');
 
           fixture.componentInstance.isRequired = true;
           fixture.componentInstance.control.markAsTouched();
           fixture.detectChanges();
 
           expect(select.getAttribute('aria-invalid'))
-              .toEqual('true', `Expected aria-invalid attr to be true for invalid selects.`);
+            .withContext(`Expected aria-invalid attr to be true for invalid selects.`)
+            .toEqual('true');
         }));
 
         it('should set aria-disabled for disabled selects', fakeAsync(() => {
@@ -302,27 +307,34 @@ describe('MDC-based MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-          expect(formControl.value).toBe(options[0].value,
-              'Expected value from first option to have been set on the model.');
+          expect(options[0].selected)
+            .withContext('Expected first option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from first option to have been set on the model.')
+            .toBe(options[0].value);
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
           // Note that the third option is skipped, because it is disabled.
-          expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
-          expect(formControl.value).toBe(options[3].value,
-              'Expected value from fourth option to have been set on the model.');
+          // Note that the third option is skipped, because it is disabled.
+          expect(options[3].selected)
+            .withContext('Expected fourth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from fourth option to have been set on the model.')
+            .toBe(options[3].value);
 
           dispatchKeyboardEvent(select, 'keydown', UP_ARROW);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-              'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
 
           flush();
         }));
@@ -332,27 +344,33 @@ describe('MDC-based MatSelect', () => {
             const formControl = fixture.componentInstance.control;
             const options = fixture.componentInstance.options.toArray();
 
-            expect(formControl.value).toBeFalsy('Expected no initial value.');
+            expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
             flush();
 
-            expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-            expect(formControl.value).toBe(options[0].value,
-                'Expected value from first option to have been set on the model.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model.')
+              .toBe(options[0].value);
 
             formControl.reset();
             fixture.detectChanges();
 
-            expect(options[0].selected).toBe(false, 'Expected first option to be deselected.');
-            expect(formControl.value).toBeFalsy('Expected value to be reset.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be deselected.').toBe(false);
+            expect(formControl.value)
+              .withContext('Expected value to be reset.').toBeFalsy();
 
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
             flush();
 
-            expect(options[0].selected).toBe(true, 'Expected first option to be selected again.');
-            expect(formControl.value).toBe(options[0].value,
-                'Expected value from first option to have been set on the model again.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be selected again.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model again.')
+              .toBe(options[0].value);
         }));
 
         it('should select first/last options via the HOME/END keys on a closed select',
@@ -361,21 +379,25 @@ describe('MDC-based MatSelect', () => {
             const firstOption = fixture.componentInstance.options.first;
             const lastOption = fixture.componentInstance.options.last;
 
-            expect(formControl.value).toBeFalsy('Expected no initial value.');
+            expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
             const endEvent = dispatchKeyboardEvent(select, 'keydown', END);
 
             expect(endEvent.defaultPrevented).toBe(true);
-            expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
-            expect(formControl.value).toBe(lastOption.value,
-                'Expected value from last option to have been set on the model.');
+            expect(lastOption.selected)
+              .withContext('Expected last option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from last option to have been set on the model.')
+              .toBe(lastOption.value);
 
             const homeEvent = dispatchKeyboardEvent(select, 'keydown', HOME);
 
             expect(homeEvent.defaultPrevented).toBe(true);
-            expect(firstOption.selected).toBe(true, 'Expected first option to be selected.');
-            expect(formControl.value).toBe(firstOption.value,
-                'Expected value from first option to have been set on the model.');
+            expect(firstOption.selected)
+              .withContext('Expected first option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model.')
+              .toBe(firstOption.value);
 
             flush();
           }));
@@ -384,7 +406,7 @@ describe('MDC-based MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
@@ -407,27 +429,34 @@ describe('MDC-based MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
-          expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-          expect(formControl.value).toBe(options[0].value,
-              'Expected value from first option to have been set on the model.');
+          expect(options[0].selected)
+            .withContext('Expected first option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from first option to have been set on the model.')
+            .toBe(options[0].value);
 
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
           // Note that the third option is skipped, because it is disabled.
-          expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
-          expect(formControl.value).toBe(options[3].value,
-              'Expected value from fourth option to have been set on the model.');
+          // Note that the third option is skipped, because it is disabled.
+          expect(options[3].selected)
+            .withContext('Expected fourth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from fourth option to have been set on the model.')
+            .toBe(options[3].value);
 
           dispatchKeyboardEvent(select, 'keydown', LEFT_ARROW);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-              'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
           flush();
         }));
 
@@ -460,29 +489,35 @@ describe('MDC-based MatSelect', () => {
         it('should open a single-selection select using ALT + DOWN_ARROW', fakeAsync(() => {
           const {control: formControl, select: selectInstance} = fixture.componentInstance;
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           const event = createKeyboardEvent('keydown', DOWN_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
-          expect(formControl.value).toBeFalsy('Expected value not to have changed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value not to have changed.').toBeFalsy();
         }));
 
         it('should open a single-selection select using ALT + UP_ARROW', fakeAsync(() => {
           const {control: formControl, select: selectInstance} = fixture.componentInstance;
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           const event = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
-          expect(formControl.value).toBeFalsy('Expected value not to have changed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value not to have changed.').toBeFalsy();
         }));
 
         it('should close when pressing ALT + DOWN_ARROW', fakeAsync(() => {
@@ -491,14 +526,17 @@ describe('MDC-based MatSelect', () => {
           selectInstance.open();
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
 
           const event = createKeyboardEvent('keydown', DOWN_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(event.defaultPrevented)
+            .withContext('Expected default action to be prevented.').toBe(true);
         }));
 
         it('should close when pressing ALT + UP_ARROW', fakeAsync(() => {
@@ -507,35 +545,42 @@ describe('MDC-based MatSelect', () => {
           selectInstance.open();
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
 
           const event = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(event.defaultPrevented)
+            .withContext('Expected default action to be prevented.').toBe(true);
         }));
 
         it('should be able to select options by typing on a closed select', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-            'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 69, 'e'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(options[5].selected).toBe(true, 'Expected sixth option to be selected.');
-          expect(formControl.value).toBe(options[5].value,
-            'Expected value from sixth option to have been set on the model.');
+          expect(options[5].selected)
+            .withContext('Expected sixth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from sixth option to have been set on the model.')
+            .toBe(options[5].value);
         }));
 
         it('should not open the select when pressing space while typing', fakeAsync(() => {
@@ -544,7 +589,8 @@ describe('MDC-based MatSelect', () => {
           fixture.componentInstance.typeaheadDebounceInterval = DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL;
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed on init.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed on init.').toBe(false);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
@@ -553,14 +599,14 @@ describe('MDC-based MatSelect', () => {
           dispatchKeyboardEvent(select, 'keydown', SPACE);
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false,
-              'Expected select to remain closed after space was pressed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to remain closed after space was pressed.').toBe(false);
 
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false,
-              'Expected select to be closed when the timer runs out.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed when the timer runs out.').toBe(false);
         }));
 
         it('should be able to customize the typeahead debounce interval', fakeAsync(() => {
@@ -570,19 +616,22 @@ describe('MDC-based MatSelect', () => {
           fixture.componentInstance.typeaheadDebounceInterval = 1337;
           fixture.detectChanges();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(formControl.value).toBeFalsy('Expected no value after a bit of time has passed.');
+          expect(formControl.value)
+            .withContext('Expected no value after a bit of time has passed.').toBeFalsy();
 
           tick(1337);
 
           expect(options[1].selected)
-            .toBe(true, 'Expected second option to be selected after all the time has passed.');
-          expect(formControl.value).toBe(options[1].value,
-            'Expected value from second option to have been set on the model.');
+            .withContext('Expected second option to be selected after all the time has passed.')
+            .toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
         }));
 
         it('should open the panel when pressing a vertical arrow key on a closed multiple select',
@@ -597,13 +646,17 @@ describe('MDC-based MatSelect', () => {
 
             const initialValue = instance.control.value;
 
-            expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be closed.').toBe(false);
 
             const event = dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-            expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
-            expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-            expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be open.').toBe(true);
+            expect(instance.control.value)
+              .withContext('Expected value to stay the same.').toBe(initialValue);
+            expect(event.defaultPrevented)
+              .withContext('Expected default to be prevented.').toBe(true);
           }));
 
         it('should open the panel when pressing a horizontal arrow key on closed multiple select',
@@ -618,13 +671,17 @@ describe('MDC-based MatSelect', () => {
 
             const initialValue = instance.control.value;
 
-            expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be closed.').toBe(false);
 
             const event = dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
-            expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
-            expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-            expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be open.').toBe(true);
+            expect(instance.control.value)
+              .withContext('Expected value to stay the same.').toBe(initialValue);
+            expect(event.defaultPrevented)
+              .withContext('Expected default to be prevented.').toBe(true);
           }));
 
         it('should do nothing when typing on a closed multi-select', fakeAsync(() => {
@@ -638,24 +695,31 @@ describe('MDC-based MatSelect', () => {
 
           const initialValue = instance.control.value;
 
-          expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+          expect(instance.select.panelOpen)
+            .withContext('Expected panel to be closed.').toBe(false);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
 
-          expect(instance.select.panelOpen).toBe(false, 'Expected panel to stay closed.');
-          expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
+          expect(instance.select.panelOpen)
+            .withContext('Expected panel to stay closed.').toBe(false);
+          expect(instance.control.value)
+            .withContext('Expected value to stay the same.').toBe(initialValue);
         }));
 
         it('should do nothing if the key manager did not change the active item', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
 
-          expect(formControl.value).toBeNull('Expected form control value to be empty.');
-          expect(formControl.pristine).toBe(true, 'Expected form control to be clean.');
+          expect(formControl.value)
+            .withContext('Expected form control value to be empty.').toBeNull();
+          expect(formControl.pristine)
+            .withContext('Expected form control to be clean.').toBe(true);
 
           dispatchKeyboardEvent(select, 'keydown', 16); // Press a random key.
 
-          expect(formControl.value).toBeNull('Expected form control value to stay empty.');
-          expect(formControl.pristine).toBe(true, 'Expected form control to stay clean.');
+          expect(formControl.value)
+            .withContext('Expected form control value to stay empty.').toBeNull();
+          expect(formControl.pristine)
+            .withContext('Expected form control to stay clean.').toBe(true);
         }));
 
         it('should continue from the selected option when the value is set programmatically',
@@ -687,13 +751,14 @@ describe('MDC-based MatSelect', () => {
               overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
           options[3].focus();
-          expect(document.activeElement).toBe(options[3], 'Expected fourth option to be focused.');
+          expect(document.activeElement)
+            .withContext('Expected fourth option to be focused.').toBe(options[3]);
 
           multiFixture.componentInstance.control.setValue(['steak-0', 'sushi-7']);
           multiFixture.detectChanges();
 
           expect(document.activeElement)
-              .toBe(options[3], 'Expected fourth option to remain focused.');
+            .withContext('Expected fourth option to remain focused.').toBe(options[3]);
         }));
 
         it('should not cycle through the options if the control is disabled', fakeAsync(() => {
@@ -704,7 +769,8 @@ describe('MDC-based MatSelect', () => {
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(formControl.value).toBe('eggs-5', 'Expected value to remain unchaged.');
+          expect(formControl.value)
+            .withContext('Expected value to remain unchaged.').toBe('eggs-5');
         }));
 
         it('should not wrap selection after reaching the end of the options', fakeAsync(() => {
@@ -714,11 +780,13 @@ describe('MDC-based MatSelect', () => {
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
           });
 
-          expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
+          expect(lastOption.selected)
+            .withContext('Expected last option to be selected.').toBe(true);
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(lastOption.selected).toBe(true, 'Expected last option to stay selected.');
+          expect(lastOption.selected)
+            .withContext('Expected last option to stay selected.').toBe(true);
 
           flush();
         }));
@@ -732,12 +800,12 @@ describe('MDC-based MatSelect', () => {
           select = multiFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
 
           expect(multiFixture.componentInstance.select.panelOpen)
-              .toBe(false, 'Expected panel to be closed initially.');
+            .withContext('Expected panel to be closed initially.').toBe(false);
 
           dispatchKeyboardEvent(select, 'keydown', TAB);
 
           expect(multiFixture.componentInstance.select.panelOpen)
-              .toBe(false, 'Expected panel to stay closed.');
+            .withContext('Expected panel to stay closed.').toBe(false);
         }));
 
         it('should toggle the next option when pressing shift + DOWN_ARROW on a multi-select',
@@ -837,7 +905,8 @@ describe('MDC-based MatSelect', () => {
 
           fixture.componentInstance.select.focus();
 
-          expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
+          expect(document.activeElement)
+            .withContext('Expected select element to be focused.').toBe(select);
         }));
 
         it('should set `aria-multiselectable` to true on the listbox inside multi select',
@@ -871,7 +940,7 @@ describe('MDC-based MatSelect', () => {
           const host = fixture.debugElement.query(By.css('mat-select'))!.nativeElement;
 
           expect(host.hasAttribute('aria-activedescendant'))
-              .toBe(false, 'Expected no aria-activedescendant on init.');
+            .withContext('Expected no aria-activedescendant on init.').toBe(false);
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
@@ -880,14 +949,15 @@ describe('MDC-based MatSelect', () => {
           const options = overlayContainerElement.querySelectorAll('mat-option');
 
           expect(host.getAttribute('aria-activedescendant'))
-              .toBe(options[4].id, 'Expected aria-activedescendant to match the active option.');
+            .withContext('Expected aria-activedescendant to match the active option.')
+            .toBe(options[4].id);
 
           fixture.componentInstance.select.close();
           fixture.detectChanges();
           flush();
 
           expect(host.hasAttribute('aria-activedescendant'))
-              .toBe(false, 'Expected no aria-activedescendant when closed.');
+            .withContext('Expected no aria-activedescendant when closed.').toBe(false);
         }));
 
         it('should set aria-activedescendant based on the focused option', fakeAsync(() => {
@@ -954,7 +1024,8 @@ describe('MDC-based MatSelect', () => {
             option.click();
             multiFixture.detectChanges();
 
-            expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+            expect(document.activeElement)
+              .withContext('Expected trigger to be focused.').toBe(select);
           }));
 
         it('should set a role of listbox on the select panel', fakeAsync(() => {
@@ -1034,8 +1105,9 @@ describe('MDC-based MatSelect', () => {
         }));
 
         it('should set aria-selected on each option for single select',  fakeAsync(() => {
-          expect(options.every(option => !option.hasAttribute('aria-selected'))).toBe(true,
-            'Expected all unselected single-select options not to have aria-selected set.');
+          expect(options.every(option => !option.hasAttribute('aria-selected')))
+            .withContext('Expected all unselected single-select options not to have ' +
+                         'aria-selected set.').toBe(true);
 
           options[1].click();
           fixture.detectChanges();
@@ -1044,11 +1116,13 @@ describe('MDC-based MatSelect', () => {
           fixture.detectChanges();
           flush();
 
-          expect(options[1].getAttribute('aria-selected')).toEqual('true',
-            'Expected selected single-select option to have aria-selected="true".');
+          expect(options[1].getAttribute('aria-selected'))
+            .withContext('Expected selected single-select option to have ' +
+                         'aria-selected="true".').toEqual('true');
           options.splice(1, 1);
-          expect(options.every(option => !option.hasAttribute('aria-selected'))).toBe(true,
-            'Expected all unselected single-select options not to have aria-selected set.');
+          expect(options.every(option => !option.hasAttribute('aria-selected')))
+            .withContext('Expected all unselected single-select options not to have ' +
+                         'aria-selected set.').toBe(true);
         }));
 
         it('should set aria-selected on each option for multi-select', fakeAsync(() => {
@@ -1065,8 +1139,9 @@ describe('MDC-based MatSelect', () => {
           options = Array.from(overlayContainerElement.querySelectorAll('mat-option'));
 
           expect(options.every(option => option.hasAttribute('aria-selected') &&
-            option.getAttribute('aria-selected') === 'false')).toBe(true,
-            'Expected all unselected multi-select options to have aria-selected="false".');
+          option.getAttribute('aria-selected') === 'false'))
+            .withContext('Expected all unselected multi-select options to have ' +
+                         'aria-selected="false".').toBe(true);
 
           options[1].click();
           multiFixture.detectChanges();
@@ -1075,12 +1150,14 @@ describe('MDC-based MatSelect', () => {
           multiFixture.detectChanges();
           flush();
 
-          expect(options[1].getAttribute('aria-selected')).toEqual('true',
-            'Expected selected multi-select option to have aria-selected="true".');
+          expect(options[1].getAttribute('aria-selected'))
+            .withContext('Expected selected multi-select option to have aria-selected="true".')
+            .toEqual('true');
           options.splice(1, 1);
           expect(options.every(option => option.hasAttribute('aria-selected') &&
-            option.getAttribute('aria-selected') === 'false')).toBe(true,
-            'Expected all unselected multi-select options to have aria-selected="false".');
+          option.getAttribute('aria-selected') === 'false'))
+            .withContext('Expected all unselected multi-select options to have ' +
+                         'aria-selected="false".').toBe(true);
           }));
 
         it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
@@ -1107,8 +1184,8 @@ describe('MDC-based MatSelect', () => {
             let activeOptions = options.filter(option => {
               return option.classList.contains('mat-mdc-option-active');
             });
-            expect(activeOptions).toEqual([options[0]],
-                'Expected first option to have active styles.');
+            expect(activeOptions)
+              .withContext('Expected first option to have active styles.').toEqual([options[0]]);
 
             options[1].click();
             fixture.detectChanges();
@@ -1119,8 +1196,9 @@ describe('MDC-based MatSelect', () => {
             activeOptions = options.filter(option => {
               return option.classList.contains('mat-mdc-option-active');
             });
-            expect(activeOptions).toEqual([options[1]],
-              'Expected only selected option to be marked as active after it is clicked.');
+            expect(activeOptions)
+              .withContext('Expected only selected option to be marked as active after it is ' +
+                           'clicked.').toEqual([options[1]]);
 
             fixture.componentInstance.control.setValue(fixture.componentInstance.foods[7].value);
             fixture.detectChanges();
@@ -1134,8 +1212,9 @@ describe('MDC-based MatSelect', () => {
             activeOptions = options.filter(option => {
               return option.classList.contains('mat-mdc-option-active');
             });
-            expect(activeOptions).toEqual([options[7]],
-              'Expected only selected option to be marked as active after the value has changed.');
+            expect(activeOptions)
+              .withContext('Expected only selected option to be marked as active after the ' +
+                           'value has changed.').toEqual([options[7]]);
           }));
       });
 
@@ -1162,9 +1241,11 @@ describe('MDC-based MatSelect', () => {
           let group = groups[0];
           let label = group.querySelector('.mat-mdc-optgroup-label') as HTMLElement;
 
-          expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
+          expect(label.getAttribute('id'))
+            .withContext('Expected label to have an id.').toBeTruthy();
           expect(group.getAttribute('aria-labelledby'))
-              .toBe(label.getAttribute('id'), 'Expected `aria-labelledby` to match the label id.');
+            .withContext('Expected `aria-labelledby` to match the label id.')
+            .toBe(label.getAttribute('id'));
         }));
 
         it('should set the `aria-disabled` attribute if the group is disabled', fakeAsync(() => {
@@ -1366,13 +1447,15 @@ describe('MDC-based MatSelect', () => {
         const options = fixture.componentInstance.options.toArray();
 
         expect(options.every(option => option.disableRipple === false))
-            .toBeTruthy('Expected all options to have disableRipple set to false initially.');
+          .withContext('Expected all options to have disableRipple set to false initially.')
+          .toBeTruthy();
 
         fixture.componentInstance.disableRipple = true;
         fixture.detectChanges();
 
         expect(options.every(option => option.disableRipple === true))
-            .toBeTruthy('Expected all options to have disableRipple set to true.');
+          .withContext('Expected all options to have disableRipple set to true.')
+          .toBeTruthy();
       }));
 
       it('should not show ripples if they were disabled', fakeAsync(() => {
@@ -1401,7 +1484,7 @@ describe('MDC-based MatSelect', () => {
         groupFixture.detectChanges();
 
         expect(document.querySelectorAll('.cdk-overlay-container mat-option').length)
-            .toBeGreaterThan(0, 'Expected at least one option to be rendered.');
+          .withContext('Expected at least one option to be rendered.').toBeGreaterThan(0);
       }));
 
       it('should not consider itself as blurred if the trigger loses focus while the ' +
@@ -1412,7 +1495,8 @@ describe('MDC-based MatSelect', () => {
           dispatchFakeEvent(selectElement, 'focus');
           fixture.detectChanges();
 
-          expect(selectInstance.focused).toBe(true, 'Expected select to be focused.');
+          expect(selectInstance.focused)
+            .withContext('Expected select to be focused.').toBe(true);
 
           selectInstance.open();
           fixture.detectChanges();
@@ -1420,7 +1504,8 @@ describe('MDC-based MatSelect', () => {
           dispatchFakeEvent(selectElement, 'blur');
           fixture.detectChanges();
 
-          expect(selectInstance.focused).toBe(true, 'Expected select element to remain focused.');
+          expect(selectInstance.focused)
+            .withContext('Expected select element to remain focused.').toBe(true);
         }));
 
     });
@@ -1441,7 +1526,7 @@ describe('MDC-based MatSelect', () => {
 
       it('should not float label if no option is selected', fakeAsync(() => {
         expect(label.classList.contains('mat-form-field-should-float'))
-            .toBe(false, 'Label should not be floating');
+          .withContext('Label should not be floating').toBe(false);
       }));
 
       it('should focus the first option if no option is selected', fakeAsync(() => {
@@ -1545,15 +1630,15 @@ describe('MDC-based MatSelect', () => {
             .not.toContain('mdc-list-item--selected',
                 'Expected first option to no longer be selected');
         expect(options[1].classList)
-            .toContain('mdc-list-item--selected',
-              'Expected second option to be selected');
+          .withContext('Expected second option to be selected')
+          .toContain('mdc-list-item--selected');
 
         const optionInstances = fixture.componentInstance.options.toArray();
 
         expect(optionInstances[0].selected)
-            .toBe(false, 'Expected first option to no longer be selected');
+          .withContext('Expected first option to no longer be selected').toBe(false);
         expect(optionInstances[1].selected)
-            .toBe(true, 'Expected second option to be selected');
+          .withContext('Expected second option to be selected').toBe(true);
       }));
 
       it('should remove selection if option has been removed', fakeAsync(() => {
@@ -1568,14 +1653,16 @@ describe('MDC-based MatSelect', () => {
         firstOption.click();
         fixture.detectChanges();
 
-        expect(select.selected).toBe(select.options.first, 'Expected first option to be selected.');
+        expect(select.selected)
+          .withContext('Expected first option to be selected.').toBe(select.options.first);
 
         fixture.componentInstance.foods = [];
         fixture.detectChanges();
         flush();
 
         expect(select.selected)
-            .toBeUndefined('Expected selection to be removed when option no longer exists.');
+          .withContext('Expected selection to be removed when option no longer exists.')
+          .toBeUndefined();
       }));
 
       it('should display the selected option in the trigger', fakeAsync(() => {
@@ -1591,7 +1678,7 @@ describe('MDC-based MatSelect', () => {
         const value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!.nativeElement;
 
         expect(label.classList.contains('mdc-floating-label--float-above'))
-            .toBe(true, 'Label should be floating');
+          .withContext('Label should be floating').toBe(true);
         expect(value.textContent).toContain('Steak');
       }));
 
@@ -1785,7 +1872,8 @@ describe('MDC-based MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!;
         expect(value.nativeElement.textContent)
-            .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+          .withContext(`Expected trigger to be populated by the control's initial value.`)
+          .toContain('Pizza');
 
         trigger = fixture.debugElement.query(By.css('.mat-mdc-select-trigger'))!.nativeElement;
         trigger.click();
@@ -1795,8 +1883,8 @@ describe('MDC-based MatSelect', () => {
         const options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         expect(options[1].classList)
-            .toContain('mdc-list-item--selected',
-                `Expected option with the control's initial value to be selected.`);
+          .withContext(`Expected option with the control's initial value to be selected.`)
+          .toContain('mdc-list-item--selected');
       }));
 
       it('should set the view value from the form', fakeAsync(() => {
@@ -1808,7 +1896,8 @@ describe('MDC-based MatSelect', () => {
 
         value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!;
         expect(value.nativeElement.textContent)
-            .toContain('Pizza', `Expected trigger to be populated by the control's new value.`);
+          .withContext(`Expected trigger to be populated by the control's new value.`)
+          .toContain('Pizza');
 
         trigger.click();
         fixture.detectChanges();
@@ -1816,13 +1905,14 @@ describe('MDC-based MatSelect', () => {
 
         const options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-        expect(options[1].classList).toContain('mdc-list-item--selected',
-            `Expected option with the control's new value to be selected.`);
+        expect(options[1].classList)
+          .withContext(`Expected option with the control's new value to be selected.`)
+          .toContain('mdc-list-item--selected');
       }));
 
       it('should update the form value when the view changes', fakeAsync(() => {
         expect(fixture.componentInstance.control.value)
-            .toEqual(null, `Expected the control's value to be empty initially.`);
+          .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
         trigger.click();
         fixture.detectChanges();
@@ -1834,7 +1924,7 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.value)
-            .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+          .withContext(`Expected control's value to be set to the new option.`).toEqual('steak-0');
       }));
 
       it('should clear the selection when a nonexistent option value is selected', fakeAsync(() => {
@@ -1846,7 +1936,7 @@ describe('MDC-based MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!;
         expect(value.nativeElement.textContent.trim())
-            .toBe('Food', `Expected trigger to show the placeholder.`);
+          .withContext(`Expected trigger to show the placeholder.`).toBe('Food');
         expect(trigger.textContent)
             .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
 
@@ -1870,7 +1960,7 @@ describe('MDC-based MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!;
         expect(value.nativeElement.textContent.trim())
-            .toBe('Food', `Expected trigger to show the placeholder.`);
+          .withContext(`Expected trigger to show the placeholder.`).toBe('Food');
         expect(trigger.textContent)
             .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
 
@@ -1886,7 +1976,7 @@ describe('MDC-based MatSelect', () => {
 
       it('should set the control to touched when the select is blurred', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toEqual(false, `Expected the control to start off as untouched.`);
+          .withContext(`Expected the control to start off as untouched.`).toEqual(false);
 
         trigger.click();
         dispatchFakeEvent(trigger, 'blur');
@@ -1894,7 +1984,7 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toEqual(false, `Expected the control to stay untouched when menu opened.`);
+          .withContext(`Expected the control to stay untouched when menu opened.`).toEqual(false);
 
         const backdrop =
             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1904,12 +1994,13 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toEqual(true, `Expected the control to be touched as soon as focus left the select.`);
+          .withContext(`Expected the control to be touched as soon as focus left the select.`)
+          .toEqual(true);
       }));
 
       it('should set the control to touched when the panel is closed', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         trigger.click();
         dispatchFakeEvent(trigger, 'blur');
@@ -1917,30 +2008,30 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to stay untouched when menu opened.');
+          .withContext('Expected the control to stay untouched when menu opened.').toBe(false);
 
         fixture.componentInstance.select.close();
         fixture.detectChanges();
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(true, 'Expected the control to be touched when the panel was closed.');
+          .withContext('Expected the control to be touched when the panel was closed.').toBe(true);
       }));
 
       it('should not set touched when a disabled select is touched', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         fixture.componentInstance.control.disable();
         dispatchFakeEvent(trigger, 'blur');
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to stay untouched.');
+          .withContext('Expected the control to stay untouched.').toBe(false);
       }));
 
       it('should set the control to dirty when the select value changes in DOM', fakeAsync(() => {
         expect(fixture.componentInstance.control.dirty)
-            .toEqual(false, `Expected control to start out pristine.`);
+          .withContext(`Expected control to start out pristine.`).toEqual(false);
 
         trigger.click();
         fixture.detectChanges();
@@ -1952,18 +2043,20 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.dirty)
-            .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+          .withContext(`Expected control to be dirty after value was changed by user.`)
+          .toEqual(true);
       }));
 
       it('should not set the control to dirty when the value changes programmatically',
           fakeAsync(() => {
             expect(fixture.componentInstance.control.dirty)
-                .toEqual(false, `Expected control to start out pristine.`);
+              .withContext(`Expected control to start out pristine.`).toEqual(false);
 
             fixture.componentInstance.control.setValue('pizza-1');
 
             expect(fixture.componentInstance.control.dirty)
-                .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+              .withContext(`Expected control to stay pristine after programmatic change.`)
+              .toEqual(false);
           }));
 
       it('should set an asterisk after the label if control is required', fakeAsync(() => {
@@ -1975,8 +2068,9 @@ describe('MDC-based MatSelect', () => {
         fixture.componentInstance.isRequired = true;
         fixture.detectChanges();
 
-        expect(label.classList).toContain('mdc-floating-label--required',
-            `Expected label to have an asterisk, as control was required.`);
+        expect(label.classList)
+          .withContext(`Expected label to have an asterisk, as control was required.`)
+          .toContain('mdc-floating-label--required');
       }));
     });
 
@@ -1990,28 +2084,30 @@ describe('MDC-based MatSelect', () => {
         let trigger =
             fixture.debugElement.query(By.css('.mat-mdc-select-trigger'))!.nativeElement;
         expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-            .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+          .withContext(`Expected cursor to be default arrow on disabled control.`)
+          .toEqual('default');
 
         trigger.click();
         fixture.detectChanges();
 
         expect(overlayContainerElement.textContent)
-            .toEqual('', `Expected select panel to stay closed.`);
+          .withContext(`Expected select panel to stay closed.`).toEqual('');
         expect(fixture.componentInstance.select.panelOpen)
-            .toBe(false, `Expected select panelOpen property to stay false.`);
+          .withContext(`Expected select panelOpen property to stay false.`).toBe(false);
 
         fixture.componentInstance.control.enable();
         fixture.detectChanges();
         expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-            .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+          .withContext(`Expected cursor to be a pointer on enabled control.`).toEqual('pointer');
 
         trigger.click();
         fixture.detectChanges();
 
         expect(overlayContainerElement.textContent)
-            .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+          .withContext(`Expected select panel to open normally on re-enabled control`)
+          .toContain('Steak');
         expect(fixture.componentInstance.select.panelOpen)
-            .toBe(true, `Expected select panelOpen property to become true.`);
+          .withContext(`Expected select panelOpen property to become true.`).toBe(true);
       }));
     });
 
@@ -2047,7 +2143,7 @@ describe('MDC-based MatSelect', () => {
         });
 
         expect(panel.scrollTop)
-            .toBe(initialScrollPosition, 'Expected scroll position not to change');
+          .withContext('Expected scroll position not to change').toBe(initialScrollPosition);
       }));
 
       it('should scroll down to the active option', fakeAsync(() => {
@@ -2056,7 +2152,8 @@ describe('MDC-based MatSelect', () => {
         }
 
         // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        expect(panel.scrollTop).toBe(520, 'Expected scroll to be at the 16th option.');
+        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
+        expect(panel.scrollTop).withContext('Expected scroll to be at the 16th option.').toBe(520);
       }));
 
       it('should scroll up to the active option', fakeAsync(() => {
@@ -2070,7 +2167,8 @@ describe('MDC-based MatSelect', () => {
         }
 
         // <top padding> + <option index * height> = 8 + 9 * 48 = 440
-        expect(panel.scrollTop).toBe(440, 'Expected scroll to be at the 9th option.');
+        // <top padding> + <option index * height> = 8 + 9 * 48 = 440
+        expect(panel.scrollTop).withContext('Expected scroll to be at the 9th option.').toBe(440);
       }));
 
       it('should skip option group labels', fakeAsync(() => {
@@ -2094,7 +2192,12 @@ describe('MDC-based MatSelect', () => {
         // 3 options because the second group is disabled.
         // <top padding> + <(option index + group labels) * height> - <panel height> =
         //    8 + (9 + 3) * 48 - 256 = 328
-        expect(panel.scrollTop).toBe(328, 'Expected scroll to be at the 9th option.');
+        // Note that we press down 5 times, but it will skip
+// 3 options because the second group is disabled.
+// <top padding> + <(option index + group labels) * height> - <panel height> =
+//    8 + (9 + 3) * 48 - 256 = 328
+expect(panel.scrollTop)
+  .withContext('Expected scroll to be at the 9th option.').toBe(328);
       }));
 
       it('should scroll to the top when pressing HOME', fakeAsync(() => {
@@ -2103,13 +2206,16 @@ describe('MDC-based MatSelect', () => {
           fixture.detectChanges();
         }
 
-        expect(panel.scrollTop).toBeGreaterThan(0, 'Expected panel to be scrolled down.');
+        expect(panel.scrollTop)
+          .withContext('Expected panel to be scrolled down.').toBeGreaterThan(0);
 
         dispatchKeyboardEvent(host, 'keydown', HOME);
         fixture.detectChanges();
 
         // 8px is the top padding of the panel.
-        expect(panel.scrollTop).toBe(8, 'Expected panel to be scrolled to the top');
+        // 8px is the top padding of the panel.
+expect(panel.scrollTop)
+  .withContext('Expected panel to be scrolled to the top').toBe(8);
       }));
 
       it('should scroll to the bottom of the panel when pressing END', fakeAsync(() => {
@@ -2118,7 +2224,10 @@ describe('MDC-based MatSelect', () => {
 
         // <top padding> + <option amount> * <option height> - <panel height> =
         //    8 + 30 * 48 - 256 = 1192
-        expect(panel.scrollTop).toBe(1192, 'Expected panel to be scrolled to the bottom');
+        // <top padding> + <option amount> * <option height> - <panel height> =
+//    8 + 30 * 48 - 256 = 1192
+expect(panel.scrollTop)
+  .withContext('Expected panel to be scrolled to the bottom').toBe(1192);
       }));
 
       it('should scroll to the active option when typing', fakeAsync(() => {
@@ -2131,7 +2240,9 @@ describe('MDC-based MatSelect', () => {
         flush();
 
         // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        expect(panel.scrollTop).toBe(520, 'Expected scroll to be at the 16th option.');
+        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
+expect(panel.scrollTop)
+  .withContext('Expected scroll to be at the 16th option.').toBe(520);
       }));
 
       it('should scroll to top when going to first option in top group', fakeAsync(() => {
@@ -2242,15 +2353,15 @@ describe('MDC-based MatSelect', () => {
       const trigger =
           fixture.debugElement.query(By.css('.mat-mdc-select-trigger'))!.nativeElement;
       expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+        .withContext(`Expected cursor to be default arrow on disabled control.`).toEqual('default');
 
       trigger.click();
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected select panel to stay closed.`);
+        .withContext(`Expected select panel to stay closed.`).toEqual('');
       expect(fixture.componentInstance.select.panelOpen)
-          .toBe(false, `Expected select panelOpen property to stay false.`);
+        .withContext(`Expected select panelOpen property to stay false.`).toBe(false);
 
       fixture.componentInstance.isDisabled = false;
       fixture.detectChanges();
@@ -2258,15 +2369,16 @@ describe('MDC-based MatSelect', () => {
 
       fixture.detectChanges();
       expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+        .withContext(`Expected cursor to be a pointer on enabled control.`).toEqual('pointer');
 
       trigger.click();
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+        .withContext(`Expected select panel to open normally on re-enabled control`)
+        .toContain('Steak');
       expect(fixture.componentInstance.select.panelOpen)
-          .toBe(true, `Expected select panelOpen property to become true.`);
+        .withContext(`Expected select panelOpen property to become true.`).toBe(true);
     }));
   });
 
@@ -2290,7 +2402,8 @@ describe('MDC-based MatSelect', () => {
 
       const value = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!;
       expect(value.nativeElement.textContent)
-          .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+        .withContext(`Expected trigger to be populated by the control's initial value.`)
+        .toContain('Pizza');
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.width).toEqual('300px');
@@ -2325,7 +2438,7 @@ describe('MDC-based MatSelect', () => {
         let firstOptionID = options[0].id;
 
         expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+          .withContext(`Expected option ID to have the correct prefix.`).toContain('mat-option');
         expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
 
         const backdrop =
@@ -2341,7 +2454,7 @@ describe('MDC-based MatSelect', () => {
         options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+          .withContext(`Expected option ID to have the correct prefix.`).toContain('mat-option');
         expect(options[0].id).not.toEqual(firstOptionID, `Expected option IDs to be unique.`);
         expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
       }));
@@ -2361,7 +2474,7 @@ describe('MDC-based MatSelect', () => {
       fixture.detectChanges();
 
       expect(label.classList.contains('mdc-floating-label--float-above'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
 
     it('should default to global floating label type', fakeAsync(() => {
@@ -2386,7 +2499,7 @@ describe('MDC-based MatSelect', () => {
       const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
 
       expect(label.classList.contains('mdc-floating-label--float-above'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
 
     it('should float the label on focus if it has a placeholder', fakeAsync(() => {
@@ -2402,7 +2515,7 @@ describe('MDC-based MatSelect', () => {
 
       const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
       expect(label.classList.contains('mdc-floating-label--float-above'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
   });
 
@@ -2629,27 +2742,29 @@ describe('MDC-based MatSelect', () => {
     }));
 
     it('should not set the invalid class on a clean select', fakeAsync(() => {
-      expect(testComponent.formGroup.untouched).toBe(true, 'Expected the form to be untouched.');
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid.');
+      expect(testComponent.formGroup.untouched)
+        .withContext('Expected the form to be untouched.').toBe(true);
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid.').toBe(true);
       expect(select.classList)
           .not.toContain('mat-mdc-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
     }));
 
     it('should appear as invalid if it becomes touched', fakeAsync(() => {
       expect(select.classList)
           .not.toContain('mat-mdc-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-mdc-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-mdc-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
     }));
 
     it('should not have the invalid class when the select becomes valid', fakeAsync(() => {
@@ -2657,9 +2772,9 @@ describe('MDC-based MatSelect', () => {
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-mdc-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-mdc-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
 
       testComponent.formControl.setValue('pizza-1');
       fixture.detectChanges();
@@ -2667,33 +2782,35 @@ describe('MDC-based MatSelect', () => {
       expect(select.classList)
           .not.toContain('mat-mdc-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
     }));
 
     it('should appear as invalid when the parent form group is submitted', fakeAsync(() => {
       expect(select.classList)
           .not.toContain('mat-mdc-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-mdc-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-mdc-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
     }));
 
     it('should render the error messages when the parent form is submitted', fakeAsync(() => {
       const debugEl = fixture.debugElement.nativeElement;
 
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error messages');
+      expect(debugEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error messages').toBe(0);
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(1, 'Expected one error message');
+      expect(debugEl.querySelectorAll('mat-error').length)
+        .withContext('Expected one error message').toBe(1);
     }));
 
     it('should override error matching behavior via injection token', fakeAsync(() => {
@@ -2786,7 +2903,8 @@ describe('MDC-based MatSelect', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.customAccessor.select.ngControl)
-          .toBeFalsy('Expected mat-select NOT to inherit control from parent value accessor.');
+        .withContext('Expected mat-select NOT to inherit control from parent value accessor.')
+        .toBeFalsy();
       expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
     }));
   });
@@ -2804,9 +2922,9 @@ describe('MDC-based MatSelect', () => {
       flush();
 
       expect(fixture.componentInstance.options.first.selected)
-          .toBe(true, 'Expected first option to be selected');
+        .withContext('Expected first option to be selected').toBe(true);
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mdc-list-item--selected', 'Expected first option to be selected');
+        .withContext('Expected first option to be selected').toContain('mdc-list-item--selected');
     }));
   });
 
@@ -2858,8 +2976,8 @@ describe('MDC-based MatSelect', () => {
 
       const label = fixture.debugElement.query(By.css('.mat-mdc-select-value'))!.nativeElement;
 
-      expect(label.textContent).toContain('azziP',
-          'Expected the displayed text to be "Pizza" in reverse.');
+      expect(label.textContent)
+        .withContext('Expected the displayed text to be "Pizza" in reverse.').toContain('azziP');
     }));
   });
 
@@ -3153,7 +3271,8 @@ describe('MDC-based MatSelect', () => {
 
       const select = fixture.debugElement.nativeElement.querySelector('mat-select');
 
-      expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+      expect(document.activeElement)
+        .withContext('Expected trigger to be focused.').toBe(select);
     }));
 
     it('should not restore focus to the host element when clicking outside', fakeAsync(() => {
@@ -3166,7 +3285,8 @@ describe('MDC-based MatSelect', () => {
       fixture.detectChanges();
       flush();
 
-      expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+      expect(document.activeElement)
+        .withContext('Expected trigger to be focused.').toBe(select);
 
       select.blur(); // Blur manually since the programmatic click might not do it.
       (overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement).click();
@@ -3256,7 +3376,8 @@ describe('MDC-based MatSelect', () => {
       const fixture = TestBed.createComponent(BasicSelectWithoutFormsMultiple);
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.selectedFoods).toBeFalsy('Expected no value on init.');
+      expect(fixture.componentInstance.selectedFoods)
+        .withContext('Expected no value on init.').toBeFalsy();
 
       const select = fixture.nativeElement.querySelector('.mat-mdc-select');
       const trigger = fixture.nativeElement.querySelector('.mat-mdc-select-trigger');
@@ -3273,7 +3394,7 @@ describe('MDC-based MatSelect', () => {
       flush();
 
       expect(fixture.componentInstance.selectedFoods)
-          .toBeFalsy('Expected no value after tabbing away.');
+        .withContext('Expected no value after tabbing away.').toBeFalsy();
     }));
 
     it('should emit once when a reset value is selected', fakeAsync(() => {
@@ -3360,7 +3481,9 @@ describe('MDC-based MatSelect', () => {
               document.querySelector('.cdk-overlay-pane .mat-mdc-select-panel')!;
 
           // The panel should be scrolled to 0 because centering the option disabled.
-          expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
+          // The panel should be scrolled to 0 because centering the option disabled.
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel not to be scrolled.`).toEqual(0);
           // The trigger should contain 'Pizza' because it was preselected
           expect(trigger.textContent).toContain('Pizza');
           // The selected index should be 1 because it was preselected
@@ -3638,14 +3761,16 @@ describe('MDC-based MatSelect', () => {
       fixture.detectChanges();
       flush();
 
-      expect(testInstance.options.toArray().every(option => !!option.multiple)).toBe(true,
-          'Expected `multiple` to have been added to initial set of options.');
+      expect(testInstance.options.toArray().every(option => !!option.multiple))
+        .withContext('Expected `multiple` to have been added to initial set of options.')
+        .toBe(true);
 
       testInstance.foods.push({ value: 'cake-8', viewValue: 'Cake' });
       fixture.detectChanges();
 
-      expect(testInstance.options.toArray().every(option => !!option.multiple)).toBe(true,
-          'Expected `multiple` to have been set on dynamically-added option.');
+      expect(testInstance.options.toArray().every(option => !!option.multiple))
+        .withContext('Expected `multiple` to have been set on dynamically-added option.')
+        .toBe(true);
     }));
 
     it('should update the active item index on click', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
index e25d736236a9..66e04fd568b1 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
@@ -370,7 +370,8 @@ describe('MDC-based MatSlideToggle without forms', () => {
         .query(By.directive(MatSlideToggle))!.componentInstance as MatSlideToggle;
 
       expect(slideToggle.tabIndex)
-        .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
+        .withContext('Expected tabIndex property to have been set based on the native attribute')
+        .toBe(5);
     }));
 
     it('should add the disabled class if disabled through attribute', () => {
@@ -432,22 +433,22 @@ describe('MDC-based MatSlideToggle without forms', () => {
 
       expect(testComponent.toggleTriggered).toBe(0);
       expect(testComponent.dragTriggered).toBe(0);
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+      expect(slideToggle.checked).withContext('Expect slide toggle value not changed').toBe(false);
 
       labelElement.click();
       fixture.detectChanges();
       tick();
 
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
-      expect(testComponent.toggleTriggered).toBe(1, 'Expect toggle once');
+      expect(slideToggle.checked).withContext('Expect slide toggle value not changed').toBe(false);
+      expect(testComponent.toggleTriggered).withContext('Expect toggle once').toBe(1);
       expect(testComponent.dragTriggered).toBe(0);
 
       buttonElement.click();
       fixture.detectChanges();
       tick();
 
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
-      expect(testComponent.toggleTriggered).toBe(2, 'Expect toggle twice');
+      expect(slideToggle.checked).withContext('Expect slide toggle value not changed').toBe(false);
+      expect(testComponent.toggleTriggered).withContext('Expect toggle twice').toBe(2);
       expect(testComponent.dragTriggered).toBe(0);
     }));
 
@@ -635,14 +636,15 @@ describe('MDC-based MatSlideToggle with forms', () => {
       fixture.detectChanges();
 
       expect(slideToggle.checked)
-        .toBe(true, 'Expected slide-toggle to be checked initially');
+        .withContext('Expected slide-toggle to be checked initially').toBe(true);
 
       labelElement.click();
       fixture.detectChanges();
       tick();
 
       expect(slideToggle.checked)
-        .toBe(false, 'Expected slide-toggle to be no longer checked after label click.');
+        .withContext('Expected slide-toggle to be no longer checked after label click.')
+        .toBe(false);
     }));
 
     it('should be pristine if initial value is set from NgModel', fakeAsync(() => {
@@ -766,7 +768,8 @@ describe('MDC-based MatSlideToggle with forms', () => {
 
       spyOn(fixture.componentInstance, 'onChange').and.callFake(() => {
         expect(fixture.componentInstance.checked)
-          .toBe(true, 'Expected the model value to have changed before the change event fired.');
+          .withContext('Expected the model value to have changed before the change event fired.')
+          .toBe(true);
       });
 
       labelEl.click();
diff --git a/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts b/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts
index d355bee57521..9063e0322c5f 100644
--- a/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts
+++ b/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts
@@ -72,13 +72,14 @@ describe('MatSnackBar', () => {
     const inertElement = containerElement.querySelector('[aria-hidden]')!;
 
     expect(inertElement.getAttribute('aria-hidden'))
-      .toBe('true', 'Expected the non-live region to be aria-hidden');
-    expect(inertElement.textContent).toContain('Snack time!',
-        'Expected non-live region to contain the snack bar content');
+      .withContext('Expected the non-live region to be aria-hidden').toBe('true');
+    expect(inertElement.textContent)
+      .withContext('Expected non-live region to contain the snack bar content')
+      .toContain('Snack time!');
 
     const liveElement = containerElement.querySelector('[aria-live]')!;
     expect(liveElement.childNodes.length)
-        .toBe(0, 'Expected live region to not contain any content');
+      .withContext('Expected live region to not contain any content').toBe(0);
   });
 
   it('should move content to the live region after 150ms', fakeAsync(() => {
@@ -89,11 +90,13 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
     tick(announceDelay);
 
-    expect(liveElement.textContent).toContain('Snack time!',
-        'Expected live region to contain the snack bar content');
+    expect(liveElement.textContent)
+      .withContext('Expected live region to contain the snack bar content')
+      .toContain('Snack time!');
 
     const inertElement = containerElement.querySelector('[aria-hidden]')!;
-    expect(inertElement).toBeFalsy('Expected non-live region to not contain any content');
+    expect(inertElement)
+      .withContext('Expected non-live region to not contain any content').toBeFalsy();
     flush();
   }));
 
@@ -106,11 +109,11 @@ describe('MatSnackBar', () => {
         .querySelector('.mat-mdc-simple-snack-bar .mat-mdc-snack-bar-action')! as HTMLElement;
     actionButton.focus();
     expect(document.activeElement)
-        .toBe(actionButton, 'Expected the focus to move to the action button');
+      .withContext('Expected the focus to move to the action button').toBe(actionButton);
 
     flush();
     expect(document.activeElement)
-        .toBe(actionButton, 'Expected the focus to remain on the action button');
+      .withContext('Expected the focus to remain on the action button').toBe(actionButton);
   }));
 
   it('should have aria-live of `assertive` with an `assertive` politeness if no announcement ' +
@@ -123,8 +126,9 @@ describe('MatSnackBar', () => {
     const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
-    expect(liveElement.getAttribute('aria-live')).toBe('assertive',
-        'Expected snack bar container live region to have aria-live="assertive"');
+    expect(liveElement.getAttribute('aria-live'))
+      .withContext('Expected snack bar container live region to have aria-live="assertive"')
+      .toBe('assertive');
   });
 
   it('should have aria-live of `polite` with an `assertive` politeness if an announcement ' +
@@ -137,7 +141,8 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('polite', 'Expected snack bar container live region to have aria-live="polite"');
+      .withContext('Expected snack bar container live region to have aria-live="polite"')
+      .toBe('polite');
   });
 
   it('should have aria-live of `polite` with a `polite` politeness', () => {
@@ -148,7 +153,8 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('polite', 'Expected snack bar container live region to have aria-live="polite"');
+      .withContext('Expected snack bar container live region to have aria-live="polite"')
+      .toBe('polite');
   });
 
   it('should have aria-live of `off` if the politeness is turned off', () => {
@@ -159,7 +165,7 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('off', 'Expected snack bar container live region to have aria-live="off"');
+      .withContext('Expected snack bar container live region to have aria-live="off"').toBe('off');
   });
 
   it('should have role of `alert` with an `assertive` politeness (Firefox only)', () => {
@@ -199,15 +205,16 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
-    expect(messageElement.textContent).toContain('Snack time!',
-        'Expected snack bar to show a message without a ViewContainerRef');
+    expect(messageElement.textContent)
+      .withContext('Expected snack bar to show a message without a ViewContainerRef')
+      .toContain('Snack time!');
 
     snackBarRef.dismiss();
     viewContainerFixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.childNodes.length)
-        .toBe(0, 'Expected snack bar to be dismissed without a ViewContainerRef');
+      .withContext('Expected snack bar to be dismissed without a ViewContainerRef').toBe(0);
   }));
 
   it('should open a simple message with a button', () => {
@@ -217,21 +224,22 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof MatSimpleSnackBar)
-        .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+      .withContext('Expected the snack bar content component to be SimpleSnackBar').toBe(true);
     expect(snackBarRef.instance.snackBarRef)
-        .toBe(snackBarRef,
-            'Expected the snack bar reference to be placed in the component instance');
+      .withContext('Expected the snack bar reference to be placed in the component instance')
+      .toBe(snackBarRef);
 
     let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
     expect(messageElement.textContent)
-        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
+      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
+      .toContain(simpleMessage);
 
     let buttonElement = overlayContainerElement.querySelector('button.mat-mdc-button')!;
     expect(buttonElement.tagName)
-        .toBe('BUTTON', 'Expected snack bar action label to be a <button>');
+      .withContext('Expected snack bar action label to be a <button>').toBe('BUTTON');
     expect((buttonElement.textContent || '').trim())
-        .toBe(simpleActionLabel,
-            `Expected the snack bar action label to be '${simpleActionLabel}'`);
+      .withContext(`Expected the snack bar action label to be '${simpleActionLabel}'`)
+      .toBe(simpleActionLabel);
   });
 
   it('should open a simple message with no button', () => {
@@ -241,16 +249,18 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof MatSimpleSnackBar)
-        .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+      .withContext('Expected the snack bar content component to be SimpleSnackBar').toBe(true);
     expect(snackBarRef.instance.snackBarRef)
-        .toBe(snackBarRef,
-            'Expected the snack bar reference to be placed in the component instance');
+      .withContext('Expected the snack bar reference to be placed in the component instance')
+      .toBe(snackBarRef);
 
     let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
     expect(messageElement.textContent)
-        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
+      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
+      .toContain(simpleMessage);
     expect(overlayContainerElement.querySelector('button.mat-mdc-button'))
-        .toBeNull('Expected the query selection for action label to be null');
+      .withContext('Expected the query selection for action label to be null')
+      .toBeNull();
   });
 
   it('should dismiss the snack bar and remove itself from the view', fakeAsync(() => {
@@ -260,21 +270,23 @@ describe('MatSnackBar', () => {
     let snackBarRef = snackBar.open(simpleMessage, undefined, config);
     viewContainerFixture.detectChanges();
     expect(overlayContainerElement.childElementCount)
-        .toBeGreaterThan(0, 'Expected overlay container element to have at least one child');
+      .withContext('Expected overlay container element to have at least one child')
+      .toBeGreaterThan(0);
 
     snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
 
     snackBarRef.dismiss();
     viewContainerFixture.detectChanges();
     const messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
-    expect (messageElement.hasAttribute('mat-exit'))
-        .toBe(true, 'Expected the snackbar container to have the "exit" attribute upon dismiss');
+    expect(messageElement.hasAttribute('mat-exit'))
+      .withContext('Expected the snackbar container to have the "exit" attribute upon dismiss')
+      .toBe(true);
 
     flush();
 
     expect(dismissCompleteSpy).toHaveBeenCalled();
     expect(overlayContainerElement.childElementCount)
-        .toBe(0, 'Expected the overlay container element to have no child elements');
+      .withContext('Expected the overlay container element to have no child elements').toBe(0);
   }));
 
 
@@ -286,7 +298,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-        .toBe(1, 'Expected the overlay with the default announcement message to be added');
+      .withContext('Expected the overlay with the default announcement message to be added')
+      .toBe(1);
 
     expect(liveAnnouncer.announce).not.toHaveBeenCalled();
   }));
@@ -302,7 +315,7 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-        .toBe(1, 'Expected the overlay with a custom `announcementMessage` to be added');
+      .withContext('Expected the overlay with a custom `announcementMessage` to be added').toBe(1);
 
     expect(liveAnnouncer.announce).toHaveBeenCalledWith('Custom announcement', 'assertive');
   }));
@@ -329,7 +342,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-        .toBe(0, 'Expected snack bar to be removed after the view container was destroyed');
+      .withContext('Expected snack bar to be removed after the view container was destroyed')
+      .toBe(0);
   }));
 
   it('should open a new snackbar after dismissing a previous snackbar', fakeAsync(() => {
@@ -497,7 +511,8 @@ describe('MatSnackBar', () => {
 
     let pane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
 
-    expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.');
+    expect(pane.getAttribute('dir'))
+      .withContext('Expected the pane to be in RTL mode.').toBe('rtl');
   });
 
   it('should be able to override the default config', fakeAsync(() => {
@@ -523,7 +538,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.querySelector('mat-snack-bar-container')!.classList)
-        .toContain('custom-class', 'Expected class applied through the defaults to be applied.');
+      .withContext('Expected class applied through the defaults to be applied.')
+      .toContain('custom-class');
   }));
 
   it('should dismiss the open snack bar on destroy', fakeAsync(() => {
@@ -558,16 +574,19 @@ describe('MatSnackBar', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);
 
       expect(snackBarRef.instance instanceof BurritosNotification)
-          .toBe(true, 'Expected the snack bar content component to be BurritosNotification');
+        .withContext('Expected the snack bar content component to be BurritosNotification')
+        .toBe(true);
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('Burritos are on the way.', 'Expected component to have the proper text.');
+        .withContext('Expected component to have the proper text.')
+        .toBe('Burritos are on the way.');
     });
 
     it('should inject the snack bar reference into the component', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);
 
       expect(snackBarRef.instance.snackBarRef)
-          .toBe(snackBarRef, 'Expected component to have an injected snack bar reference.');
+        .withContext('Expected component to have an injected snack bar reference.')
+        .toBe(snackBarRef);
     });
 
     it('should have exactly one MDC label element', () => {
@@ -583,10 +602,11 @@ describe('MatSnackBar', () => {
         }
       });
 
-      expect(snackBarRef.instance.data).toBeTruthy('Expected component to have a data object.');
+      expect(snackBarRef.instance.data)
+        .withContext('Expected component to have a data object.').toBeTruthy();
       expect(snackBarRef.instance.data.burritoType)
-          .toBe('Chimichanga',
-              'Expected the injected data object to be the one the user provided.');
+        .withContext('Expected the injected data object to be the one the user provided.')
+        .toBe('Chimichanga');
     });
 
     it('should allow manually dismissing with an action', fakeAsync(() => {
@@ -686,14 +706,15 @@ describe('MatSnackBar with parent MatSnackBar', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a snackBar to be opened');
+      .withContext('Expected a snackBar to be opened').toContain('Pizza');
 
     childSnackBar.open('Taco');
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected parent snackbar msg to be dismissed by opening from child');
+      .withContext('Expected parent snackbar msg to be dismissed by opening from child')
+      .toContain('Taco');
   }));
 
   it('should close snackBars opened by child when opening from parent', fakeAsync(() => {
@@ -702,14 +723,15 @@ describe('MatSnackBar with parent MatSnackBar', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a snackBar to be opened');
+      .withContext('Expected a snackBar to be opened').toContain('Pizza');
 
     parentSnackBar.open('Taco');
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected child snackbar msg to be dismissed by opening from parent');
+      .withContext('Expected child snackbar msg to be dismissed by opening from parent')
+      .toContain('Taco');
   }));
 
   it('should not dismiss parent snack bar if child is destroyed', fakeAsync(() => {
@@ -767,10 +789,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should be in the bottom left corner', fakeAsync(() => {
@@ -783,10 +809,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should be in the bottom right corner', fakeAsync(() => {
@@ -799,10 +829,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should be in the bottom center', fakeAsync(() => {
@@ -815,10 +849,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should be in the top left corner', fakeAsync(() => {
@@ -831,10 +869,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should be in the top right corner', fakeAsync(() => {
@@ -847,10 +889,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should be in the top center', fakeAsync(() => {
@@ -863,10 +909,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should handle start based on direction (rtl)', fakeAsync(() => {
@@ -880,10 +930,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should handle start based on direction (ltr)', fakeAsync(() => {
@@ -897,10 +951,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should handle end based on direction (rtl)', fakeAsync(() => {
@@ -914,10 +972,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should handle end based on direction (ltr)', fakeAsync(() => {
@@ -931,10 +993,14 @@ describe('MatSnackBar Positioning', () => {
     flush();
 
     const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
 });
diff --git a/src/material-experimental/mdc-tabs/tab-group.spec.ts b/src/material-experimental/mdc-tabs/tab-group.spec.ts
index 4349506d41ee..74e6269642ec 100644
--- a/src/material-experimental/mdc-tabs/tab-group.spec.ts
+++ b/src/material-experimental/mdc-tabs/tab-group.spec.ts
@@ -189,13 +189,13 @@ describe('MDC-based MatTabGroup', () => {
       const tabLabel = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'))[1];
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially.');
+        .withContext('Expected no ripples to show up initially.').toBe(0);
 
       dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
       dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up on label mousedown.');
+        .withContext('Expected one ripple to show up on label mousedown.').toBe(1);
     });
 
     it('should allow disabling ripples for tab-group labels', () => {
@@ -206,13 +206,13 @@ describe('MDC-based MatTabGroup', () => {
       const tabLabel = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'))[1];
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially.');
+        .withContext('Expected no ripples to show up initially.').toBe(0);
 
       dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
       dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripple to show up on label mousedown.');
+        .withContext('Expected no ripple to show up on label mousedown.').toBe(0);
     });
 
     it('should set the isActive flag on each of the tabs', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-tabs/tab-header.spec.ts b/src/material-experimental/mdc-tabs/tab-header.spec.ts
index ba3cc8c2f3d3..edd7d9d2cb37 100644
--- a/src/material-experimental/mdc-tabs/tab-header.spec.ts
+++ b/src/material-experimental/mdc-tabs/tab-header.spec.ts
@@ -287,13 +287,13 @@ describe('MDC-based MatTabHeader', () => {
             fixture.debugElement.query(By.css('.mat-mdc-tab-header-pagination-after'));
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up initially.');
+          .withContext('Expected no ripple to show up initially.').toBe(0);
 
         dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
         dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected one ripple to show up after mousedown');
+          .withContext('Expected one ripple to show up after mousedown').toBe(1);
       });
 
       it('should allow disabling ripples for pagination buttons', () => {
@@ -307,13 +307,13 @@ describe('MDC-based MatTabHeader', () => {
             fixture.debugElement.query(By.css('.mat-mdc-tab-header-pagination-after'));
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up initially.');
+          .withContext('Expected no ripple to show up initially.').toBe(0);
 
         dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
         dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up after mousedown');
+          .withContext('Expected no ripple to show up after mousedown').toBe(0);
       });
 
     });
@@ -387,7 +387,8 @@ describe('MDC-based MatTabHeader', () => {
         }));
 
       it('should not scroll if the sequence is interrupted quickly', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, 'mousedown');
         fixture.detectChanges();
@@ -399,7 +400,8 @@ describe('MDC-based MatTabHeader', () => {
 
         tick(3000);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to have scrolled after a while.').toBe(0);
       }));
 
       it('should clear the timeouts on destroy', fakeAsync(() => {
@@ -454,17 +456,20 @@ describe('MDC-based MatTabHeader', () => {
       }));
 
       it('should stop scrolling if the pointer leaves the header', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, 'mousedown');
         fixture.detectChanges();
         tick(300);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to scroll after short amount of time.').toBe(0);
 
         tick(1000);
 
-        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+        expect(header.scrollDistance)
+          .withContext('Expected to scroll after some time.').toBeGreaterThan(0);
 
         let previousDistance = header.scrollDistance;
 
@@ -476,13 +481,15 @@ describe('MDC-based MatTabHeader', () => {
       }));
 
       it('should not scroll when pressing the right mouse button', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchEvent(nextButton, createMouseEvent('mousedown', undefined, undefined, 2));
         fixture.detectChanges();
         tick(3000);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to have scrolled after a while.').toBe(0);
       }));
 
       /**
@@ -491,24 +498,28 @@ describe('MDC-based MatTabHeader', () => {
        * @param endEventName Name of the event that is supposed to end the scrolling.
        */
       function assertNextButtonScrolling(startEventName: string, endEventName: string) {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, startEventName);
         fixture.detectChanges();
         tick(300);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to scroll after short amount of time.').toBe(0);
 
         tick(1000);
 
-        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+        expect(header.scrollDistance)
+          .withContext('Expected to scroll after some time.').toBeGreaterThan(0);
 
         let previousDistance = header.scrollDistance;
 
         tick(100);
 
         expect(header.scrollDistance)
-            .toBeGreaterThan(previousDistance, 'Expected to scroll again after some more time.');
+          .withContext('Expected to scroll again after some more time.')
+          .toBeGreaterThan(previousDistance);
 
         dispatchFakeEvent(nextButton, endEventName);
       }
@@ -524,26 +535,28 @@ describe('MDC-based MatTabHeader', () => {
 
         let currentScroll = header.scrollDistance;
 
-        expect(currentScroll).toBeGreaterThan(0, 'Expected to start off scrolled.');
+        expect(currentScroll)
+          .withContext('Expected to start off scrolled.').toBeGreaterThan(0);
 
         dispatchFakeEvent(prevButton, startEventName);
         fixture.detectChanges();
         tick(300);
 
         expect(header.scrollDistance)
-            .toBe(currentScroll, 'Expected not to scroll after short amount of time.');
+          .withContext('Expected not to scroll after short amount of time.').toBe(currentScroll);
 
         tick(1000);
 
         expect(header.scrollDistance)
-            .toBeLessThan(currentScroll, 'Expected to scroll after some time.');
+          .withContext('Expected to scroll after some time.').toBeLessThan(currentScroll);
 
         currentScroll = header.scrollDistance;
 
         tick(100);
 
         expect(header.scrollDistance)
-            .toBeLessThan(currentScroll, 'Expected to scroll again after some more time.');
+          .withContext('Expected to scroll again after some more time.')
+          .toBeLessThan(currentScroll);
 
         dispatchFakeEvent(nextButton, endEventName);
       }
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts
index e0e6cd3d6d39..bb0f6bd0ddb4 100644
--- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -101,14 +101,18 @@ describe('MDC-based MatTabNavBar', () => {
 
       expect(tabLinkElements.every(tabLinkEl => {
         return !tabLinkEl.classList.contains('mat-mdc-tab-disabled');
-      })).toBe(true, 'Expected every tab link to not have the disabled class initially');
+      }))
+        .withContext('Expected every tab link to not have the disabled class initially')
+        .toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLinkEl => {
         return tabLinkEl.classList.contains('mat-mdc-tab-disabled');
-      })).toBe(true, 'Expected every tab link to have the disabled class if set through binding');
+      }))
+        .withContext('Expected every tab link to have the disabled class if set through binding')
+        .toBe(true);
     });
 
     it('should update aria-disabled if disabled', () => {
@@ -116,13 +120,13 @@ describe('MDC-based MatTabNavBar', () => {
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
       expect(tabLinkElements.every(tabLink => tabLink.getAttribute('aria-disabled') === 'false'))
-        .toBe(true, 'Expected aria-disabled to be set to "false" by default.');
+        .withContext('Expected aria-disabled to be set to "false" by default.').toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLink => tabLink.getAttribute('aria-disabled') === 'true'))
-        .toBe(true, 'Expected aria-disabled to be set to "true" if link is disabled.');
+        .withContext('Expected aria-disabled to be set to "true" if link is disabled.').toBe(true);
     });
 
     it('should update the tabindex if links are disabled', () => {
@@ -130,13 +134,13 @@ describe('MDC-based MatTabNavBar', () => {
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
       expect(tabLinkElements.every(tabLink => tabLink.tabIndex === 0))
-        .toBe(true, 'Expected element to be keyboard focusable by default');
+        .withContext('Expected element to be keyboard focusable by default').toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLink => tabLink.tabIndex === -1))
-        .toBe(true, 'Expected element to no longer be keyboard focusable if disabled.');
+        .withContext('Expected element to no longer be keyboard focusable if disabled.').toBe(true);
     });
 
     it('should mark disabled links', () => {
@@ -241,7 +245,8 @@ describe('MDC-based MatTabNavBar', () => {
     dispatchMouseEvent(link, 'mousedown');
 
     expect(link.querySelector('.mat-ripple-element'))
-      .toBeFalsy('Expected no ripple to be created when ripple target is destroyed.');
+      .withContext('Expected no ripple to be created when ripple target is destroyed.')
+      .toBeFalsy();
   });
 
   it('should support the native tabindex attribute', () => {
@@ -252,7 +257,7 @@ describe('MDC-based MatTabNavBar', () => {
         .injector.get<MatTabLink>(MatTabLink);
 
     expect(tabLink.tabIndex)
-      .toBe(5, 'Expected the tabIndex to be set from the native tabindex attribute.');
+      .withContext('Expected the tabIndex to be set from the native tabindex attribute.').toBe(5);
   });
 
   it('should support binding to the tabIndex', () => {
@@ -262,12 +267,14 @@ describe('MDC-based MatTabNavBar', () => {
     const tabLink = fixture.debugElement.query(By.directive(MatTabLink))
         .injector.get<MatTabLink>(MatTabLink);
 
-    expect(tabLink.tabIndex).toBe(0, 'Expected the tabIndex to be set to 0 by default.');
+    expect(tabLink.tabIndex)
+      .withContext('Expected the tabIndex to be set to 0 by default.').toBe(0);
 
     fixture.componentInstance.tabIndex = 3;
     fixture.detectChanges();
 
-    expect(tabLink.tabIndex).toBe(3, 'Expected the tabIndex to be have been set to 3.');
+    expect(tabLink.tabIndex)
+      .withContext('Expected the tabIndex to be have been set to 3.').toBe(3);
   });
 
   it('should select the proper tab, if the tabs come in after init', () => {
@@ -296,25 +303,27 @@ describe('MDC-based MatTabNavBar', () => {
 
     it('should be disabled on all tab links when they are disabled on the nav bar', () => {
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => !tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples enabled');
+        .withContext('Expected every tab link to have ripples enabled').toBe(true);
 
       fixture.componentInstance.disableRippleOnBar = true;
       fixture.detectChanges();
 
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples disabled');
+        .withContext('Expected every tab link to have ripples disabled').toBe(true);
     });
 
     it('should have the `disableRipple` from the tab take precedence over the nav bar', () => {
       const firstTab = fixture.componentInstance.tabLinks.first;
 
-      expect(firstTab.rippleDisabled).toBe(false, 'Expected ripples to be enabled on first tab');
+      expect(firstTab.rippleDisabled)
+        .withContext('Expected ripples to be enabled on first tab').toBe(false);
 
       firstTab.disableRipple = true;
       fixture.componentInstance.disableRippleOnBar = false;
       fixture.detectChanges();
 
-      expect(firstTab.rippleDisabled).toBe(true, 'Expected ripples to be disabled on first tab');
+      expect(firstTab.rippleDisabled)
+        .withContext('Expected ripples to be disabled on first tab').toBe(true);
     });
 
     it('should show up for tab link elements on mousedown', () => {
@@ -324,7 +333,7 @@ describe('MDC-based MatTabNavBar', () => {
       dispatchMouseEvent(tabLink, 'mouseup');
 
       expect(tabLink.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up if user clicks on tab link.');
+        .withContext('Expected one ripple to show up if user clicks on tab link.').toBe(1);
     });
 
     it('should be able to disable ripples on an individual tab link', () => {
@@ -338,17 +347,17 @@ describe('MDC-based MatTabNavBar', () => {
       dispatchMouseEvent(tabLinkElement, 'mouseup');
 
       expect(tabLinkElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripple to show up if ripples are disabled.');
+        .withContext('Expected no ripple to show up if ripples are disabled.').toBe(0);
     });
 
     it('should be able to disable ripples through global options at runtime', () => {
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => !tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples enabled');
+        .withContext('Expected every tab link to have ripples enabled').toBe(true);
 
       globalRippleOptions.disabled = true;
 
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples disabled');
+        .withContext('Expected every tab link to have ripples disabled').toBe(true);
     });
 
     it('should have a focus indicator', () => {
diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts
index 2f04c34cfa48..b1f692019753 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.spec.ts
+++ b/src/material-experimental/mdc-tooltip/tooltip.spec.ts
@@ -244,8 +244,9 @@ describe('MDC-based MatTooltip', () => {
       const overlayRef = tooltipDirective._overlayRef;
 
       expect(!!overlayRef).toBeTruthy();
-      expect(overlayRef!.overlayElement.classList).toContain('mat-mdc-tooltip-panel',
-          'Expected the overlay panel element to have the tooltip panel class set.');
+      expect(overlayRef!.overlayElement.classList)
+        .withContext('Expected the overlay panel element to have the tooltip panel class set.')
+        .toContain('mat-mdc-tooltip-panel');
     }));
 
     it('should not show if disabled', fakeAsync(() => {
@@ -441,10 +442,12 @@ describe('MDC-based MatTooltip', () => {
 
       // Make sure classes are correctly added
       tooltipElement = overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
-      expect(tooltipElement.classList).toContain('custom-one',
-        'Expected to have the class after enabling matTooltipClass');
-      expect(tooltipElement.classList).toContain('custom-two',
-        'Expected to have the class after enabling matTooltipClass');
+      expect(tooltipElement.classList)
+        .withContext('Expected to have the class after enabling matTooltipClass')
+        .toContain('custom-one');
+      expect(tooltipElement.classList)
+        .withContext('Expected to have the class after enabling matTooltipClass')
+        .toContain('custom-two');
     }));
 
     it('should be removed after parent destroyed', fakeAsync(() => {
@@ -585,8 +588,9 @@ describe('MDC-based MatTooltip', () => {
       const tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
 
-      expect(tooltipWrapper).toBeTruthy('Expected tooltip to be shown.');
-      expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.');
+      expect(tooltipWrapper).withContext('Expected tooltip to be shown.').toBeTruthy();
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in RTL mode.').toBe('rtl');
     }));
 
     it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => {
@@ -598,7 +602,8 @@ describe('MDC-based MatTooltip', () => {
 
       let tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
-      expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL.');
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in RTL.').toBe('rtl');
 
       tooltipDirective.hide(0);
       tick(0);
@@ -613,7 +618,8 @@ describe('MDC-based MatTooltip', () => {
 
       tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
-      expect(tooltipWrapper.getAttribute('dir')).toBe('ltr', 'Expected tooltip to be in LTR.');
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in LTR.').toBe('ltr');
     }));
 
     it('should be able to set the tooltip message as a number', fakeAsync(() => {
@@ -951,22 +957,25 @@ describe('MDC-based MatTooltip', () => {
       fixture.detectChanges();
       tick(0);
 
+      // Expect that the tooltip is displayed
       // Expect that the tooltip is displayed
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(true, 'Expected tooltip to be initially visible');
+        .withContext('Expected tooltip to be initially visible').toBe(true);
 
       // Scroll the page but tick just before the default throttle should update.
       fixture.componentInstance.scrollDown();
       tick(SCROLL_THROTTLE_MS - 1);
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(true, 'Expected tooltip to be visible when scrolling, before throttle limit');
+        .withContext('Expected tooltip to be visible when scrolling, before throttle limit')
+        .toBe(true);
 
       // Finish ticking to the throttle's limit and check that the scroll event notified the
       // tooltip and it was hidden.
       tick(100);
       fixture.detectChanges();
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(false, 'Expected tooltip hidden when scrolled out of view, after throttle limit');
+        .withContext('Expected tooltip hidden when scrolled out of view, after throttle limit')
+        .toBe(false);
     }));
 
     it('should execute the `hide` call, after scrolling away, inside the NgZone', fakeAsync(() => {
diff --git a/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts b/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts
index 93f200dcf668..b88a79fe8929 100644
--- a/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts
+++ b/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts
@@ -148,7 +148,7 @@ describe('LuxonDateAdapter', () => {
 
   it("should get today's date", () => {
     expect(adapter.sameDate(adapter.today(), DateTime.local()))
-        .toBe(true, "should be equal to today's date");
+      .withContext("should be equal to today's date").toBe(true);
   });
 
   it('should parse string according to given format', () => {
@@ -195,7 +195,7 @@ describe('LuxonDateAdapter', () => {
     expect(d).not.toBeNull();
     expect(adapter.isDateInstance(d)).toBe(true);
     expect(adapter.isValid(d as DateTime))
-        .toBe(false, 'Expected to parse as "invalid date" object');
+      .withContext('Expected to parse as "invalid date" object').toBe(false);
   });
 
   it('should format date according to given format', () => {
@@ -478,8 +478,8 @@ function stripDirectionalityCharacters(str: string) {
 }
 
 function assertValidDate(adapter: DateAdapter<DateTime>, d: DateTime | null, valid: boolean) {
-  expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
-  expect(adapter.isValid(d!)).toBe(valid,
-      `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
-      ` but was ${valid ? 'invalid' : 'valid'}`);
+  expect(adapter.isDateInstance(d)).not
+    .withContext(`Expected ${d} to be a date instance`).toBeNull();
+  expect(adapter.isValid(d!)).withContext(`Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
+    ` but was ${valid ? 'invalid' : 'valid'}`).toBe(valid);
 }
diff --git a/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts b/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
index 4bf71e10edf9..9ed0f757e883 100644
--- a/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
+++ b/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
@@ -31,10 +31,11 @@ describe('MomentDateAdapter', () => {
     adapter.setLocale('en');
 
     assertValidDate = (d: moment.Moment | null, valid: boolean) => {
-      expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
-      expect(adapter.isValid(d!)).toBe(valid,
-          `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
-          ` but was ${valid ? 'invalid' : 'valid'}`);
+      expect(adapter.isDateInstance(d)).not
+        .withContext(`Expected ${d} to be a date instance`).toBeNull();
+      expect(adapter.isValid(d!))
+        .withContext(`Expected ${d} to be ${valid ? 'valid' : 'invalid'}, but ` +
+                     `was ${valid ? 'invalid' : 'valid'}`).toBe(valid);
     };
   }));
 
@@ -172,7 +173,7 @@ describe('MomentDateAdapter', () => {
 
   it("should get today's date", () => {
     expect(adapter.sameDate(adapter.today(), moment()))
-        .toBe(true, "should be equal to today's date");
+      .withContext("should be equal to today's date").toBe(true);
   });
 
   it('should parse string according to given format', () => {
@@ -207,9 +208,9 @@ describe('MomentDateAdapter', () => {
     let d = adapter.parse('hello', 'MM/DD/YYYY');
     expect(d).not.toBeNull();
     expect(adapter.isDateInstance(d))
-        .toBe(true, 'Expected string to have been fed through Date.parse');
+      .withContext('Expected string to have been fed through Date.parse').toBe(true);
     expect(adapter.isValid(d as moment.Moment))
-        .toBe(false, 'Expected to parse as "invalid date" object');
+      .withContext('Expected to parse as "invalid date" object').toBe(false);
   });
 
   it('should format date according to given format', () => {
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index 917057d57fb2..3812c2844773 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -107,17 +107,17 @@ describe('MatAutocomplete', () => {
 
     it('should open the panel when the input is focused', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when input is focused.`);
+        .withContext(`Expected panel state to read open when input is focused.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('California');
     });
 
     it('should not open the panel on focus if the input is readonly', fakeAsync(() => {
@@ -125,12 +125,14 @@ describe('MatAutocomplete', () => {
       input.readOnly = true;
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel state to start out closed.').toBe(false);
       dispatchFakeEvent(input, 'focusin');
       flush();
 
       fixture.detectChanges();
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay closed.').toBe(false);
     }));
 
     it('should not open using the arrow keys when the input is readonly', fakeAsync(() => {
@@ -138,27 +140,31 @@ describe('MatAutocomplete', () => {
       input.readOnly = true;
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel state to start out closed.').toBe(false);
       dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
       flush();
 
       fixture.detectChanges();
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay closed.').toBe(false);
     }));
 
     it('should open the panel programmatically', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when opened programmatically.`);
+        .withContext(`Expected panel state to read open when opened programmatically.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when opened programmatically.`);
+        .withContext(`Expected panel to display when opened programmatically.`)
+        .toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to display when opened programmatically.`);
+        .withContext(`Expected panel to display when opened programmatically.`)
+        .toContain('California');
     });
 
     it('should show the panel when the first open is after the initial zone stabilization',
@@ -171,7 +177,7 @@ describe('MatAutocomplete', () => {
 
           Promise.resolve().then(() => {
             expect(fixture.componentInstance.panel.showPanel)
-                .toBe(true, `Expected panel to be visible.`);
+              .withContext(`Expected panel to be visible.`).toBe(true);
           });
         });
       }));
@@ -183,9 +189,9 @@ describe('MatAutocomplete', () => {
       dispatchFakeEvent(document, 'click');
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+        .withContext(`Expected clicking outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+        .withContext(`Expected clicking outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => {
@@ -195,9 +201,9 @@ describe('MatAutocomplete', () => {
       dispatchFakeEvent(document, 'auxclick');
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+        .withContext(`Expected clicking outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+        .withContext(`Expected clicking outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
@@ -207,9 +213,9 @@ describe('MatAutocomplete', () => {
       dispatchFakeEvent(document, 'touchend');
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected tapping outside the panel to set its state to closed.`);
+        .withContext(`Expected tapping outside the panel to set its state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected tapping outside the panel to close the panel.`);
+        .withContext(`Expected tapping outside the panel to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when an option is clicked', fakeAsync(() => {
@@ -222,9 +228,9 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking an option to set the panel state to closed.`);
+        .withContext(`Expected clicking an option to set the panel state to closed.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking an option to close the panel.`);
+        .withContext(`Expected clicking an option to close the panel.`).toEqual('');
     }));
 
     it('should close the panel when a newly created option is clicked', fakeAsync(() => {
@@ -254,9 +260,10 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected clicking a new option to set the panel state to closed.`);
+        .withContext(`Expected clicking a new option to set the panel state to closed.`)
+        .toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected clicking a new option to close the panel.`);
+        .withContext(`Expected clicking a new option to close the panel.`).toEqual('');
     }));
 
     it('should close the panel programmatically', () => {
@@ -267,9 +274,10 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected closing programmatically to set the panel state to closed.`);
+        .withContext(`Expected closing programmatically to set the panel state to closed.`)
+        .toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected closing programmatically to close the panel.`);
+        .withContext(`Expected closing programmatically to close the panel.`).toEqual('');
     });
 
     it('should not throw when attempting to close the panel of a destroyed autocomplete', () => {
@@ -289,7 +297,7 @@ describe('MatAutocomplete', () => {
       const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
 
       expect(panel.classList)
-          .toContain('mat-autocomplete-visible', `Expected panel to start out visible.`);
+        .withContext(`Expected panel to start out visible.`).toContain('mat-autocomplete-visible');
 
       // Filter down the option list such that no options match the value
       typeInElement(input, 'af');
@@ -298,13 +306,14 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(panel.classList)
-          .toContain('mat-autocomplete-hidden', `Expected panel to hide itself when empty.`);
+        .withContext(`Expected panel to hide itself when empty.`)
+        .toContain('mat-autocomplete-hidden');
     }));
 
     it('should keep the label floating until the panel closes', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to float as soon as panel opens.');
+        .withContext('Expected label to float as soon as panel opens.').toEqual('always');
 
       zone.simulateZoneExit();
       fixture.detectChanges();
@@ -315,19 +324,19 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('auto', 'Expected label to return to auto state after panel closes.');
+        .withContext('Expected label to return to auto state after panel closes.').toEqual('auto');
     }));
 
     it('should not open the panel when the `input` event is invoked on a non-focused input', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       input.value = 'Alabama';
       dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to stay closed.`);
+        .withContext(`Expected panel state to stay closed.`).toBe(false);
     });
 
    it('should not mess with label placement if set to never', fakeAsync(() => {
@@ -336,7 +345,7 @@ describe('MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('never', 'Expected label to stay static.');
+        .withContext('Expected label to stay static.').toEqual('never');
       flush();
       fixture.detectChanges();
 
@@ -346,7 +355,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('never', 'Expected label to stay in static state after close.');
+        .withContext('Expected label to stay in static state after close.').toEqual('never');
     }));
 
     it('should not mess with label placement if set to always', fakeAsync(() => {
@@ -355,7 +364,7 @@ describe('MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to stay elevated on open.');
+        .withContext('Expected label to stay elevated on open.').toEqual('always');
       flush();
       fixture.detectChanges();
 
@@ -365,7 +374,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.formField.floatLabel)
-          .toEqual('always', 'Expected label to stay elevated after close.');
+        .withContext('Expected label to stay elevated after close.').toEqual('always');
     }));
 
     it('should toggle the visibility when typing and closing the panel', fakeAsync(() => {
@@ -374,7 +383,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
-          .toContain('mat-autocomplete-visible', 'Expected panel to be visible.');
+        .withContext('Expected panel to be visible.').toContain('mat-autocomplete-visible');
 
       typeInElement(input, 'x');
       fixture.detectChanges();
@@ -382,7 +391,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
-          .toContain('mat-autocomplete-hidden', 'Expected panel to be hidden.');
+        .withContext('Expected panel to be hidden.').toContain('mat-autocomplete-hidden');
 
       fixture.componentInstance.trigger.closePanel();
       fixture.detectChanges();
@@ -397,7 +406,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
-          .toContain('mat-autocomplete-visible', 'Expected panel to be visible.');
+        .withContext('Expected panel to be visible.').toContain('mat-autocomplete-visible');
     }));
 
     it('should animate the label when the input is focused', () => {
@@ -497,7 +506,7 @@ describe('MatAutocomplete', () => {
 
     it('should not be able to open the panel if the autocomplete is disabled', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to start out closed.`);
+        .withContext(`Expected panel state to start out closed.`).toBe(false);
 
       fixture.componentInstance.autocompleteDisabled = true;
       fixture.detectChanges();
@@ -506,7 +515,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel to remain closed.`);
+        .withContext(`Expected panel to remain closed.`).toBe(false);
     });
 
     it('should continue to update the model if the autocomplete is disabled', () => {
@@ -540,13 +549,13 @@ describe('MatAutocomplete', () => {
        zone.simulateZoneExit();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to be opened on focus.');
+        .withContext('Expected panel to be opened on focus.').toBe(true);
 
        input.click();
        fixture.detectChanges();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+        .withContext('Expected panel to remain opened after clicking on the input.').toBe(true);
      }));
 
   it('should not close the panel when clicking on the input inside shadow DOM', fakeAsync(() => {
@@ -564,13 +573,13 @@ describe('MatAutocomplete', () => {
        zone.simulateZoneExit();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to be opened on focus.');
+        .withContext('Expected panel to be opened on focus.').toBe(true);
 
        input.click();
        fixture.detectChanges();
 
        expect(fixture.componentInstance.trigger.panelOpen)
-           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+        .withContext('Expected panel to remain opened after clicking on the input.').toBe(true);
      }));
 
   it('should have the correct text direction in RTL', () => {
@@ -652,13 +661,13 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual('a', 'Expected control value to be updated as user types.');
+        .withContext('Expected control value to be updated as user types.').toEqual('a');
 
       typeInElement(input, 'l');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual('al', 'Expected control value to be updated as user types.');
+        .withContext('Expected control value to be updated as user types.').toEqual('al');
     });
 
     it('should update control value when autofilling', () => {
@@ -670,7 +679,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toBe('Alabama', 'Expected value to be propagated to the form control.');
+        .withContext('Expected value to be propagated to the form control.').toBe('Alabama');
     });
 
     it('should update control value when option is selected with option value', fakeAsync(() => {
@@ -684,8 +693,8 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.value)
-          .toEqual({code: 'CA', name: 'California'},
-              'Expected control value to equal the selected option value.');
+        .withContext('Expected control value to equal the selected option value.')
+        .toEqual({ code: 'CA', name: 'California' });
     }));
 
     it('should update the control back to a string if user types after an option is selected',
@@ -705,7 +714,7 @@ describe('MatAutocomplete', () => {
         tick();
 
         expect(fixture.componentInstance.stateCtrl.value)
-            .toEqual('Californi', 'Expected control value to revert back to string.');
+          .withContext('Expected control value to revert back to string.').toEqual('Californi');
       }));
 
     it('should fill the text field with display value when an option is selected', fakeAsync(() => {
@@ -719,7 +728,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.value)
-          .toContain('California', `Expected text field to fill with selected value.`);
+        .withContext(`Expected text field to fill with selected value.`).toContain('California');
     }));
 
     it('should fill the text field with value if displayWith is not set', fakeAsync(() => {
@@ -737,7 +746,8 @@ describe('MatAutocomplete', () => {
 
       fixture.detectChanges();
       expect(input.value)
-          .toContain('test value', `Expected input to fall back to selected option's value.`);
+        .withContext(`Expected input to fall back to selected option's value.`)
+        .toContain('test value');
     }));
 
     it('should fill the text field correctly if value is set to obj programmatically',
@@ -748,7 +758,8 @@ describe('MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(input.value)
-            .toContain('Alabama', `Expected input to fill with matching option's viewValue.`);
+          .withContext(`Expected input to fill with matching option's viewValue.`)
+          .toContain('Alabama');
       }));
 
     it('should clear the text field if value is reset programmatically', fakeAsync(() => {
@@ -762,7 +773,8 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(input.value).toEqual('', `Expected input value to be empty after reset.`);
+      expect(input.value)
+        .withContext(`Expected input value to be empty after reset.`).toEqual('');
     }));
 
     it('should disable input in view when disabled programmatically', () => {
@@ -770,33 +782,35 @@ describe('MatAutocomplete', () => {
           fixture.debugElement.query(By.css('.mat-form-field'))!.nativeElement;
 
       expect(input.disabled)
-          .toBe(false, `Expected input to start out enabled in view.`);
+        .withContext(`Expected input to start out enabled in view.`).toBe(false);
       expect(formFieldElement.classList.contains('mat-form-field-disabled'))
-          .toBe(false, `Expected input underline to start out with normal styles.`);
+        .withContext(`Expected input underline to start out with normal styles.`).toBe(false);
 
       fixture.componentInstance.stateCtrl.disable();
       fixture.detectChanges();
 
       expect(input.disabled)
-          .toBe(true, `Expected input to be disabled in view when disabled programmatically.`);
+        .withContext(`Expected input to be disabled in view when disabled programmatically.`)
+        .toBe(true);
       expect(formFieldElement.classList.contains('mat-form-field-disabled'))
-          .toBe(true, `Expected input underline to display disabled styles.`);
+        .withContext(`Expected input underline to display disabled styles.`).toBe(true);
     });
 
     it('should mark the autocomplete control as dirty as user types', () => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       typeInElement(input, 'a');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when the user types into the input.`);
+        .withContext(`Expected control to become dirty when the user types into the input.`)
+        .toBe(true);
     });
 
     it('should mark the autocomplete control as dirty when an option is selected', fakeAsync(() => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
@@ -808,31 +822,32 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when an option was selected.`);
+        .withContext(`Expected control to become dirty when an option was selected.`).toBe(true);
     }));
 
     it('should not mark the control dirty when the value is set programmatically', () => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.stateCtrl.setValue('AL');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
+        .withContext(`Expected control to stay pristine if value is set programmatically.`)
+        .toBe(false);
     });
 
     it('should mark the autocomplete control as touched on blur', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(false, `Expected control to start out untouched.`);
+        .withContext(`Expected control to start out untouched.`).toBe(false);
 
       dispatchFakeEvent(input, 'blur');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(true, `Expected control to become touched on blur.`);
+        .withContext(`Expected control to become touched on blur.`).toBe(true);
     });
 
     it('should disable the input when used with a value accessor and without `matInput`', () => {
@@ -886,11 +901,13 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to stay open when DOWN key is pressed.`);
+        .withContext(`Expected panel state to stay open when DOWN key is pressed.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to keep displaying when DOWN key is pressed.`);
+        .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
+        .toContain('Alabama');
       expect(overlayContainerElement.textContent)
-          .toContain('California', `Expected panel to keep displaying when DOWN key is pressed.`);
+        .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
+        .toContain('California');
     });
 
     it('should set the active item to the first option when DOWN key is pressed', () => {
@@ -899,13 +916,13 @@ describe('MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.panelOpen)
-          .toBe(true, 'Expected first down press to open the pane.');
+        .withContext('Expected first down press to open the pane.').toBe(true);
 
       componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-active');
       expect(optionEls[1].classList).not.toContain('mat-active');
 
@@ -913,7 +930,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.toArray()[1])
-          .toBe(true, 'Expected second option to be active.');
+        .withContext('Expected second option to be active.').toBe(true);
       expect(optionEls[0].classList).not.toContain('mat-active');
       expect(optionEls[1].classList).toContain('mat-active');
     });
@@ -924,13 +941,13 @@ describe('MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.panelOpen)
-          .toBe(true, 'Expected first up press to open the pane.');
+        .withContext('Expected first up press to open the pane.').toBe(true);
 
       componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.last)
-          .toBe(true, 'Expected last option to be active.');
+        .withContext('Expected last option to be active.').toBe(true);
       expect(optionEls[10].classList).toContain('mat-active');
       expect(optionEls[0].classList).not.toContain('mat-active');
 
@@ -938,7 +955,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-active');
     });
 
@@ -963,7 +980,7 @@ describe('MatAutocomplete', () => {
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
       expect(componentInstance.trigger.activeOption === componentInstance.options.first)
-          .toBe(true, 'Expected first option to be active.');
+        .withContext('Expected first option to be active.').toBe(true);
       expect(optionEls[0].classList).toContain('mat-active');
       expect(optionEls[1].classList).not.toContain('mat-active');
     });
@@ -976,7 +993,8 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
       expect(input.value)
-          .toContain('Alabama', `Expected text field to fill with selected value on ENTER.`);
+        .withContext(`Expected text field to fill with selected value on ENTER.`)
+        .toContain('Alabama');
     }));
 
     it('should prevent the default enter key action', fakeAsync(() => {
@@ -986,7 +1004,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
 
       expect(ENTER_EVENT.defaultPrevented)
-          .toBe(true, 'Expected the default action to have been prevented.');
+        .withContext('Expected the default action to have been prevented.').toBe(true);
     }));
 
     it('should not prevent the default enter action for a closed panel after a user action', () => {
@@ -997,7 +1015,8 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
 
-      expect(ENTER_EVENT.defaultPrevented).toBe(false, 'Default action should not be prevented.');
+      expect(ENTER_EVENT.defaultPrevented)
+        .withContext('Default action should not be prevented.').toBe(false);
     });
 
     it('should fill the text field, not select an option, when SPACE is entered', () => {
@@ -1016,7 +1035,7 @@ describe('MatAutocomplete', () => {
 
     it('should mark the control dirty when selecting an option from the keyboard', fakeAsync(() => {
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toBe(false);
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       flush();
@@ -1024,7 +1043,8 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.dirty)
-          .toBe(true, `Expected control to become dirty when option was selected by ENTER.`);
+        .withContext(`Expected control to become dirty when option was selected by ENTER.`)
+        .toBe(true);
     }));
 
     it('should open the panel again when typing after making a selection', fakeAsync(() => {
@@ -1034,9 +1054,9 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(false, `Expected panel state to read closed after ENTER key.`);
+        .withContext(`Expected panel state to read closed after ENTER key.`).toBe(false);
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected panel to close after ENTER key.`);
+        .withContext(`Expected panel to close after ENTER key.`).toEqual('');
 
       dispatchFakeEvent(input, 'focusin');
       clearElement(input);
@@ -1045,9 +1065,9 @@ describe('MatAutocomplete', () => {
       tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when typing in input.`);
+        .withContext(`Expected panel state to read open when typing in input.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('Alabama', `Expected panel to display when typing in input.`);
+        .withContext(`Expected panel to display when typing in input.`).toContain('Alabama');
     }));
 
     it('should not open the panel if the `input` event was dispatched with changing the value',
@@ -1059,12 +1079,14 @@ describe('MatAutocomplete', () => {
         fixture.detectChanges();
         tick();
 
-        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to be open.').toBe(true);
 
         trigger.closePanel();
         fixture.detectChanges();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to be closed.').toBe(false);
 
         // Dispatch the event without actually changing the value
         // to simulate what happen in some cases on IE.
@@ -1072,7 +1094,8 @@ describe('MatAutocomplete', () => {
         fixture.detectChanges();
         tick();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+        expect(trigger.panelOpen)
+          .withContext('Expected panel to stay closed.').toBe(false);
       }));
 
     it('should scroll to active options below the fold', () => {
@@ -1082,14 +1105,16 @@ describe('MatAutocomplete', () => {
 
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
       // Expect option bottom minus the panel height (288 - 256 = 32)
-      expect(scrollContainer.scrollTop)
-          .toEqual(32, `Expected panel to reveal the sixth option.`);
+      // Expect option bottom minus the panel height (288 - 256 = 32)
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel to reveal the sixth option.`).toEqual(32);
     });
 
     it('should scroll to active options below if the option height is variable', () => {
@@ -1107,14 +1132,16 @@ describe('MatAutocomplete', () => {
 
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
+      // Expect option bottom minus the panel height (336 - 256 = 80)
       // Expect option bottom minus the panel height (336 - 256 = 80)
       expect(scrollContainer.scrollTop)
-          .toEqual(80, `Expected panel to reveal the sixth option.`);
+        .withContext(`Expected panel to reveal the sixth option.`).toEqual(80);
     });
 
     it('should scroll to active options on UP arrow', () => {
@@ -1124,7 +1151,9 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       // Expect option bottom minus the panel height (528 - 256 = 272)
-      expect(scrollContainer.scrollTop).toEqual(272, `Expected panel to reveal last option.`);
+      // Expect option bottom minus the panel height (528 - 256 = 272)
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel to reveal last option.`).toEqual(272);
     });
 
     it('should not scroll to active options that are fully in the panel', () => {
@@ -1134,21 +1163,25 @@ describe('MatAutocomplete', () => {
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 6th option active, below the fold.
       [1, 2, 3, 4, 5].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
 
+      // Expect option bottom minus the panel height (288 - 256 = 32)
       // Expect option bottom minus the panel height (288 - 256 = 32)
       expect(scrollContainer.scrollTop)
-          .toEqual(32, `Expected panel to reveal the sixth option.`);
+        .withContext(`Expected panel to reveal the sixth option.`).toEqual(32);
 
       // These up arrows will set the 2nd option active
       [4, 3, 2, 1].forEach(() => trigger._handleKeydown(UP_ARROW_EVENT));
 
+      // Expect no scrolling to have occurred. Still showing bottom of 6th option.
       // Expect no scrolling to have occurred. Still showing bottom of 6th option.
       expect(scrollContainer.scrollTop)
-          .toEqual(32, `Expected panel not to scroll up since sixth option still fully visible.`);
+        .withContext(`Expected panel not to scroll up since sixth option still fully visible.`)
+        .toEqual(32);
     });
 
     it('should scroll to active options that are above the panel', () => {
@@ -1158,7 +1191,8 @@ describe('MatAutocomplete', () => {
       trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
-      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+      expect(scrollContainer.scrollTop)
+        .withContext(`Expected panel not to scroll.`).toEqual(0);
 
       // These down arrows will set the 7th option active, below the fold.
       [1, 2, 3, 4, 5, 6].forEach(() => trigger._handleKeydown(DOWN_ARROW_EVENT));
@@ -1166,9 +1200,10 @@ describe('MatAutocomplete', () => {
       // These up arrows will set the 2nd option active
       [5, 4, 3, 2, 1].forEach(() => trigger._handleKeydown(UP_ARROW_EVENT));
 
+      // Expect to show the top of the 2nd option at the top of the panel
       // Expect to show the top of the 2nd option at the top of the panel
       expect(scrollContainer.scrollTop)
-          .toEqual(48, `Expected panel to scroll up when option is above panel.`);
+        .withContext(`Expected panel to scroll up when option is above panel.`).toEqual(48);
     });
 
     it('should close the panel when pressing escape', fakeAsync(() => {
@@ -1178,14 +1213,18 @@ describe('MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
     }));
 
     it('should prevent the default action when pressing escape', fakeAsync(() => {
@@ -1202,15 +1241,20 @@ describe('MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {alt: true});
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
-      expect(event.defaultPrevented).toBe(false, 'Expected default action not to be prevented.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to stay open.').toBe(true);
+      expect(event.defaultPrevented)
+        .withContext('Expected default action not to be prevented.').toBe(false);
     }));
 
     it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
@@ -1222,14 +1266,18 @@ describe('MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       dispatchEvent(document.body, upArrowEvent);
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(document.activeElement)
+        .withContext('Expected input to continue to be focused.').toBe(input);
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
       expect(upArrowEvent.stopPropagation).toHaveBeenCalled();
     }));
 
@@ -1241,13 +1289,15 @@ describe('MatAutocomplete', () => {
       flush();
 
       expect(overlayContainerElement.querySelector('.mat-autocomplete-panel'))
-          .toBeTruthy('Expected panel to be rendered.');
+        .withContext('Expected panel to be rendered.')
+        .toBeTruthy();
 
       dispatchKeyboardEvent(input, 'keydown', TAB);
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelector('.mat-autocomplete-panel'))
-          .toBeFalsy('Expected panel to be removed.');
+        .withContext('Expected panel to be removed.')
+        .toBeFalsy();
     }));
 
     it('should reset the active option when closing with the escape key', fakeAsync(() => {
@@ -1257,8 +1307,10 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active option.').toBe(false);
 
       // Press the down arrow a few times.
       [1, 2, 3].forEach(() => {
@@ -1269,12 +1321,16 @@ describe('MatAutocomplete', () => {
 
       // Note that this casts to a boolean, in order to prevent Jasmine
       // from crashing when trying to stringify the option if the test fails.
-      expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+      // Note that this casts to a boolean, in order to prevent Jasmine
+      // from crashing when trying to stringify the option if the test fails.
+      expect(!!trigger.activeOption)
+        .withContext('Expected to find an active option.').toBe(true);
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       tick();
 
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active options.').toBe(false);
     }));
 
     it('should reset the active option when closing by selecting with enter', fakeAsync(() => {
@@ -1284,8 +1340,10 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active option.').toBe(false);
 
       // Press the down arrow a few times.
       [1, 2, 3].forEach(() => {
@@ -1296,12 +1354,16 @@ describe('MatAutocomplete', () => {
 
       // Note that this casts to a boolean, in order to prevent Jasmine
       // from crashing when trying to stringify the option if the test fails.
-      expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+      // Note that this casts to a boolean, in order to prevent Jasmine
+      // from crashing when trying to stringify the option if the test fails.
+      expect(!!trigger.activeOption)
+        .withContext('Expected to find an active option.').toBe(true);
 
       trigger._handleKeydown(ENTER_EVENT);
       tick();
 
-      expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+      expect(!!trigger.activeOption)
+        .withContext('Expected no active options.').toBe(false);
     }));
 
   });
@@ -1328,7 +1390,8 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
-      expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+      expect(container.scrollTop)
+        .withContext('Expected the panel not to scroll.').toBe(0);
 
       // Press the down arrow five times.
       [1, 2, 3, 4, 5].forEach(() => {
@@ -1338,8 +1401,10 @@ describe('MatAutocomplete', () => {
 
       // <option bottom> - <panel height> + <2x group labels> = 128
       // 288 - 256 + 96 = 128
-      expect(container.scrollTop)
-          .toBe(128, 'Expected panel to reveal the sixth option.');
+      // <option bottom> - <panel height> + <2x group labels> = 128
+// 288 - 256 + 96 = 128
+expect(container.scrollTop)
+  .withContext('Expected panel to reveal the sixth option.').toBe(128);
     }));
 
     it('should scroll to active options on UP arrow', fakeAsync(() => {
@@ -1358,7 +1423,10 @@ describe('MatAutocomplete', () => {
 
       // <option bottom> - <panel height> + <3x group label> = 464
       // 576 - 256 + 144 = 464
-      expect(container.scrollTop).toBe(464, 'Expected panel to reveal last option.');
+      // <option bottom> - <panel height> + <3x group label> = 464
+      // 576 - 256 + 144 = 464
+      expect(container.scrollTop)
+        .withContext('Expected panel to reveal last option.').toBe(464);
     }));
 
     it('should scroll to active options that are above the panel', fakeAsync(() => {
@@ -1374,7 +1442,8 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
-      expect(container.scrollTop).toBe(0, 'Expected panel not to scroll.');
+      expect(container.scrollTop)
+        .withContext('Expected panel not to scroll.').toBe(0);
 
       // These down arrows will set the 7th option active, below the fold.
       [1, 2, 3, 4, 5, 6].forEach(() => {
@@ -1390,8 +1459,10 @@ describe('MatAutocomplete', () => {
 
       // Expect to show the top of the 2nd option at the top of the panel.
       // It is offset by 48, because there's a group label above it.
-      expect(container.scrollTop)
-          .toBe(96, 'Expected panel to scroll up when option is above panel.');
+      // Expect to show the top of the 2nd option at the top of the panel.
+// It is offset by 48, because there's a group label above it.
+expect(container.scrollTop)
+  .withContext('Expected panel to scroll up when option is above panel.').toBe(96);
     }));
 
     it('should scroll back to the top when reaching the first option with preceding group label',
@@ -1408,7 +1479,8 @@ describe('MatAutocomplete', () => {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         tick();
         fixture.detectChanges();
-        expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+        expect(container.scrollTop)
+          .withContext('Expected the panel not to scroll.').toBe(0);
 
         // Press the down arrow five times.
         [1, 2, 3, 4, 5].forEach(() => {
@@ -1422,7 +1494,8 @@ describe('MatAutocomplete', () => {
           tick();
         });
 
-        expect(container.scrollTop).toBe(0, 'Expected panel to be scrolled to the top.');
+        expect(container.scrollTop)
+          .withContext('Expected panel to be scrolled to the top.').toBe(0);
       }));
 
       it('should scroll to active option when group is indirect descendant', fakeAsync(() => {
@@ -1438,7 +1511,8 @@ describe('MatAutocomplete', () => {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
         tick();
         fixture.detectChanges();
-        expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+        expect(container.scrollTop)
+          .withContext('Expected the panel not to scroll.').toBe(0);
 
         // Press the down arrow five times.
         [1, 2, 3, 4, 5].forEach(() => {
@@ -1448,8 +1522,10 @@ describe('MatAutocomplete', () => {
 
         // <option bottom> - <panel height> + <2x group labels> = 128
         // 288 - 256 + 96 = 128
-        expect(container.scrollTop)
-            .toBe(128, 'Expected panel to reveal the sixth option.');
+        // <option bottom> - <panel height> + <2x group labels> = 128
+// 288 - 256 + 96 = 128
+expect(container.scrollTop)
+  .withContext('Expected panel to reveal the sixth option.').toBe(128);
       }));
   });
 
@@ -1466,7 +1542,7 @@ describe('MatAutocomplete', () => {
 
     it('should set role of input to combobox', () => {
       expect(input.getAttribute('role'))
-          .toEqual('combobox', 'Expected role of input to be combobox.');
+        .withContext('Expected role of input to be combobox.').toEqual('combobox');
     });
 
     it('should set role of autocomplete panel to listbox', () => {
@@ -1476,7 +1552,7 @@ describe('MatAutocomplete', () => {
       const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
 
       expect(panel.getAttribute('role'))
-          .toEqual('listbox', 'Expected role of the panel to be listbox.');
+        .withContext('Expected role of the panel to be listbox.').toEqual('listbox');
     });
 
     it('should point the aria-labelledby of the panel to the field label', () => {
@@ -1544,7 +1620,7 @@ describe('MatAutocomplete', () => {
 
     it('should set aria-autocomplete to list', () => {
       expect(input.getAttribute('aria-autocomplete'))
-          .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
+        .withContext('Expected aria-autocomplete attribute to equal list.').toEqual('list');
     });
 
     it('should set aria-activedescendant based on the active option', fakeAsync(() => {
@@ -1552,7 +1628,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.hasAttribute('aria-activedescendant'))
-          .toBe(false, 'Expected aria-activedescendant to be absent if no active item.');
+        .withContext('Expected aria-activedescendant to be absent if no active item.').toBe(false);
 
       const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
 
@@ -1561,40 +1637,40 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-activedescendant'))
-          .toEqual(fixture.componentInstance.options.first.id,
-              'Expected aria-activedescendant to match the active item after 1 down arrow.');
+        .withContext('Expected aria-activedescendant to match the active item after 1 down arrow.')
+        .toEqual(fixture.componentInstance.options.first.id);
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-activedescendant'))
-          .toEqual(fixture.componentInstance.options.toArray()[1].id,
-              'Expected aria-activedescendant to match the active item after 2 down arrows.');
+        .withContext('Expected aria-activedescendant to match the active item after 2 down arrows.')
+        .toEqual(fixture.componentInstance.options.toArray()[1].id);
     }));
 
     it('should set aria-expanded based on whether the panel is open', () => {
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false while panel is closed.');
+        .withContext('Expected aria-expanded to be false while panel is closed.').toBe('false');
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+        .withContext('Expected aria-expanded to be true while panel is open.').toBe('true');
 
       fixture.componentInstance.trigger.closePanel();
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false when panel closes again.');
+        .withContext('Expected aria-expanded to be false when panel closes again.').toBe('false');
     });
 
     it('should set aria-expanded properly when the panel is hidden', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       expect(input.getAttribute('aria-expanded'))
-          .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+        .withContext('Expected aria-expanded to be true while panel is open.').toBe('true');
 
       typeInElement(input, 'zz');
       fixture.detectChanges();
@@ -1602,7 +1678,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-expanded'))
-          .toBe('false', 'Expected aria-expanded to be false when panel hides itself.');
+        .withContext('Expected aria-expanded to be false when panel hides itself.').toBe('false');
     }));
 
     it('should set aria-owns based on the attached autocomplete', () => {
@@ -1612,7 +1688,8 @@ describe('MatAutocomplete', () => {
       const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
 
       expect(input.getAttribute('aria-owns'))
-          .toBe(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.');
+        .withContext('Expected aria-owns to match attached autocomplete.')
+        .toBe(panel.getAttribute('id'));
     });
 
     it('should not set aria-owns while the autocomplete is closed', () => {
@@ -1636,7 +1713,8 @@ describe('MatAutocomplete', () => {
       option.click();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(input, 'Expected focus to be restored to the input.');
+      expect(document.activeElement)
+        .withContext('Expected focus to be restored to the input.').toBe(input);
     }));
 
     it('should remove autocomplete-specific aria attributes when autocomplete is disabled', () => {
@@ -1668,7 +1746,8 @@ describe('MatAutocomplete', () => {
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
-          .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
+        .withContext(`Expected panel top to match input bottom by default.`)
+        .toEqual(Math.floor(panelTop));
       expect(panel.classList).not.toContain('mat-autocomplete-panel-above');
     }));
 
@@ -1698,8 +1777,9 @@ describe('MatAutocomplete', () => {
       const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
       const panelTop = panel.getBoundingClientRect().top;
 
-      expect(Math.floor(inputBottom)).toEqual(Math.floor(panelTop),
-          'Expected panel top to match input bottom after scrolling.');
+      expect(Math.floor(inputBottom))
+        .withContext('Expected panel top to match input bottom after scrolling.')
+        .toEqual(Math.floor(panelTop));
 
       document.body.removeChild(spacer);
       window.scroll(0, 0);
@@ -1725,7 +1805,8 @@ describe('MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+        .withContext(`Expected panel to fall back to above position.`)
+        .toEqual(Math.floor(panelBottom));
 
       expect(panel.classList).toContain('mat-autocomplete-panel-above');
     }));
@@ -1797,7 +1878,8 @@ describe('MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), `Expected panel to stay aligned after filtering.`);
+        .withContext(`Expected panel to stay aligned after filtering.`)
+        .toEqual(Math.floor(panelBottom));
     }));
 
     it('should fall back to above position when requested if options are added while ' +
@@ -1825,8 +1907,8 @@ describe('MatAutocomplete', () => {
       let panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(panelRect.top))
-        .toBe(Math.floor(inputRect.bottom),
-          `Expected panel top to be below input before repositioning.`);
+        .withContext(`Expected panel top to be below input before repositioning.`)
+        .toBe(Math.floor(inputRect.bottom));
 
       for (let i = 0; i < 20; i++) {
         fixture.componentInstance.filteredStates.push({code: 'FK', name: 'Fake State'});
@@ -1840,8 +1922,8 @@ describe('MatAutocomplete', () => {
       panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(panelRect.bottom))
-        .toBe(Math.floor(inputRect.top),
-          `Expected panel to fall back to above position after repositioning.`);
+        .withContext(`Expected panel to fall back to above position after repositioning.`)
+        .toBe(Math.floor(inputRect.top));
       tick();
     }));
 
@@ -1873,7 +1955,7 @@ describe('MatAutocomplete', () => {
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
-          .toEqual(Math.floor(panelTop), 'Expected panel to be below the input.');
+        .withContext('Expected panel to be below the input.').toEqual(Math.floor(panelTop));
 
       expect(panel.classList).not.toContain('mat-autocomplete-panel-above');
     }));
@@ -1899,7 +1981,7 @@ describe('MatAutocomplete', () => {
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), 'Expected panel to be above the input.');
+        .withContext('Expected panel to be above the input.').toEqual(Math.floor(panelBottom));
 
       expect(panel.classList).toContain('mat-autocomplete-panel-above');
     }));
@@ -1926,7 +2008,7 @@ describe('MatAutocomplete', () => {
       let panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.top))
-          .toEqual(Math.floor(panelRect.bottom), 'Expected panel to be above the input.');
+        .withContext('Expected panel to be above the input.').toEqual(Math.floor(panelRect.bottom));
       expect(panel.classList).toContain('mat-autocomplete-panel-above');
 
       fixture.componentInstance.trigger.closePanel();
@@ -1941,7 +2023,7 @@ describe('MatAutocomplete', () => {
       panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.bottom))
-          .toEqual(Math.floor(panelRect.top), 'Expected panel to be below the input.');
+        .withContext('Expected panel to be below the input.').toEqual(Math.floor(panelRect.top));
       expect(panel.classList).not.toContain('mat-autocomplete-panel-above');
     }));
 
@@ -1968,7 +2050,7 @@ describe('MatAutocomplete', () => {
 
       const componentOptions = fixture.componentInstance.options.toArray();
       expect(componentOptions[0].selected)
-          .toBe(true, `Clicked option should be selected.`);
+        .withContext(`Clicked option should be selected.`).toBe(true);
 
       options =
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
@@ -1976,9 +2058,9 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(componentOptions[0].selected)
-          .toBe(false, `Previous option should not be selected.`);
+        .withContext(`Previous option should not be selected.`).toBe(false);
       expect(componentOptions[1].selected)
-          .toBe(true, `New Clicked option should be selected.`);
+        .withContext(`New Clicked option should be selected.`).toBe(true);
     }));
 
     it('should call deselect only on the previous selected option', fakeAsync(() => {
@@ -1996,7 +2078,7 @@ describe('MatAutocomplete', () => {
       componentOptions.forEach(option => spyOn(option, 'deselect'));
 
       expect(componentOptions[0].selected)
-          .toBe(true, `Clicked option should be selected.`);
+        .withContext(`Clicked option should be selected.`).toBe(true);
 
       options =
           overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
@@ -2015,7 +2097,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mat-active', 'Expected first option to be highlighted.');
+        .withContext('Expected first option to be highlighted.').toContain('mat-active');
     }));
 
     it('should skip to the next enabled option if the first one is disabled ' +
@@ -2030,7 +2112,7 @@ describe('MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
-            .toContain('mat-active', 'Expected third option to be highlighted.');
+          .withContext('Expected third option to be highlighted.').toContain('mat-active');
       }));
 
     it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption',
@@ -2038,7 +2120,7 @@ describe('MatAutocomplete', () => {
         const input: HTMLElement = fixture.nativeElement.querySelector('input');
 
         expect(input.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no active descendant on init.');
+          .withContext('Expected no active descendant on init.').toBe(false);
 
         fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
         fixture.componentInstance.trigger.openPanel();
@@ -2047,13 +2129,14 @@ describe('MatAutocomplete', () => {
         fixture.detectChanges();
 
         expect(input.getAttribute('aria-activedescendant'))
-            .toBeTruthy('Expected active descendant while open.');
+          .withContext('Expected active descendant while open.')
+          .toBeTruthy();
 
         fixture.componentInstance.trigger.closePanel();
         fixture.detectChanges();
 
         expect(input.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no active descendant when closed.');
+          .withContext('Expected no active descendant when closed.').toBe(false);
       }));
 
     it('should be able to configure preselecting the first option globally', fakeAsync(() => {
@@ -2071,7 +2154,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mat-active', 'Expected first option to be highlighted.');
+        .withContext('Expected first option to be highlighted.').toContain('mat-active');
     }));
 
     it('should handle `optionSelections` being accessed too early', fakeAsync(() => {
@@ -2120,8 +2203,9 @@ describe('MatAutocomplete', () => {
       const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
-      expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop),
-          `Expected panel top to match input bottom when there is only one option.`);
+      expect(Math.floor(inputBottom))
+        .withContext(`Expected panel top to match input bottom when there is only one option.`)
+        .toBe(Math.floor(panelTop));
 
       clearElement(input);
       fixture.detectChanges();
@@ -2131,8 +2215,9 @@ describe('MatAutocomplete', () => {
       const inputTop = inputReference.getBoundingClientRect().top;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
-      expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom),
-          `Expected panel switch to the above position if the options no longer fit.`);
+      expect(Math.floor(inputTop))
+        .withContext(`Expected panel switch to the above position if the options no longer fit.`)
+        .toBe(Math.floor(panelBottom));
     }));
 
   });
@@ -2302,11 +2387,11 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.trigger.panelOpen)
-          .toBe(true, `Expected panel state to read open when input is focused.`);
+        .withContext(`Expected panel state to read open when input is focused.`).toBe(true);
       expect(overlayContainerElement.textContent)
-          .toContain('One', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('One');
       expect(overlayContainerElement.textContent)
-          .toContain('Two', `Expected panel to display when input is focused.`);
+        .withContext(`Expected panel to display when input is focused.`).toContain('Two');
     });
 
     it('should filter properly with ngIf after setting the active item', () => {
@@ -2424,12 +2509,14 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       zone.simulateZoneExit();
 
-      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be open.').toBe(true);
 
       scrolledSubject.next();
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      expect(trigger.panelOpen)
+        .withContext('Expected panel to be closed.').toBe(false);
     }));
 
     it('should handle autocomplete being attached to number inputs', fakeAsync(() => {
@@ -2519,12 +2606,14 @@ describe('MatAutocomplete', () => {
     input.focus();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to be open.').toBe(true);
 
     trigger.closePanel();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to be closed.').toBe(false);
 
     // Simulate the user going to a different tab.
     dispatchFakeEvent(window, 'blur');
@@ -2536,7 +2625,8 @@ describe('MatAutocomplete', () => {
     input.focus();
     fixture.detectChanges();
 
-    expect(trigger.panelOpen).toBe(false, 'Expected panel to remain closed.');
+    expect(trigger.panelOpen)
+      .withContext('Expected panel to remain closed.').toBe(false);
   });
 
   it('should update the panel width if the window is resized', fakeAsync(() => {
@@ -2622,7 +2712,8 @@ describe('MatAutocomplete', () => {
         const visibleClass = 'mat-autocomplete-visible';
 
         fixture.detectChanges();
-        expect(panel.classList).toContain(visibleClass, `Expected panel to be visible.`);
+        expect(panel.classList)
+          .withContext(`Expected panel to be visible.`).toContain(visibleClass);
       });
     }));
 
@@ -2721,8 +2812,9 @@ describe('MatAutocomplete', () => {
         overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
 
-    expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
-        'Expected autocomplete panel to align with the bottom of the new origin.');
+    expect(Math.floor(overlayRect.top))
+      .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
+      .toBe(Math.floor(originRect.bottom));
   });
 
   it('should be able to change the origin after the panel has been opened', () => {
@@ -2747,8 +2839,9 @@ describe('MatAutocomplete', () => {
         overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
 
-    expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
-        'Expected autocomplete panel to align with the bottom of the new origin.');
+    expect(Math.floor(overlayRect.top))
+      .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
+      .toBe(Math.floor(originRect.bottom));
   });
 
   it('should be able to re-type the same value when it is reset while open', fakeAsync(() => {
@@ -2762,19 +2855,22 @@ describe('MatAutocomplete', () => {
     tick();
     fixture.detectChanges();
 
-    expect(formControl.value).toBe('Cal', 'Expected initial value to be propagated to model');
+    expect(formControl.value)
+      .withContext('Expected initial value to be propagated to model').toBe('Cal');
 
     formControl.setValue('');
     fixture.detectChanges();
 
-    expect(input.value).toBe('', 'Expected input value to reset when model is reset');
+    expect(input.value)
+      .withContext('Expected input value to reset when model is reset').toBe('');
 
     typeInElement(input, 'Cal');
     fixture.detectChanges();
     tick();
     fixture.detectChanges();
 
-    expect(formControl.value).toBe('Cal', 'Expected new value to be propagated to model');
+    expect(formControl.value)
+      .withContext('Expected new value to be propagated to model').toBe('Cal');
   }));
 
   it('should not close when clicking inside alternate origin', () => {
diff --git a/src/material/bottom-sheet/bottom-sheet.spec.ts b/src/material/bottom-sheet/bottom-sheet.spec.ts
index 1ff5c44823ec..58ba0fd9bd89 100644
--- a/src/material/bottom-sheet/bottom-sheet.spec.ts
+++ b/src/material/bottom-sheet/bottom-sheet.spec.ts
@@ -336,7 +336,7 @@ describe('MatBottomSheet', () => {
     // Wait for the open animation to finish.
     flush();
     expect(bottomSheetRef.containerInstance._animationState)
-        .toBe('visible', `Expected the animation state would be 'visible'.`);
+      .withContext(`Expected the animation state would be 'visible'.`).toBe('visible');
   }));
 
   it('should remove past bottom sheets when opening new ones', fakeAsync(() => {
@@ -603,8 +603,9 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement!.tagName).toBe('MAT-BOTTOM-SHEET-CONTAINER',
-          'Expected bottom sheet container to be focused.');
+      expect(document.activeElement!.tagName)
+        .withContext('Expected bottom sheet container to be focused.')
+        .toBe('MAT-BOTTOM-SHEET-CONTAINER');
     }));
 
     it('should create a focus trap if autoFocus is disabled', fakeAsync(() => {
@@ -632,7 +633,8 @@ describe('MatBottomSheet', () => {
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-        .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+        .withContext('Expected first tabbable element (input) in the dialog to be focused.')
+        .toBe('INPUT');
     }));
 
     it('should focus the bottom sheet element on open when autoFocus is set to ' +
@@ -647,7 +649,8 @@ describe('MatBottomSheet', () => {
       let container =
         overlayContainerElement.querySelector('.mat-bottom-sheet-container') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected container to be focused on open').toBe(container);
     }));
 
     it('should focus the bottom sheet element on open when autoFocus is set to ' +
@@ -664,7 +667,7 @@ describe('MatBottomSheet', () => {
         overlayContainerElement.querySelector('h1[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to be focused on open');
+        .withContext('Expected first header to be focused on open').toBe(firstHeader);
     }));
 
     it('should focus the first element that matches the css selector on open when ' +
@@ -681,7 +684,7 @@ describe('MatBottomSheet', () => {
       overlayContainerElement.querySelector('p[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstParagraph, 'Expected first paragraph to be focused on open');
+        .withContext('Expected first paragraph to be focused on open').toBe(firstParagraph);
     }));
 
     it('should re-focus trigger element when bottom sheet closes', fakeAsync(() => {
@@ -707,8 +710,9 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       tick(500);
 
-      expect(document.activeElement!.id).toBe('bottom-sheet-trigger',
-          'Expected that the trigger was refocused after the sheet is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the sheet is closed.')
+        .toBe('bottom-sheet-trigger');
 
       document.body.removeChild(button);
     }));
@@ -770,14 +774,14 @@ describe('MatBottomSheet', () => {
       otherButton.focus();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to be on the alternate button.');
+        .withContext('Expected focus to be on the alternate button.').toBe('other-button');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to stay on the alternate button.');
+        .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
       body.removeChild(button);
       body.removeChild(otherButton);
@@ -848,14 +852,15 @@ describe('MatBottomSheet with parent MatBottomSheet', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a bottom sheet to be opened');
+      .withContext('Expected a bottom sheet to be opened').toContain('Pizza');
 
     childBottomSheet.open(TacoMsg);
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected parent bottom sheet to be dismissed by opening from child');
+      .withContext('Expected parent bottom sheet to be dismissed by opening from child')
+      .toContain('Taco');
   }));
 
   it('should close bottom sheets opened by child when opening from parent', fakeAsync(() => {
@@ -864,14 +869,15 @@ describe('MatBottomSheet with parent MatBottomSheet', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a bottom sheet to be opened');
+      .withContext('Expected a bottom sheet to be opened').toContain('Pizza');
 
     parentBottomSheet.open(TacoMsg);
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected child bottom sheet to be dismissed by opening from parent');
+      .withContext('Expected child bottom sheet to be dismissed by opening from parent')
+      .toContain('Taco');
   }));
 
   it('should not close parent bottom sheet when child is destroyed', fakeAsync(() => {
@@ -880,14 +886,14 @@ describe('MatBottomSheet with parent MatBottomSheet', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a bottom sheet to be opened');
+      .withContext('Expected a bottom sheet to be opened').toContain('Pizza');
 
     childBottomSheet.ngOnDestroy();
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a bottom sheet to stay open');
+      .withContext('Expected a bottom sheet to stay open').toContain('Pizza');
   }));
 
 });
diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts
index e8ea85f7ec28..1a1e093df912 100644
--- a/src/material/button-toggle/button-toggle.spec.ts
+++ b/src/material/button-toggle/button-toggle.spec.ts
@@ -124,15 +124,15 @@ describe('MatButtonToggle with forms', () => {
     });
 
     it('should update the name of radio DOM elements if the name of the group changes', () => {
-       expect(innerButtons.every(button => button.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all buttons to have the initial name.');
+      expect(innerButtons.every(button => button.getAttribute('name') === groupInstance.name))
+        .withContext('Expected all buttons to have the initial name.').toBe(true);
 
-       fixture.componentInstance.groupName = 'changed-name';
+      fixture.componentInstance.groupName = 'changed-name';
       fixture.detectChanges();
 
-       expect(groupInstance.name).toBe('changed-name');
+      expect(groupInstance.name).toBe('changed-name');
       expect(innerButtons.every(button => button.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all buttons to have the new name.');
+        .withContext('Expected all buttons to have the new name.').toBe(true);
     });
 
     it('should check the corresponding button toggle on a group value change', () => {
diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts
index a847d30a29da..c50688dfb6db 100644
--- a/src/material/button/button.spec.ts
+++ b/src/material/button/button.spec.ts
@@ -109,7 +109,8 @@ describe('MatButton', () => {
       fixture.detectChanges();
 
       expect(fabButtonDebugEl.nativeElement.classList)
-        .toContain('mat-accent', 'Expected fab buttons to use accent palette by default');
+        .withContext('Expected fab buttons to use accent palette by default')
+        .toContain('mat-accent');
     });
   });
 
@@ -121,7 +122,8 @@ describe('MatButton', () => {
       fixture.detectChanges();
 
       expect(miniFabButtonDebugEl.nativeElement.classList)
-        .toContain('mat-accent', 'Expected mini-fab buttons to use accent palette by default');
+        .withContext('Expected mini-fab buttons to use accent palette by default')
+        .toContain('mat-accent');
     });
   });
 
@@ -152,11 +154,13 @@ describe('MatButton', () => {
     it('should disable the native button element', () => {
       const fixture = TestBed.createComponent(TestApp);
       const buttonNativeElement = fixture.nativeElement.querySelector('button');
-      expect(buttonNativeElement.disabled).toBeFalsy('Expected button not to be disabled');
+      expect(buttonNativeElement.disabled)
+        .withContext('Expected button not to be disabled').toBeFalsy();
 
       fixture.componentInstance.isDisabled = true;
       fixture.detectChanges();
-      expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be disabled');
+      expect(buttonNativeElement.disabled)
+        .withContext('Expected button to be disabled').toBeTruthy();
     });
 
   });
@@ -203,16 +207,18 @@ describe('MatButton', () => {
       const buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
       fixture.detectChanges();
       expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
-        .toBe('false', 'Expect aria-disabled="false"');
+        .withContext('Expect aria-disabled="false"').toBe('false');
       expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
-        .toBeNull('Expect disabled="false"');
+        .withContext('Expect disabled="false"')
+        .toBeNull();
 
       testComponent.isDisabled = false;
       fixture.detectChanges();
       expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
-        .toBe('false', 'Expect no aria-disabled');
+        .withContext('Expect no aria-disabled').toBe('false');
       expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
-        .toBeNull('Expect no disabled');
+        .withContext('Expect no disabled')
+        .toBeNull();
     });
 
     it('should be able to set a custom tabindex', () => {
@@ -224,13 +230,13 @@ describe('MatButton', () => {
       fixture.detectChanges();
 
       expect(buttonElement.getAttribute('tabIndex'))
-          .toBe('3', 'Expected custom tabindex to be set');
+        .withContext('Expected custom tabindex to be set').toBe('3');
 
       testComponent.isDisabled = true;
       fixture.detectChanges();
 
       expect(buttonElement.getAttribute('tabIndex'))
-          .toBe('-1', 'Expected custom tabindex to be overwritten when disabled.');
+        .withContext('Expected custom tabindex to be overwritten when disabled.').toBe('-1');
     });
   });
 
diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts
index 67ba15c8dc63..a9252ec9772d 100644
--- a/src/material/checkbox/checkbox.spec.ts
+++ b/src/material/checkbox/checkbox.spec.ts
@@ -81,7 +81,7 @@ describe('MatCheckbox', () => {
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(false);
       expect(inputElement.getAttribute('aria-checked'))
-          .toBe('false', 'Expect aria-checked to be false');
+        .withContext('Expect aria-checked to be false').toBe('false');
 
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
@@ -90,7 +90,7 @@ describe('MatCheckbox', () => {
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(true);
       expect(inputElement.getAttribute('aria-checked'))
-          .toBe('mixed', 'Expect aria checked to be mixed for indeterminate checkbox');
+        .withContext('Expect aria checked to be mixed for indeterminate checkbox').toBe('mixed');
 
       testComponent.isIndeterminate = false;
       fixture.detectChanges();
@@ -131,7 +131,7 @@ describe('MatCheckbox', () => {
       expect(inputElement.checked).toBe(true);
       expect(testComponent.isIndeterminate).toBe(true);
       expect(inputElement.getAttribute('aria-checked'))
-          .toBe('true', 'Expect aria checked to be true');
+        .withContext('Expect aria checked to be true').toBe('true');
 
       inputElement.click();
       fixture.detectChanges();
@@ -657,7 +657,8 @@ describe('MatCheckbox', () => {
 
         expect(inputElement.checked).toBe(false);
         expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
-        expect(inputElement.indeterminate).toBe(true, 'indeterminate should not change');
+        expect(inputElement.indeterminate)
+          .withContext('indeterminate should not change').toBe(true);
         expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate');
       }));
     });
@@ -842,7 +843,8 @@ describe('MatCheckbox', () => {
         .query(By.directive(MatCheckbox))!.componentInstance as MatCheckbox;
 
       expect(checkbox.tabIndex)
-        .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
+        .withContext('Expected tabIndex property to have been set based on the native attribute')
+        .toBe(5);
     }));
 
     it('should clear the tabindex attribute from the host element', () => {
diff --git a/src/material/chips/chip-input.spec.ts b/src/material/chips/chip-input.spec.ts
index 85289241a24e..159cd03caeeb 100644
--- a/src/material/chips/chip-input.spec.ts
+++ b/src/material/chips/chip-input.spec.ts
@@ -105,13 +105,13 @@ describe('MatChipInput', () => {
       fixture.detectChanges();
 
       expect(listElement.getAttribute('tabindex'))
-        .toBe('-1', 'Expected tabIndex to be set to -1 temporarily.');
+        .withContext('Expected tabIndex to be set to -1 temporarily.').toBe('-1');
 
       tick();
       fixture.detectChanges();
 
       expect(listElement.getAttribute('tabindex'))
-        .toBe('0', 'Expected tabIndex to be reset back to 0');
+        .withContext('Expected tabIndex to be reset back to 0').toBe('0');
     }));
 
     it('should not allow focus to escape when tabbing backwards', fakeAsync(() => {
@@ -122,12 +122,14 @@ describe('MatChipInput', () => {
       dispatchKeyboardEvent(inputNativeElement, 'keydown', TAB, undefined, {shift: true});
       fixture.detectChanges();
 
-      expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+      expect(listElement.getAttribute('tabindex'))
+        .withContext('Expected tabindex to remain 0').toBe('0');
 
       tick();
       fixture.detectChanges();
 
-      expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+      expect(listElement.getAttribute('tabindex'))
+        .withContext('Expected tabindex to remain 0').toBe('0');
     }));
 
     it('should be aria-required if the list is required', () => {
diff --git a/src/material/chips/chip-list.spec.ts b/src/material/chips/chip-list.spec.ts
index 583e7777c93e..6d72b230b2ff 100644
--- a/src/material/chips/chip-list.spec.ts
+++ b/src/material/chips/chip-list.spec.ts
@@ -149,9 +149,12 @@ describe('MatChipList', () => {
       it('should not override chips selected', () => {
         const instanceChips = fixture.componentInstance.chips.toArray();
 
-        expect(instanceChips[0].selected).toBe(true, 'Expected first option to be selected.');
-        expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.');
-        expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.');
+        expect(instanceChips[0].selected)
+          .withContext('Expected first option to be selected.').toBe(true);
+        expect(instanceChips[1].selected)
+          .withContext('Expected second option to be not selected.').toBe(false);
+        expect(instanceChips[2].selected)
+          .withContext('Expected third option to be selected.').toBe(true);
       });
 
       it('should have role listbox', () => {
@@ -162,7 +165,8 @@ describe('MatChipList', () => {
         fixture.componentInstance.foods = [];
         fixture.detectChanges();
 
-        expect(chipListNativeElement.getAttribute('role')).toBeNull('Expect no role attribute');
+        expect(chipListNativeElement.getAttribute('role'))
+          .withContext('Expect no role attribute').toBeNull();
       });
 
       it('should not have aria-required when it has no role', () => {
@@ -199,7 +203,8 @@ describe('MatChipList', () => {
       });
 
       it('should be able to become focused when disabled', () => {
-        expect(chipListInstance.focused).toBe(false, 'Expected list to not be focused.');
+        expect(chipListInstance.focused)
+          .withContext('Expected list to not be focused.').toBe(false);
 
         chipListInstance.disabled = true;
         fixture.detectChanges();
@@ -207,7 +212,8 @@ describe('MatChipList', () => {
         chipListInstance.focus();
         fixture.detectChanges();
 
-        expect(chipListInstance.focused).toBe(false, 'Expected list to continue not to be focused');
+        expect(chipListInstance.focused)
+          .withContext('Expected list to continue not to be focused').toBe(false);
       });
 
       it('should remove the tabindex from the list if it is disabled', () => {
@@ -364,7 +370,7 @@ describe('MatChipList', () => {
           fixture.detectChanges();
 
           expect(manager.activeItemIndex)
-              .toBe(initialActiveIndex, 'Expected focused item not to have changed.');
+            .withContext('Expected focused item not to have changed.').toBe(initialActiveIndex);
         });
 
         it('should focus the first item when pressing HOME', () => {
@@ -450,11 +456,12 @@ describe('MatChipList', () => {
           chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
           expect(chipListInstance._tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
+          expect(chipListInstance._tabIndex)
+            .withContext('Expected tabIndex to be reset back to 0').toBe(0);
         }));
 
         it(`should use user defined tabIndex`, fakeAsync(() => {
@@ -463,16 +470,17 @@ describe('MatChipList', () => {
           fixture.detectChanges();
 
           expect(chipListInstance._tabIndex)
-            .toBe(4, 'Expected tabIndex to be set to user defined value 4.');
+            .withContext('Expected tabIndex to be set to user defined value 4.').toBe(4);
 
           chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
           expect(chipListInstance._tabIndex)
-            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+            .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
           tick();
 
-          expect(chipListInstance._tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
+          expect(chipListInstance._tabIndex)
+            .withContext('Expected tabIndex to be reset back to 4').toBe(4);
         }));
       });
 
@@ -651,7 +659,7 @@ describe('MatChipList', () => {
 
     it('should float placeholder if chip is selected', () => {
       expect(formField.classList.contains('mat-form-field-should-float'))
-        .toBe(true, 'placeholder should be floating');
+        .withContext('placeholder should be floating').toBe(true);
     });
 
     it('should remove selection if chip has been removed', fakeAsync(() => {
@@ -661,15 +669,18 @@ describe('MatChipList', () => {
       dispatchKeyboardEvent(firstChip, 'keydown', SPACE);
       fixture.detectChanges();
 
-      expect(instanceChips.first.selected).toBe(true, 'Expected first option to be selected.');
-      expect(chipList.selected).toBe(chips.first, 'Expected first option to be selected.');
+      expect(instanceChips.first.selected)
+        .withContext('Expected first option to be selected.').toBe(true);
+      expect(chipList.selected)
+        .withContext('Expected first option to be selected.').toBe(chips.first);
 
       fixture.componentInstance.foods = [];
       fixture.detectChanges();
       tick();
 
       expect(chipList.selected)
-        .toBe(undefined, 'Expected selection to be removed when option no longer exists.');
+        .withContext('Expected selection to be removed when option no longer exists.')
+        .toBe(undefined);
     }));
 
 
@@ -684,9 +695,10 @@ describe('MatChipList', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.chipList.value)
-        .toContain('potatoes-8', 'Expect value contain the value of the last option');
+        .withContext('Expect value contain the value of the last option').toContain('potatoes-8');
       expect(fixture.componentInstance.chips.last.selected)
-        .toBeTruthy('Expect last option selected');
+        .withContext('Expect last option selected')
+        .toBeTruthy();
     });
 
     it('should not select disabled chips', () => {
@@ -696,10 +708,12 @@ describe('MatChipList', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.chipList.value)
-        .toBeUndefined('Expect value to be undefined');
-      expect(array[2].selected).toBeFalsy('Expect disabled chip not selected');
+        .withContext('Expect value to be undefined')
+        .toBeUndefined();
+      expect(array[2].selected).withContext('Expect disabled chip not selected').toBeFalsy();
       expect(fixture.componentInstance.chipList.selected)
-        .toBeUndefined('Expect no selected chips');
+        .withContext('Expect no selected chips')
+        .toBeUndefined();
     });
 
   });
@@ -723,36 +737,37 @@ describe('MatChipList', () => {
 
         const array = chips.toArray();
 
-        expect(array[1].selected).toBeTruthy('Expect pizza-1 chip to be selected');
+        expect(array[1].selected).withContext('Expect pizza-1 chip to be selected').toBeTruthy();
 
         dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
         fixture.detectChanges();
 
-        expect(array[1].selected).toBeFalsy('Expect chip to be not selected after toggle selected');
+        expect(array[1].selected)
+          .withContext('Expect chip to be not selected after toggle selected').toBeFalsy();
       });
 
       it('should set the view value from the form', () => {
         const chipList = fixture.componentInstance.chipList;
         const array = chips.toArray();
 
-        expect(chipList.value).toBeFalsy('Expect chip list to have no initial value');
+        expect(chipList.value).withContext('Expect chip list to have no initial value').toBeFalsy();
 
         fixture.componentInstance.control.setValue('pizza-1');
         fixture.detectChanges();
 
-        expect(array[1].selected).toBeTruthy('Expect chip to be selected');
+        expect(array[1].selected).withContext('Expect chip to be selected').toBeTruthy();
       });
 
       it('should update the form value when the view changes', () => {
 
         expect(fixture.componentInstance.control.value)
-          .toEqual(null, `Expected the control's value to be empty initially.`);
+          .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
         dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
         fixture.detectChanges();
 
         expect(fixture.componentInstance.control.value)
-          .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+          .withContext(`Expected control's value to be set to the new option.`).toEqual('steak-0');
       });
 
       it('should clear the selection when a nonexistent option value is selected', () => {
@@ -762,14 +777,16 @@ describe('MatChipList', () => {
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeTruthy(`Expected chip with the value to be selected.`);
+          .withContext(`Expected chip with the value to be selected.`)
+          .toBeTruthy();
 
         fixture.componentInstance.control.setValue('gibberish');
 
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeFalsy(`Expected chip with the old value not to be selected.`);
+          .withContext(`Expected chip with the old value not to be selected.`)
+          .toBeFalsy();
       });
 
 
@@ -783,65 +800,70 @@ describe('MatChipList', () => {
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeFalsy(`Expected chip with the old value not to be selected.`);
+          .withContext(`Expected chip with the old value not to be selected.`)
+          .toBeFalsy();
       });
 
       it('should set the control to touched when the chip list is touched', () => {
         expect(fixture.componentInstance.control.touched)
-          .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         const nativeChipList = fixture.debugElement.query(By.css('.mat-chip-list'))!.nativeElement;
         dispatchFakeEvent(nativeChipList, 'blur');
 
         expect(fixture.componentInstance.control.touched)
-          .toBe(true, 'Expected the control to be touched.');
+          .withContext('Expected the control to be touched.').toBe(true);
       });
 
       it('should not set touched when a disabled chip list is touched', () => {
         expect(fixture.componentInstance.control.touched)
-          .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         fixture.componentInstance.control.disable();
         const nativeChipList = fixture.debugElement.query(By.css('.mat-chip-list'))!.nativeElement;
         dispatchFakeEvent(nativeChipList, 'blur');
 
         expect(fixture.componentInstance.control.touched)
-          .toBe(false, 'Expected the control to stay untouched.');
+          .withContext('Expected the control to stay untouched.').toBe(false);
       });
 
       it('should set the control to dirty when the chip list\'s value changes in the DOM', () => {
         expect(fixture.componentInstance.control.dirty)
-          .toEqual(false, `Expected control to start out pristine.`);
+          .withContext(`Expected control to start out pristine.`).toEqual(false);
 
         dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
         fixture.detectChanges();
 
         expect(fixture.componentInstance.control.dirty)
-          .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+          .withContext(`Expected control to be dirty after value was changed by user.`)
+          .toEqual(true);
       });
 
       it('should not set the control to dirty when the value changes programmatically', () => {
         expect(fixture.componentInstance.control.dirty)
-          .toEqual(false, `Expected control to start out pristine.`);
+          .withContext(`Expected control to start out pristine.`).toEqual(false);
 
         fixture.componentInstance.control.setValue('pizza-1');
 
         expect(fixture.componentInstance.control.dirty)
-          .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+          .withContext(`Expected control to stay pristine after programmatic change.`)
+          .toEqual(false);
       });
 
 
       it('should set an asterisk after the placeholder if the control is required', () => {
         let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!;
         expect(requiredMarker)
-          .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+          .withContext(`Expected placeholder not to have an asterisk, as control was not required.`)
+          .toBeNull();
 
         fixture.componentInstance.isRequired = true;
         fixture.detectChanges();
 
         requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!;
         expect(requiredMarker)
-          .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+          .withContext(`Expected placeholder to have an asterisk, as control was required.`)
+          .not.toBeNull();
       });
 
       it('should be able to programmatically select a falsy option', () => {
@@ -856,7 +878,7 @@ describe('MatChipList', () => {
         falsyFixture.detectChanges();
 
         expect(falsyFixture.componentInstance.chips.first.selected)
-          .toBe(true, 'Expected first option to be selected');
+          .withContext('Expected first option to be selected').toBe(true);
       });
 
       it('should not focus the active chip when the value is set programmatically', () => {
@@ -903,36 +925,38 @@ describe('MatChipList', () => {
 
         const array = chips.toArray();
 
-        expect(array[1].selected).toBeTruthy('Expect pizza-1 chip to be selected');
+        expect(array[1].selected).withContext('Expect pizza-1 chip to be selected').toBeTruthy();
 
         dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
         fixture.detectChanges();
 
-        expect(array[1].selected).toBeFalsy('Expect chip to be not selected after toggle selected');
+        expect(array[1].selected)
+          .withContext('Expect chip to be not selected after toggle selected').toBeFalsy();
       });
 
       it('should set the view value from the form', () => {
         const chipList = fixture.componentInstance.chipList;
         const array = chips.toArray();
 
-        expect(chipList.value).toBeFalsy('Expect chip list to have no initial value');
+        expect(chipList.value).withContext('Expect chip list to have no initial value').toBeFalsy();
 
         fixture.componentInstance.control.setValue(['pizza-1']);
         fixture.detectChanges();
 
-        expect(array[1].selected).toBeTruthy('Expect chip to be selected');
+        expect(array[1].selected).withContext('Expect chip to be selected').toBeTruthy();
       });
 
       it('should update the form value when the view changes', () => {
 
         expect(fixture.componentInstance.control.value)
-          .toEqual(null, `Expected the control's value to be empty initially.`);
+          .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
         dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
         fixture.detectChanges();
 
         expect(fixture.componentInstance.control.value)
-          .toEqual(['steak-0'], `Expected control's value to be set to the new option.`);
+          .withContext(`Expected control's value to be set to the new option.`)
+          .toEqual(['steak-0']);
       });
 
       it('should clear the selection when a nonexistent option value is selected', () => {
@@ -942,14 +966,16 @@ describe('MatChipList', () => {
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeTruthy(`Expected chip with the value to be selected.`);
+          .withContext(`Expected chip with the value to be selected.`)
+          .toBeTruthy();
 
         fixture.componentInstance.control.setValue(['gibberish']);
 
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeFalsy(`Expected chip with the old value not to be selected.`);
+          .withContext(`Expected chip with the old value not to be selected.`)
+          .toBeFalsy();
       });
 
 
@@ -963,7 +989,8 @@ describe('MatChipList', () => {
         fixture.detectChanges();
 
         expect(array[1].selected)
-          .toBeFalsy(`Expected chip with the old value not to be selected.`);
+          .withContext(`Expected chip with the old value not to be selected.`)
+          .toBeFalsy();
       });
     });
 
@@ -1002,35 +1029,36 @@ describe('MatChipList', () => {
 
       const array = fixture.componentInstance.chips.toArray();
 
-      expect(array[1].selected).toBeTruthy('Expect pizza-1 chip to be selected');
+      expect(array[1].selected).withContext('Expect pizza-1 chip to be selected').toBeTruthy();
 
       dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
       fixture.detectChanges();
 
-      expect(array[1].selected).toBeFalsy('Expect chip to be not selected after toggle selected');
+      expect(array[1].selected)
+        .withContext('Expect chip to be not selected after toggle selected').toBeFalsy();
     });
 
     it('should set the view value from the form', () => {
       const array = fixture.componentInstance.chips.toArray();
 
-      expect(array[1].selected).toBeFalsy('Expect chip to not be selected');
+      expect(array[1].selected).withContext('Expect chip to not be selected').toBeFalsy();
 
       fixture.componentInstance.control.setValue(['pizza-1']);
       fixture.detectChanges();
 
-      expect(array[1].selected).toBeTruthy('Expect chip to be selected');
+      expect(array[1].selected).withContext('Expect chip to be selected').toBeTruthy();
     });
 
     it('should update the form value when the view changes', () => {
 
       expect(fixture.componentInstance.control.value)
-        .toEqual(null, `Expected the control's value to be empty initially.`);
+        .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
       dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
       fixture.detectChanges();
 
       expect(fixture.componentInstance.control.value)
-        .toEqual(['steak-0'], `Expected control's value to be set to the new option.`);
+        .withContext(`Expected control's value to be set to the new option.`).toEqual(['steak-0']);
     });
 
     it('should clear the selection when a nonexistent option value is selected', () => {
@@ -1040,14 +1068,16 @@ describe('MatChipList', () => {
       fixture.detectChanges();
 
       expect(array[1].selected)
-        .toBeTruthy(`Expected chip with the value to be selected.`);
+        .withContext(`Expected chip with the value to be selected.`)
+        .toBeTruthy();
 
       fixture.componentInstance.control.setValue(['gibberish']);
 
       fixture.detectChanges();
 
       expect(array[1].selected)
-        .toBeFalsy(`Expected chip with the old value not to be selected.`);
+        .withContext(`Expected chip with the old value not to be selected.`)
+        .toBeFalsy();
     });
 
     it('should clear the selection when the control is reset', () => {
@@ -1060,12 +1090,13 @@ describe('MatChipList', () => {
       fixture.detectChanges();
 
       expect(array[1].selected)
-        .toBeFalsy(`Expected chip with the old value not to be selected.`);
+        .withContext(`Expected chip with the old value not to be selected.`)
+        .toBeFalsy();
     });
 
     it('should set the control to touched when the chip list is touched', fakeAsync(() => {
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to start off as untouched.');
+        .withContext('Expected the control to start off as untouched.').toBe(false);
 
       const nativeChipList = fixture.debugElement.query(By.css('.mat-chip-list'))!.nativeElement;
 
@@ -1073,53 +1104,55 @@ describe('MatChipList', () => {
       tick();
 
       expect(fixture.componentInstance.control.touched)
-        .toBe(true, 'Expected the control to be touched.');
+        .withContext('Expected the control to be touched.').toBe(true);
     }));
 
     it('should not set touched when a disabled chip list is touched', () => {
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to start off as untouched.');
+        .withContext('Expected the control to start off as untouched.').toBe(false);
 
       fixture.componentInstance.control.disable();
       const nativeChipList = fixture.debugElement.query(By.css('.mat-chip-list'))!.nativeElement;
       dispatchFakeEvent(nativeChipList, 'blur');
 
       expect(fixture.componentInstance.control.touched)
-        .toBe(false, 'Expected the control to stay untouched.');
+        .withContext('Expected the control to stay untouched.').toBe(false);
     });
 
     it('should set the control to dirty when the chip list\'s value changes in the DOM', () => {
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toEqual(false);
 
       dispatchKeyboardEvent(nativeChips[1], 'keydown', SPACE);
       fixture.detectChanges();
 
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+        .withContext(`Expected control to be dirty after value was changed by user.`).toEqual(true);
     });
 
     it('should not set the control to dirty when the value changes programmatically', () => {
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(false, `Expected control to start out pristine.`);
+        .withContext(`Expected control to start out pristine.`).toEqual(false);
 
       fixture.componentInstance.control.setValue(['pizza-1']);
 
       expect(fixture.componentInstance.control.dirty)
-        .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+        .withContext(`Expected control to stay pristine after programmatic change.`).toEqual(false);
     });
 
     it('should set an asterisk after the placeholder if the control is required', () => {
       let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!;
       expect(requiredMarker)
-        .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+        .withContext(`Expected placeholder not to have an asterisk, as control was not required.`)
+        .toBeNull();
 
       fixture.componentInstance.isRequired = true;
       fixture.detectChanges();
 
       requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!;
-      expect(requiredMarker)
-        .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+      expect(requiredMarker).not
+        .withContext(`Expected placeholder to have an asterisk, as control was required.`)
+        .toBeNull();
     });
 
     it('should keep focus on the input after adding the first chip', fakeAsync(() => {
@@ -1136,8 +1169,10 @@ describe('MatChipList', () => {
       });
 
       nativeInput.focus();
-      expect(fixture.componentInstance.foods).toEqual([], 'Expected all chips to be removed.');
-      expect(document.activeElement).toBe(nativeInput, 'Expected input to be focused.');
+      expect(fixture.componentInstance.foods)
+        .withContext('Expected all chips to be removed.').toEqual([]);
+      expect(document.activeElement)
+        .withContext('Expected input to be focused.').toBe(nativeInput);
 
       typeInElement(nativeInput, '123');
       fixture.detectChanges();
@@ -1145,7 +1180,8 @@ describe('MatChipList', () => {
       fixture.detectChanges();
       tick();
 
-      expect(document.activeElement).toBe(nativeInput, 'Expected input to remain focused.');
+      expect(document.activeElement)
+        .withContext('Expected input to remain focused.').toBe(nativeInput);
     }));
 
     it('should set aria-invalid if the form field is invalid', () => {
@@ -1239,49 +1275,53 @@ describe('MatChipList', () => {
 
     it('should not show any errors if the user has not interacted', () => {
       expect(errorTestComponent.formControl.untouched)
-        .toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+        .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(chipListEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
     });
 
     it('should display an error message when the list is touched and invalid', fakeAsync(() => {
       expect(errorTestComponent.formControl.invalid)
-        .toBe(true, 'Expected form control to be invalid');
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error message');
+        .withContext('Expected no error message').toBe(0);
 
       errorTestComponent.formControl.markAsTouched();
       fixture.detectChanges();
       tick();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(chipListEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should display an error message when the parent form is submitted', fakeAsync(() => {
       expect(errorTestComponent.form.submitted)
-        .toBe(false, 'Expected form not to have been submitted');
+        .withContext('Expected form not to have been submitted').toBe(false);
       expect(errorTestComponent.formControl.invalid)
-        .toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(errorTestComponent.form.submitted)
-          .toBe(true, 'Expected form to have been submitted');
+          .withContext('Expected form to have been submitted').toBe(true);
         expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+          .withContext('Expected container to have the invalid CSS class.')
+          .toContain('mat-form-field-invalid');
         expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
+          .withContext('Expected one error message to have been rendered.').toBe(1);
         expect(chipListEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
+          .withContext('Expected aria-invalid to be set to "true".').toBe('true');
       });
     }));
 
@@ -1292,11 +1332,12 @@ describe('MatChipList', () => {
 
       fixture.whenStable().then(() => {
         expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+          .withContext('Expected container to have the invalid CSS class.')
+          .toContain('mat-form-field-invalid');
         expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
+          .withContext('Expected one error message to have been rendered.').toBe(1);
         expect(containerEl.querySelectorAll('mat-hint').length)
-          .toBe(0, 'Expected no hints to be shown.');
+          .withContext('Expected no hints to be shown.').toBe(0);
 
         errorTestComponent.formControl.setValue('something');
         fixture.detectChanges();
@@ -1305,9 +1346,9 @@ describe('MatChipList', () => {
           expect(containerEl.classList).not.toContain('mat-form-field-invalid',
             'Expected container not to have the invalid class when valid.');
           expect(containerEl.querySelectorAll('mat-error').length)
-            .toBe(0, 'Expected no error messages when the input is valid.');
+            .withContext('Expected no error messages when the input is valid.').toBe(0);
           expect(containerEl.querySelectorAll('mat-hint').length)
-            .toBe(1, 'Expected one hint to be shown once the input is valid.');
+            .withContext('Expected one hint to be shown once the input is valid.').toBe(1);
         });
       });
     }));
@@ -1324,7 +1365,7 @@ describe('MatChipList', () => {
           fixture.debugElement.query(By.css('.mat-hint'))!.nativeElement.getAttribute('id');
       let describedBy = chipListEl.getAttribute('aria-describedby');
 
-      expect(hintId).toBeTruthy('hint should be shown');
+      expect(hintId).withContext('hint should be shown').toBeTruthy();
       expect(describedBy).toBe(hintId);
 
       fixture.componentInstance.formControl.markAsTouched();
@@ -1334,7 +1375,7 @@ describe('MatChipList', () => {
         .map(el => el.nativeElement.getAttribute('id')).join(' ');
       describedBy = chipListEl.getAttribute('aria-describedby');
 
-      expect(errorIds).toBeTruthy('errors should be shown');
+      expect(errorIds).withContext('errors should be shown').toBeTruthy();
       expect(describedBy).toBe(errorIds);
     });
   });
@@ -1346,7 +1387,7 @@ describe('MatChipList', () => {
     fixture.detectChanges();
 
     expect(fixture.nativeElement.querySelector('.mat-chip').classList)
-        .toContain('mat-chip-selected', 'Expected first chip to be selected.');
+      .withContext('Expected first chip to be selected.').toContain('mat-chip-selected');
   }));
 
   function createComponent<T>(component: Type<T>, providers: Provider[] = [], animationsModule:
diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts
index dc2ea8e3f389..8846f6322a77 100644
--- a/src/material/chips/chip.spec.ts
+++ b/src/material/chips/chip.spec.ts
@@ -216,11 +216,13 @@ describe('MatChip', () => {
       });
 
       it('should be able to disable ripples through ripple global options at runtime', () => {
-        expect(chipInstance.rippleDisabled).toBe(false, 'Expected chip ripples to be enabled.');
+        expect(chipInstance.rippleDisabled)
+          .withContext('Expected chip ripples to be enabled.').toBe(false);
 
         globalRippleOptions.disabled = true;
 
-        expect(chipInstance.rippleDisabled).toBe(true, 'Expected chip ripples to be disabled.');
+        expect(chipInstance.rippleDisabled)
+          .withContext('Expected chip ripples to be disabled.').toBe(true);
       });
 
       it('should return the chip text if value is undefined', () => {
diff --git a/src/material/core/common-behaviors/color.spec.ts b/src/material/core/common-behaviors/color.spec.ts
index 30bc5cae7f07..49fa7b139abb 100644
--- a/src/material/core/common-behaviors/color.spec.ts
+++ b/src/material/core/common-behaviors/color.spec.ts
@@ -8,12 +8,14 @@ describe('MixinColor', () => {
     const instance = new classWithColor();
 
     expect(instance.color)
-        .toBeFalsy('Expected the mixed-into class to have a color property');
+      .withContext('Expected the mixed-into class to have a color property')
+      .toBeFalsy();
 
     instance.color = 'accent';
 
     expect(instance.color)
-        .toBe('accent', 'Expected the mixed-into class to have an updated color property');
+      .withContext('Expected the mixed-into class to have an updated color property')
+      .toBe('accent');
   });
 
   it('should remove old color classes if new color is set', () => {
@@ -21,19 +23,21 @@ describe('MixinColor', () => {
     const instance = new classWithColor();
 
     expect(instance.testElement.classList.length)
-      .toBe(0, 'Expected the element to not have any classes at initialization');
+      .withContext('Expected the element to not have any classes at initialization').toBe(0);
 
     instance.color = 'primary';
 
     expect(instance.testElement.classList)
-      .toContain('mat-primary', 'Expected the element to have the "mat-primary" class set');
+      .withContext('Expected the element to have the "mat-primary" class set')
+      .toContain('mat-primary');
 
     instance.color = 'accent';
 
     expect(instance.testElement.classList)
       .not.toContain('mat-primary', 'Expected the element to no longer have "mat-primary" set.');
     expect(instance.testElement.classList)
-      .toContain('mat-accent', 'Expected the element to have the "mat-accent" class set');
+      .withContext('Expected the element to have the "mat-accent" class set')
+      .toContain('mat-accent');
   });
 
   it('should allow having no color set', () => {
@@ -41,17 +45,18 @@ describe('MixinColor', () => {
     const instance = new classWithColor();
 
     expect(instance.testElement.classList.length)
-      .toBe(0, 'Expected the element to not have any classes at initialization');
+      .withContext('Expected the element to not have any classes at initialization').toBe(0);
 
     instance.color = 'primary';
 
     expect(instance.testElement.classList)
-      .toContain('mat-primary', 'Expected the element to have the "mat-primary" class set');
+      .withContext('Expected the element to have the "mat-primary" class set')
+      .toContain('mat-primary');
 
     instance.color = undefined;
 
     expect(instance.testElement.classList.length)
-      .toBe(0, 'Expected the element to have no color class set.');
+      .withContext('Expected the element to have no color class set.').toBe(0);
   });
 
   it('should allow having a default color if specified', () => {
@@ -59,12 +64,13 @@ describe('MixinColor', () => {
     const instance = new classWithColor();
 
     expect(instance.testElement.classList)
-      .toContain('mat-accent', 'Expected the element to have the "mat-accent" class by default.');
+      .withContext('Expected the element to have the "mat-accent" class by default.')
+      .toContain('mat-accent');
 
     instance.color = undefined;
 
     expect(instance.testElement.classList)
-      .toContain('mat-accent', 'Expected the default color "mat-accent" to be set.');
+      .withContext('Expected the default color "mat-accent" to be set.').toContain('mat-accent');
   });
 
   it('should allow for the default color to change after init', () => {
diff --git a/src/material/core/common-behaviors/disable-ripple.spec.ts b/src/material/core/common-behaviors/disable-ripple.spec.ts
index 7e2be6d4550d..2b8d50761da8 100644
--- a/src/material/core/common-behaviors/disable-ripple.spec.ts
+++ b/src/material/core/common-behaviors/disable-ripple.spec.ts
@@ -7,12 +7,13 @@ describe('mixinDisableRipple', () => {
     const instance = new classWithMixin();
 
     expect(instance.disableRipple)
-      .toBe(false, 'Expected the mixed-into class to have a disable-ripple property');
+      .withContext('Expected the mixed-into class to have a disable-ripple property').toBe(false);
 
     instance.disableRipple = true;
 
     expect(instance.disableRipple)
-      .toBe(true, 'Expected the mixed-into class to have an updated disable-ripple property');
+      .withContext('Expected the mixed-into class to have an updated disable-ripple property')
+      .toBe(true);
   });
 
   it('should coerce values being passed to the disableRipple property', () => {
@@ -20,14 +21,15 @@ describe('mixinDisableRipple', () => {
     const instance = new classWithMixin();
 
     expect(instance.disableRipple)
-      .toBe(false, 'Expected disableRipple to be set to false initially');
+      .withContext('Expected disableRipple to be set to false initially').toBe(false);
 
     // Setting string values to the disableRipple property should be prevented by TypeScript's
     // type checking, but developers can still set string values from their template bindings.
     (instance as any).disableRipple = '';
 
     expect(instance.disableRipple)
-      .toBe(true, 'Expected disableRipple to be set to true if an empty string is set as value');
+      .withContext('Expected disableRipple to be set to true if an empty string is set as value')
+      .toBe(true);
   });
 
 });
diff --git a/src/material/core/common-behaviors/disabled.spec.ts b/src/material/core/common-behaviors/disabled.spec.ts
index 0e28f3177b1f..795481fb29d5 100644
--- a/src/material/core/common-behaviors/disabled.spec.ts
+++ b/src/material/core/common-behaviors/disabled.spec.ts
@@ -9,10 +9,10 @@ describe('MixinDisabled', () => {
     let instance = new classWithDisabled();
 
     expect(instance.disabled)
-        .toBe(false, 'Expected the mixed-into class to have a disabled property');
+      .withContext('Expected the mixed-into class to have a disabled property').toBe(false);
 
     instance.disabled = true;
     expect(instance.disabled)
-        .toBe(true, 'Expected the mixed-into class to have an updated disabled property');
+      .withContext('Expected the mixed-into class to have an updated disabled property').toBe(true);
   });
 });
diff --git a/src/material/core/common-behaviors/tabindex.spec.ts b/src/material/core/common-behaviors/tabindex.spec.ts
index b0c38c54bd32..00a36e6ad41c 100644
--- a/src/material/core/common-behaviors/tabindex.spec.ts
+++ b/src/material/core/common-behaviors/tabindex.spec.ts
@@ -7,12 +7,12 @@ describe('mixinTabIndex', () => {
     const instance = new classWithMixin();
 
     expect(instance.tabIndex)
-      .toBe(0, 'Expected the mixed-into class to have a tabIndex property');
+      .withContext('Expected the mixed-into class to have a tabIndex property').toBe(0);
 
     instance.tabIndex = 4;
 
     expect(instance.tabIndex)
-      .toBe(4, 'Expected the mixed-into class to have an updated tabIndex property');
+      .withContext('Expected the mixed-into class to have an updated tabIndex property').toBe(4);
   });
 
   it('should set tabIndex to `-1` if the disabled property is set to true', () => {
@@ -20,12 +20,13 @@ describe('mixinTabIndex', () => {
     const instance = new classWithMixin();
 
     expect(instance.tabIndex)
-      .toBe(0, 'Expected tabIndex to be set to 0 initially');
+      .withContext('Expected tabIndex to be set to 0 initially').toBe(0);
 
     instance.disabled = true;
 
     expect(instance.tabIndex)
-      .toBe(-1, 'Expected tabIndex to be set to -1 if the disabled property is set to true');
+      .withContext('Expected tabIndex to be set to -1 if the disabled property is set to true')
+      .toBe(-1);
   });
 
   it('should allow having a custom default tabIndex value', () => {
@@ -33,12 +34,12 @@ describe('mixinTabIndex', () => {
     const instance = new classWithMixin();
 
     expect(instance.tabIndex)
-      .toBe(20, 'Expected tabIndex to be set to 20 initially');
+      .withContext('Expected tabIndex to be set to 20 initially').toBe(20);
 
     instance.tabIndex = 0;
 
     expect(instance.tabIndex)
-      .toBe(0, 'Expected tabIndex to still support 0 as value');
+      .withContext('Expected tabIndex to still support 0 as value').toBe(0);
   });
 
   it('should allow for the default tabIndex to change after init', () => {
diff --git a/src/material/core/datetime/native-date-adapter.spec.ts b/src/material/core/datetime/native-date-adapter.spec.ts
index 5770583e6c3b..8e7040fa78f6 100644
--- a/src/material/core/datetime/native-date-adapter.spec.ts
+++ b/src/material/core/datetime/native-date-adapter.spec.ts
@@ -24,10 +24,11 @@ describe('NativeDateAdapter', () => {
     platform = _platform;
 
     assertValidDate = (d: Date | null, valid: boolean) => {
-      expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
-      expect(adapter.isValid(d!)).toBe(valid,
-          `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
-          ` but was ${valid ? 'invalid' : 'valid'}`);
+      expect(adapter.isDateInstance(d)).not
+        .withContext(`Expected ${d} to be a date instance`).toBeNull();
+      expect(adapter.isValid(d!))
+        .withContext(`Expected ${d} to be ${valid ? 'valid' : 'invalid'}, but ` +
+                     `was ${valid ? 'invalid' : 'valid'}`).toBe(valid);
     };
   }));
 
@@ -215,7 +216,7 @@ describe('NativeDateAdapter', () => {
 
   it("should get today's date", () => {
     expect(adapter.sameDate(adapter.today(), new Date()))
-        .toBe(true, "should be equal to today's date");
+      .withContext("should be equal to today's date").toBe(true);
   });
 
   it('should parse string', () => {
@@ -237,9 +238,9 @@ describe('NativeDateAdapter', () => {
     let d = adapter.parse('hello');
     expect(d).not.toBeNull();
     expect(adapter.isDateInstance(d))
-        .toBe(true, 'Expected string to have been fed through Date.parse');
+      .withContext('Expected string to have been fed through Date.parse').toBe(true);
     expect(adapter.isValid(d as Date))
-        .toBe(false, 'Expected to parse as "invalid date" object');
+      .withContext('Expected to parse as "invalid date" object').toBe(false);
   });
 
   it('should format', () => {
diff --git a/src/material/core/option/option.spec.ts b/src/material/core/option/option.spec.ts
index 4fddbb5bdf7d..764a14a9faf5 100644
--- a/src/material/core/option/option.spec.ts
+++ b/src/material/core/option/option.spec.ts
@@ -162,20 +162,22 @@ describe('MatOption component', () => {
     });
 
     it('should show ripples by default', () => {
-      expect(optionInstance.disableRipple).toBeFalsy('Expected ripples to be enabled by default');
+      expect(optionInstance.disableRipple)
+        .withContext('Expected ripples to be enabled by default')
+        .toBeFalsy();
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially');
+        .withContext('Expected no ripples to show up initially').toBe(0);
 
       dispatchFakeEvent(optionNativeElement, 'mousedown');
       dispatchFakeEvent(optionNativeElement, 'mouseup');
 
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up after a fake click.');
+        .withContext('Expected one ripple to show up after a fake click.').toBe(1);
     });
 
     it('should not show ripples if the option is disabled', () => {
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially');
+        .withContext('Expected no ripples to show up initially').toBe(0);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
@@ -184,7 +186,7 @@ describe('MatOption component', () => {
       dispatchFakeEvent(optionNativeElement, 'mouseup');
 
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up after click on a disabled option.');
+        .withContext('Expected no ripples to show up after click on a disabled option.').toBe(0);
     });
 
   });
diff --git a/src/material/core/ripple/ripple.spec.ts b/src/material/core/ripple/ripple.spec.ts
index 5dc8d039640e..b7f491ad4089 100644
--- a/src/material/core/ripple/ripple.spec.ts
+++ b/src/material/core/ripple/ripple.spec.ts
@@ -254,9 +254,9 @@ describe('MatRipple', () => {
 
       expect(rippleElement).toBeTruthy();
       expect(parseFloat(rippleElement.style.left as string))
-          .toBeCloseTo(TARGET_WIDTH / 2 - radius, 1);
+        .toBeCloseTo(TARGET_WIDTH / 2 - radius, 1);
       expect(parseFloat(rippleElement.style.top as string))
-          .toBeCloseTo(TARGET_HEIGHT / 2 - radius, 1);
+        .toBeCloseTo(TARGET_HEIGHT / 2 - radius, 1);
     });
 
     it('cleans up the event handlers when the container gets destroyed', () => {
@@ -416,7 +416,7 @@ describe('MatRipple', () => {
       tick(exitDuration);
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to be active after calling fadeOutAll.');
+        .withContext('Expected no ripples to be active after calling fadeOutAll.').toBe(0);
     }));
 
    it('should properly set ripple states', fakeAsync(() => {
diff --git a/src/material/core/theming/tests/theming-api.spec.ts b/src/material/core/theming/tests/theming-api.spec.ts
index 3f6cca71e623..c0dad309993d 100644
--- a/src/material/core/theming/tests/theming-api.spec.ts
+++ b/src/material/core/theming/tests/theming-api.spec.ts
@@ -250,7 +250,7 @@ describe('theming api', () => {
    * generated at top-level.
    */
   function hasDensityStyles(parsed: Root, baseSelector: string|null): 'all'|'partial'|'none' {
-    expect(parsed.nodes).toBeDefined('Expected CSS to be not empty.');
+    expect(parsed.nodes).withContext('Expected CSS to be not empty.').toBeDefined();
     expect(knownDensitySelectors.size).not.toBe(0);
     const missingDensitySelectors = new Set(knownDensitySelectors.keys());
     const baseSelectorRegex = new RegExp(`^${baseSelector} `, 'g');
@@ -318,6 +318,6 @@ describe('theming api', () => {
     const match = writeSpy.calls.all().find(
         (s: jasmine.CallInfo<typeof process.stderr.write>) =>
             typeof s.args[0] === 'string' && message.test(s.args[0]));
-    expect(match).toBeDefined('Expected warning to be printed.');
+    expect(match).withContext('Expected warning to be printed.').toBeDefined();
   }
 });
diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts
index 756a2d475f49..20456fe7fa21 100644
--- a/src/material/datepicker/calendar-body.spec.ts
+++ b/src/material/datepicker/calendar-body.spec.ts
@@ -65,9 +65,11 @@ describe('MatCalendarBody', () => {
       const selectedCells = cellEls.filter(c => c.getAttribute('aria-selected') === 'true');
       const deselectedCells = cellEls.filter(c => c.getAttribute('aria-selected') === 'false');
 
-      expect(selectedCells.length).toBe(1, 'Expected one cell to be marked as selected.');
+      expect(selectedCells.length)
+        .withContext('Expected one cell to be marked as selected.').toBe(1);
       expect(deselectedCells.length)
-          .toBe(cellEls.length - 1, 'Expected remaining cells to be marked as deselected.');
+        .withContext('Expected remaining cells to be marked as deselected.')
+        .toBe(cellEls.length - 1);
     });
 
     it('places label in first row if space is available', () => {
@@ -80,7 +82,7 @@ describe('MatCalendarBody', () => {
       expect(labelEls.length).toBe(1);
       expect(cellEls.length).toBe(11);
       expect(rowEls[0].firstElementChild!.classList)
-          .toContain('mat-calendar-body-label', 'first cell should be the label');
+        .withContext('first cell should be the label').toContain('mat-calendar-body-label');
       expect(labelEls[0].getAttribute('colspan')).toBe('3');
     });
 
@@ -91,7 +93,7 @@ describe('MatCalendarBody', () => {
       fixture.detectChanges();
 
       expect(todayElement.classList)
-          .toContain('mat-calendar-body-selected', 'today should be selected');
+        .withContext('today should be selected').toContain('mat-calendar-body-selected');
     });
 
     it('should mark active date', () => {
diff --git a/src/material/datepicker/calendar-header.spec.ts b/src/material/datepicker/calendar-header.spec.ts
index aa14dd0d18f0..4a72c9916dac 100644
--- a/src/material/datepicker/calendar-header.spec.ts
+++ b/src/material/datepicker/calendar-header.spec.ts
@@ -189,7 +189,7 @@ describe('MatCalendarHeader', () => {
 
       expect(calendarInstance.currentView).toBe('month');
       expect(calendarInstance.activeDate).toEqual(new Date(2016, DEC, 31));
-      expect(testComponent.selected).toBeFalsy('no date should be selected yet');
+      expect(testComponent.selected).withContext('no date should be selected yet').toBeFalsy();
     });
 
     it('should format the year in the period button using the date adapter', () => {
diff --git a/src/material/datepicker/calendar.spec.ts b/src/material/datepicker/calendar.spec.ts
index 8edaa658e6fe..90410f988b55 100644
--- a/src/material/datepicker/calendar.spec.ts
+++ b/src/material/datepicker/calendar.spec.ts
@@ -360,13 +360,13 @@ describe('MatCalendar', () => {
       let prevButton =
           calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
 
-      expect(prevButton.disabled).toBe(false, 'previous button should not be disabled');
+      expect(prevButton.disabled).withContext('previous button should not be disabled').toBe(false);
       expect(calendarInstance.activeDate).toEqual(new Date(2016, FEB, 1));
 
       prevButton.click();
       fixture.detectChanges();
 
-      expect(prevButton.disabled).toBe(true, 'previous button should be disabled');
+      expect(prevButton.disabled).withContext('previous button should be disabled').toBe(true);
       expect(calendarInstance.activeDate).toEqual(new Date(2016, JAN, 1));
 
       prevButton.click();
@@ -382,13 +382,13 @@ describe('MatCalendar', () => {
       let nextButton =
           calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
 
-      expect(nextButton.disabled).toBe(false, 'next button should not be disabled');
+      expect(nextButton.disabled).withContext('next button should not be disabled').toBe(false);
       expect(calendarInstance.activeDate).toEqual(new Date(2017, DEC, 1));
 
       nextButton.click();
       fixture.detectChanges();
 
-      expect(nextButton.disabled).toBe(true, 'next button should be disabled');
+      expect(nextButton.disabled).withContext('next button should be disabled').toBe(true);
       expect(calendarInstance.activeDate).toEqual(new Date(2018, JAN, 1));
 
       nextButton.click();
@@ -497,20 +497,20 @@ describe('MatCalendar', () => {
       let cells = Array.from(calendarElement.querySelectorAll('.mat-calendar-body-cell'));
 
       expect(cells.slice(0, 9).every(c => c.classList.contains(disabledClass)))
-          .toBe(true, 'Expected dates up to the 10th to be disabled.');
+        .withContext('Expected dates up to the 10th to be disabled.').toBe(true);
 
       expect(cells.slice(9).every(c => c.classList.contains(disabledClass)))
-          .toBe(false, 'Expected dates after the 10th to be enabled.');
+        .withContext('Expected dates after the 10th to be enabled.').toBe(false);
 
       (cells[14] as HTMLElement).click();
       dynamicFixture.detectChanges();
       cells = Array.from(calendarElement.querySelectorAll('.mat-calendar-body-cell'));
 
       expect(cells.slice(0, 14).every(c => c.classList.contains(disabledClass)))
-          .toBe(true, 'Expected dates up to the 14th to be disabled.');
+        .withContext('Expected dates up to the 14th to be disabled.').toBe(true);
 
       expect(cells.slice(14).every(c => c.classList.contains(disabledClass)))
-          .toBe(false, 'Expected dates after the 14th to be enabled.');
+        .withContext('Expected dates after the 14th to be enabled.').toBe(false);
     });
 
   });
diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
index 49b285ea07e3..03fb1dea83c3 100644
--- a/src/material/datepicker/date-range-input.spec.ts
+++ b/src/material/datepicker/date-range-input.spec.ts
@@ -902,16 +902,19 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     tick();
 
-    expect(fixture.componentInstance.startDateModelChangeCount).toBe(1, 'Start Date set once');
-    expect(fixture.componentInstance.endDateModelChangeCount).toBe(0, 'End Date not set');
+    expect(fixture.componentInstance.startDateModelChangeCount)
+      .withContext('Start Date set once').toBe(1);
+    expect(fixture.componentInstance.endDateModelChangeCount)
+      .withContext('End Date not set').toBe(0);
 
     fixture.componentInstance.rangePicker.select(toDate);
     fixture.detectChanges();
     tick();
 
-    expect(fixture.componentInstance.startDateModelChangeCount).toBe(1,
-      'Start Date unchanged (set once)');
-    expect(fixture.componentInstance.endDateModelChangeCount).toBe(1, 'End Date set once');
+    expect(fixture.componentInstance.startDateModelChangeCount)
+      .withContext('Start Date unchanged (set once)').toBe(1);
+    expect(fixture.componentInstance.endDateModelChangeCount)
+      .withContext('End Date set once').toBe(1);
 
     fixture.componentInstance.rangePicker.open();
     fixture.detectChanges();
@@ -923,17 +926,19 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     tick();
 
-    expect(fixture.componentInstance.startDateModelChangeCount).toBe(2, 'Start Date set twice');
-    expect(fixture.componentInstance.endDateModelChangeCount).toBe(2,
-      'End Date set twice (nulled)');
+    expect(fixture.componentInstance.startDateModelChangeCount)
+      .withContext('Start Date set twice').toBe(2);
+    expect(fixture.componentInstance.endDateModelChangeCount)
+      .withContext('End Date set twice (nulled)').toBe(2);
 
     fixture.componentInstance.rangePicker.select(toDate2);
     fixture.detectChanges();
     tick();
 
-    expect(fixture.componentInstance.startDateModelChangeCount).toBe(2,
-      'Start Date unchanged (set twice)');
-    expect(fixture.componentInstance.endDateModelChangeCount).toBe(3, 'End date set three times');
+    expect(fixture.componentInstance.startDateModelChangeCount)
+      .withContext('Start Date unchanged (set twice)').toBe(2);
+    expect(fixture.componentInstance.endDateModelChangeCount)
+      .withContext('End date set three times').toBe(3);
   }));
 
 });
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index b39e848b47b6..ddad93bb5433 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/src/material/datepicker/datepicker.spec.ts
@@ -212,13 +212,15 @@ describe('MatDatepicker', () => {
         testComponent.datepicker.open();
         fixture.detectChanges();
 
-        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to be open.');
+        expect(testComponent.datepicker.opened)
+          .withContext('Expected datepicker to be open.').toBe(true);
 
         const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
         fixture.detectChanges();
         flush();
 
-        expect(testComponent.datepicker.opened).toBe(false, 'Expected datepicker to be closed.');
+        expect(testComponent.datepicker.opened)
+          .withContext('Expected datepicker to be closed.').toBe(false);
         expect(event.defaultPrevented).toBe(true);
       }));
 
@@ -226,7 +228,8 @@ describe('MatDatepicker', () => {
         testComponent.datepicker.open();
         fixture.detectChanges();
 
-        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to be open.');
+        expect(testComponent.datepicker.opened)
+          .withContext('Expected datepicker to be open.').toBe(true);
 
         const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {
           alt: true
@@ -234,7 +237,8 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
         flush();
 
-        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to stay open.');
+        expect(testComponent.datepicker.opened)
+          .withContext('Expected datepicker to stay open.').toBe(true);
         expect(event.defaultPrevented).toBe(false);
       }));
 
@@ -381,7 +385,7 @@ describe('MatDatepicker', () => {
       it('should attach popup to native input', () => {
         let attachToRef = testComponent.datepickerInput.getConnectedOverlayOrigin();
         expect(attachToRef.nativeElement.tagName.toLowerCase())
-            .toBe('input', 'popup should be attached to native input');
+          .withContext('popup should be attached to native input').toBe('input');
       });
 
       it('input should aria-owns calendar after opened in non-touch mode', fakeAsync(() => {
@@ -683,8 +687,10 @@ describe('MatDatepicker', () => {
 
         // When the calendar is in year view, the first cell should be for a month rather than
         // for a date.
-        expect(firstCalendarCell.textContent!.trim())
-            .toBe('JAN', 'Expected the calendar to be in year-view');
+        // When the calendar is in year view, the first cell should be for a month rather than
+// for a date.
+expect(firstCalendarCell.textContent!.trim())
+  .withContext('Expected the calendar to be in year-view').toBe('JAN');
       });
 
       it('should fire yearSelected when user selects calendar year in year view',
@@ -733,8 +739,10 @@ describe('MatDatepicker', () => {
 
         // When the calendar is in year view, the first cell should be for a month rather than
         // for a date.
-        expect(firstCalendarCell.textContent!.trim())
-            .toBe('2016', 'Expected the calendar to be in multi-year-view');
+        // When the calendar is in year view, the first cell should be for a month rather than
+// for a date.
+expect(firstCalendarCell.textContent!.trim())
+  .withContext('Expected the calendar to be in multi-year-view').toBe('2016');
       });
 
       it('should fire yearSelected when user selects calendar year in multiyear view',
@@ -1137,21 +1145,23 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
 
         toggle.focus();
-        expect(document.activeElement).toBe(toggle, 'Expected toggle to be focused.');
+        expect(document.activeElement)
+          .withContext('Expected toggle to be focused.').toBe(toggle);
 
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
         let pane = document.querySelector('.cdk-overlay-pane')!;
 
-        expect(pane).toBeTruthy('Expected calendar to be open.');
+        expect(pane).withContext('Expected calendar to be open.').toBeTruthy();
         expect(pane.contains(document.activeElement))
-            .toBe(true, 'Expected focus to be inside the calendar.');
+          .withContext('Expected focus to be inside the calendar.').toBe(true);
 
         fixture.componentInstance.datepicker.close();
         fixture.detectChanges();
 
-        expect(document.activeElement).toBe(toggle, 'Expected focus to be restored to toggle.');
+        expect(document.activeElement)
+          .withContext('Expected focus to be restored to toggle.').toBe(toggle);
       });
 
       it('should restore focus when placed inside a shadow root', () => {
@@ -1189,22 +1199,23 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
 
         toggle.focus();
-        expect(document.activeElement).toBe(toggle, 'Expected toggle to be focused.');
+        expect(document.activeElement)
+          .withContext('Expected toggle to be focused.').toBe(toggle);
 
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
         let pane = document.querySelector('.cdk-overlay-pane')!;
 
-        expect(pane).toBeTruthy('Expected calendar to be open.');
+        expect(pane).withContext('Expected calendar to be open.').toBeTruthy();
         expect(pane.contains(document.activeElement))
-            .toBe(true, 'Expected focus to be inside the calendar.');
+          .withContext('Expected focus to be inside the calendar.').toBe(true);
 
         fixture.componentInstance.datepicker.close();
         fixture.detectChanges();
 
         expect(document.activeElement)
-            .not.toBe(toggle, 'Expected focus not to be restored to toggle.');
+            .not.withContext('Expected focus not to be restored to toggle.').toBe(toggle);
       });
 
       it('should not override focus if it was moved inside the closed event in touchUI mode',
@@ -1224,7 +1235,8 @@ describe('MatDatepicker', () => {
           // Focus the input before opening so that the datepicker restores focus to it on close.
           input.focus();
 
-          expect(document.activeElement).toBe(input, 'Expected input to be focused on init.');
+          expect(document.activeElement)
+            .withContext('Expected input to be focused on init.').toBe(input);
 
           datepicker.open();
           fixture.detectChanges();
@@ -1240,7 +1252,8 @@ describe('MatDatepicker', () => {
           fixture.detectChanges();
 
           expect(document.activeElement)
-              .toBe(focusTarget, 'Expected alternate focus target to be focused after closing.');
+            .withContext('Expected alternate focus target to be focused after closing.')
+            .toBe(focusTarget);
 
           focusTarget.parentNode!.removeChild(focusTarget);
           subscription.unsubscribe();
@@ -1283,10 +1296,12 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
 
         expect(fixture.nativeElement.querySelector('.mat-datepicker-toggle .custom-icon'))
-            .toBeTruthy('Expected custom icon to be rendered.');
+          .withContext('Expected custom icon to be rendered.')
+          .toBeTruthy();
 
         expect(fixture.nativeElement.querySelector('.mat-datepicker-toggle mat-icon'))
-            .toBeFalsy('Expected default icon to be removed.');
+          .withContext('Expected default icon to be removed.')
+          .toBeFalsy();
       }));
     });
 
@@ -1836,7 +1851,9 @@ describe('MatDatepicker', () => {
         (fixture.componentInstance.datepicker as any)._focusedElementBeforeOpen = input;
 
         // Ensure that the datepicker is actually open.
-        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to be open.');
+        // Ensure that the datepicker is actually open.
+expect(testComponent.datepicker.opened)
+  .withContext('Expected datepicker to be open.').toBe(true);
 
         // Close the datepicker.
         testComponent.datepicker.close();
@@ -1849,7 +1866,8 @@ describe('MatDatepicker', () => {
         // Flush out the scheduled tasks.
         flush();
 
-        expect(testComponent.datepicker.opened).toBe(false, 'Expected datepicker to be closed.');
+        expect(testComponent.datepicker.opened)
+          .withContext('Expected datepicker to be closed.').toBe(false);
       }));
     });
 
@@ -1978,9 +1996,9 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.top))
-          .toBe(Math.floor(inputRect.bottom), 'Expected popup to align to input bottom.');
+        .withContext('Expected popup to align to input bottom.').toBe(Math.floor(inputRect.bottom));
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(inputRect.left), 'Expected popup to align to input left.');
+        .withContext('Expected popup to align to input left.').toBe(Math.floor(inputRect.left));
     });
 
     it('should be above and to the right when there is no space below', () => {
@@ -1992,9 +2010,9 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(inputRect.top), 'Expected popup to align to input top.');
+        .withContext('Expected popup to align to input top.').toBe(Math.floor(inputRect.top));
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(inputRect.left), 'Expected popup to align to input left.');
+        .withContext('Expected popup to align to input left.').toBe(Math.floor(inputRect.left));
     });
 
     it('should be below and to the left when there is no space on the right', () => {
@@ -2006,9 +2024,9 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.top))
-          .toBe(Math.floor(inputRect.bottom), 'Expected popup to align to input bottom.');
+        .withContext('Expected popup to align to input bottom.').toBe(Math.floor(inputRect.bottom));
       expect(Math.floor(overlayRect.right))
-          .toBe(Math.floor(inputRect.right), 'Expected popup to align to input right.');
+        .withContext('Expected popup to align to input right.').toBe(Math.floor(inputRect.right));
     });
 
     it('should be above and to the left when there is no space on the bottom', () => {
@@ -2020,9 +2038,9 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(inputRect.top), 'Expected popup to align to input top.');
+        .withContext('Expected popup to align to input top.').toBe(Math.floor(inputRect.top));
       expect(Math.floor(overlayRect.right))
-          .toBe(Math.floor(inputRect.right), 'Expected popup to align to input right.');
+        .withContext('Expected popup to align to input right.').toBe(Math.floor(inputRect.right));
     });
 
     it('should be able to customize the calendar position along the X axis', () => {
@@ -2037,7 +2055,7 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.right))
-          .toBe(Math.floor(inputRect.right), 'Expected popup to align to input right.');
+        .withContext('Expected popup to align to input right.').toBe(Math.floor(inputRect.right));
     });
 
     it('should be able to customize the calendar position along the Y axis', () => {
@@ -2052,7 +2070,7 @@ describe('MatDatepicker', () => {
       const inputRect = input.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(inputRect.top), 'Expected popup to align to input top.');
+        .withContext('Expected popup to align to input top.').toBe(Math.floor(inputRect.top));
     });
 
   });
diff --git a/src/material/datepicker/month-view.spec.ts b/src/material/datepicker/month-view.spec.ts
index 0c50d9c2f50a..6f3ff57f727c 100644
--- a/src/material/datepicker/month-view.spec.ts
+++ b/src/material/datepicker/month-view.spec.ts
@@ -423,13 +423,14 @@ describe('MatMonthView', () => {
             fixture.detectChanges();
 
             expect(getRangeElements().length)
-            .toBeGreaterThan(0, 'Expected range to be present on init.');
+              .withContext('Expected range to be present on init.').toBeGreaterThan(0);
 
             dispatchKeyboardEvent(calendarBodyEl, 'keydown', ESCAPE);
             fixture.detectChanges();
 
             expect(getRangeElements().length)
-            .toBeGreaterThan(0, 'Expected range to be present after pressing the escape key.');
+              .withContext('Expected range to be present after pressing the escape key.')
+              .toBeGreaterThan(0);
           });
 
           it('should not fire the selected change event when clicking on an already-selected ' +
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 9bc880dd75ca..a9209498290f 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -264,7 +264,7 @@ describe('MatDialog', () => {
     // beforeClose should emit before dialog container is destroyed
     const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
       expect(overlayContainerElement.querySelector('mat-dialog-container'))
-          .not.toBeNull('dialog container exists when beforeClose is called');
+          .not.withContext('dialog container exists when beforeClose is called').toBeNull();
     });
 
     dialogRef.beforeClosed().subscribe(beforeCloseHandler);
@@ -317,7 +317,7 @@ describe('MatDialog', () => {
     flushMicrotasks();
 
     expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-        .toBe(1, 'Expected one open dialog.');
+      .withContext('Expected one open dialog.').toBe(1);
 
     dialogRef.close();
     flushMicrotasks();
@@ -325,7 +325,7 @@ describe('MatDialog', () => {
     tick(500);
 
     expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length)
-        .toBe(0, 'Expected no open dialogs.');
+      .withContext('Expected no open dialogs.').toBe(0);
   }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
@@ -464,8 +464,8 @@ describe('MatDialog', () => {
 
     let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth).toBe('80vw',
-      'Expected dialog to set a default max-width on overlay pane');
+    expect(overlayPane.style.maxWidth)
+      .withContext('Expected dialog to set a default max-width on overlay pane').toBe('80vw');
 
     dialogRef.close();
 
@@ -775,7 +775,9 @@ describe('MatDialog', () => {
 
     dialogRef.afterClosed().subscribe(() => {
       spy();
-      expect(dialogRef.componentInstance).toBeTruthy('Expected component instance to be defined.');
+      expect(dialogRef.componentInstance)
+        .withContext('Expected component instance to be defined.')
+        .toBeTruthy();
     });
 
     dialogRef.close();
@@ -844,7 +846,9 @@ describe('MatDialog', () => {
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
+    expect(dialogRef.componentInstance)
+      .withContext('Expected reference to have been cleared.')
+      .toBeFalsy();
   }));
 
   it('should assign a unique id to each dialog', () => {
@@ -879,16 +883,17 @@ describe('MatDialog', () => {
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden');
+    expect(sibling.getAttribute('aria-hidden'))
+      .withContext('Expected sibling to be hidden').toBe('true');
     expect(overlayContainerElement.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected overlay container not to be hidden.');
+      .withContext('Expected overlay container not to be hidden.').toBe(false);
 
     dialogRef.close();
     viewContainerFixture.detectChanges();
     flush();
 
     expect(sibling.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected sibling to no longer be hidden.');
+      .withContext('Expected sibling to no longer be hidden.').toBe(false);
     sibling.parentNode!.removeChild(sibling);
   }));
 
@@ -902,13 +907,15 @@ describe('MatDialog', () => {
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to be hidden.');
+    expect(sibling.getAttribute('aria-hidden'))
+      .withContext('Expected sibling to be hidden.').toBe('true');
 
     dialogRef.close();
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(sibling.getAttribute('aria-hidden')).toBe('true', 'Expected sibling to remain hidden.');
+    expect(sibling.getAttribute('aria-hidden'))
+      .withContext('Expected sibling to remain hidden.').toBe('true');
     sibling.parentNode!.removeChild(sibling);
   }));
 
@@ -923,7 +930,7 @@ describe('MatDialog', () => {
     flush();
 
     expect(sibling.hasAttribute('aria-hidden'))
-        .toBe(false, 'Expected live element not to be hidden.');
+      .withContext('Expected live element not to be hidden.').toBe(false);
     sibling.parentNode!.removeChild(sibling);
   }));
 
@@ -938,7 +945,8 @@ describe('MatDialog', () => {
       .not.toContain('custom-class-one', 'Expected class to be initially missing');
 
     dialogRef.addPanelClass('custom-class-one');
-    expect(pane.classList).toContain('custom-class-one', 'Expected class to be added');
+    expect(pane.classList)
+      .withContext('Expected class to be added').toContain('custom-class-one');
 
     dialogRef.removePanelClass('custom-class-one');
     expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed');
@@ -1012,14 +1020,16 @@ describe('MatDialog', () => {
           overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       const input = overlayContainerElement.querySelector('input') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(input, 'Expected input to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected input to be focused on open').toBe(input);
 
       input.blur(); // Programmatic clicks might not move focus so we simulate it.
       backdrop.click();
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
+      expect(document.activeElement)
+        .withContext('Expected input to stay focused after click').toBe(input);
     }));
 
     it('should recapture focus to the container when clicking on the backdrop with ' +
@@ -1038,7 +1048,8 @@ describe('MatDialog', () => {
         const container =
           overlayContainerElement.querySelector('.mat-dialog-container') as HTMLInputElement;
 
-        expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+        expect(document.activeElement)
+          .withContext('Expected container to be focused on open').toBe(container);
 
         container.blur(); // Programmatic clicks might not move focus so we simulate it.
         backdrop.click();
@@ -1046,7 +1057,7 @@ describe('MatDialog', () => {
         flush();
 
         expect(document.activeElement)
-            .toBe(container, 'Expected container to stay focused after click');
+          .withContext('Expected container to stay focused after click').toBe(container);
       }));
 
       it('should recapture focus to the first header when clicking on the backdrop with ' +
@@ -1066,7 +1077,7 @@ describe('MatDialog', () => {
           .querySelector('.mat-dialog-title[tabindex="-1"]') as HTMLInputElement;
 
         expect(document.activeElement)
-          .toBe(firstHeader, 'Expected first header to be focused on open');
+          .withContext('Expected first header to be focused on open').toBe(firstHeader);
 
         firstHeader.blur(); // Programmatic clicks might not move focus so we simulate it.
         backdrop.click();
@@ -1074,7 +1085,7 @@ describe('MatDialog', () => {
         flush();
 
         expect(document.activeElement)
-            .toBe(firstHeader, 'Expected first header to stay focused after click');
+          .withContext('Expected first header to stay focused after click').toBe(firstHeader);
       }));
 
       it('should recapture focus to the first element that matches the css selector when ' +
@@ -1094,7 +1105,7 @@ describe('MatDialog', () => {
           overlayContainerElement.querySelector('[mat-dialog-close]') as HTMLInputElement;
 
         expect(document.activeElement)
-          .toBe(firstButton, 'Expected first button to be focused on open');
+          .withContext('Expected first button to be focused on open').toBe(firstButton);
 
         firstButton.blur(); // Programmatic clicks might not move focus so we simulate it.
         backdrop.click();
@@ -1102,7 +1113,7 @@ describe('MatDialog', () => {
         flush();
 
         expect(document.activeElement)
-            .toBe(firstButton, 'Expected first button to stay focused after click');
+          .withContext('Expected first button to stay focused after click').toBe(firstButton);
       }));
   });
 
@@ -1182,7 +1193,8 @@ describe('MatDialog', () => {
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+        .withContext('Expected first tabbable element (input) in the dialog to be focused.')
+        .toBe('INPUT');
     }));
 
     it('should focus the dialog element on open', fakeAsync(() => {
@@ -1197,7 +1209,8 @@ describe('MatDialog', () => {
       let container =
         overlayContainerElement.querySelector('.mat-dialog-container') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected container to be focused on open').toBe(container);
     }));
 
     it('should focus the first header element on open', fakeAsync(() => {
@@ -1213,7 +1226,7 @@ describe('MatDialog', () => {
         overlayContainerElement.querySelector('h1[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to be focused on open');
+        .withContext('Expected first header to be focused on open').toBe(firstHeader);
     }));
 
     it('should focus the first element that matches the css selector from autoFocus on open',
@@ -1230,7 +1243,7 @@ describe('MatDialog', () => {
         overlayContainerElement.querySelector('p[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstParagraph, 'Expected first paragraph to be focused on open');
+        .withContext('Expected first paragraph to be focused on open').toBe(firstParagraph);
     }));
 
     it('should attach the focus trap even if automatic focus is disabled', fakeAsync(() => {
@@ -1270,8 +1283,9 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       tick(500);
 
-      expect(document.activeElement!.id).toBe('dialog-trigger',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('dialog-trigger');
 
       document.body.removeChild(button);
     }));
@@ -1320,7 +1334,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+      expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
 
@@ -1329,7 +1343,7 @@ describe('MatDialog', () => {
       tick(500);
 
       expect(lastFocusOrigin!)
-        .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+        .withContext('Expected the trigger button to be focused via keyboard').toBe('keyboard');
 
       focusMonitor.stopMonitoring(button);
       document.body.removeChild(button);
@@ -1353,7 +1367,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+      expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const backdrop = overlayContainerElement
           .querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1363,7 +1377,7 @@ describe('MatDialog', () => {
       tick(500);
 
       expect(lastFocusOrigin!)
-        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+        .withContext('Expected the trigger button to be focused via mouse').toBe('mouse');
 
       focusMonitor.stopMonitoring(button);
       document.body.removeChild(button);
@@ -1389,7 +1403,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+      expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement
         .querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1402,7 +1416,7 @@ describe('MatDialog', () => {
       tick(500);
 
       expect(lastFocusOrigin!)
-        .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+        .withContext('Expected the trigger button to be focused via keyboard').toBe('keyboard');
 
       focusMonitor.stopMonitoring(button);
       document.body.removeChild(button);
@@ -1426,7 +1440,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+      expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement
         .querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1440,7 +1454,7 @@ describe('MatDialog', () => {
       tick(500);
 
       expect(lastFocusOrigin!)
-        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+        .withContext('Expected the trigger button to be focused via mouse').toBe('mouse');
 
       focusMonitor.stopMonitoring(button);
       document.body.removeChild(button);
@@ -1470,8 +1484,9 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement!.id).toBe('input-to-be-focused',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('input-to-be-focused');
 
       document.body.removeChild(button);
       document.body.removeChild(input);
@@ -1486,7 +1501,7 @@ describe('MatDialog', () => {
         flushMicrotasks();
 
         expect(document.activeElement!.tagName)
-            .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
+          .withContext('Expected dialog container to be focused.').toBe('MAT-DIALOG-CONTAINER');
       }));
 
     it('should be able to disable focus restoration', fakeAsync(() => {
@@ -1544,14 +1559,14 @@ describe('MatDialog', () => {
       otherButton.focus();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to be on the alternate button.');
+        .withContext('Expected focus to be on the alternate button.').toBe('other-button');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to stay on the alternate button.');
+        .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
       body.removeChild(button);
       body.removeChild(otherButton);
@@ -1644,9 +1659,9 @@ describe('MatDialog', () => {
         flush();
         viewContainerFixture.detectChanges();
 
-        expect(title.id).toBeTruthy('Expected title element to have an id.');
+        expect(title.id).withContext('Expected title element to have an id.').toBeTruthy();
         expect(container.getAttribute('aria-labelledby'))
-            .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
+          .withContext('Expected the aria-labelledby to match the title id.').toBe(title.id);
       }));
     }
   });
@@ -1691,7 +1706,7 @@ describe('MatDialog', () => {
         flush();
         viewContainerFixture.detectChanges();
 
-        expect(title.id).toBeTruthy('Expected title element to have an id.');
+        expect(title.id).withContext('Expected title element to have an id.').toBeTruthy();
         expect(container.getAttribute('aria-labelledby')).toBe('Labelled By');
     }));
   });
@@ -1779,14 +1794,15 @@ describe('MatDialog with a parent MatDialog', () => {
       flush();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       childDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on child MatDialog to close dialog opened by parent');
+        .withContext('Expected closeAll on child MatDialog to close dialog opened by parent')
+        .toBe('');
     }));
 
   it('should close dialogs opened by a child when calling closeAll on a parent MatDialog',
@@ -1795,14 +1811,15 @@ describe('MatDialog with a parent MatDialog', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       parentDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on parent MatDialog to close dialog opened by child');
+        .withContext('Expected closeAll on parent MatDialog to close dialog opened by child')
+        .toBe('');
     }));
 
   it('should close the top dialog via the escape key', fakeAsync(() => {
@@ -1821,14 +1838,14 @@ describe('MatDialog with a parent MatDialog', () => {
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
+      .withContext('Expected a dialog to be opened').toContain('Pizza');
 
     childDialog.ngOnDestroy();
     fixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
+      .withContext('Expected a dialog to be opened').toContain('Pizza');
   }));
 });
 
diff --git a/src/material/expansion/accordion.spec.ts b/src/material/expansion/accordion.spec.ts
index 8372e07c3275..f79b5f92c231 100644
--- a/src/material/expansion/accordion.spec.ts
+++ b/src/material/expansion/accordion.spec.ts
@@ -134,13 +134,15 @@ describe('MatAccordion', () => {
     fixture.detectChanges();
 
     expect(panel.nativeElement.querySelector('.mat-expansion-indicator'))
-      .toBeTruthy('Expected the expansion indicator to be present.');
+      .withContext('Expected the expansion indicator to be present.')
+      .toBeTruthy();
 
     fixture.componentInstance.hideToggle = true;
     fixture.detectChanges();
 
     expect(panel.nativeElement.querySelector('.mat-expansion-indicator'))
-      .toBeFalsy('Expected the expansion indicator to be removed.');
+      .withContext('Expected the expansion indicator to be removed.')
+      .toBeFalsy();
   });
 
   it('should update the expansion panel if togglePosition changed', () => {
@@ -150,13 +152,15 @@ describe('MatAccordion', () => {
     fixture.detectChanges();
 
     expect(panel.nativeElement.querySelector('.mat-expansion-toggle-indicator-after'))
-      .toBeTruthy('Expected the expansion indicator to be positioned after.');
+      .withContext('Expected the expansion indicator to be positioned after.')
+      .toBeTruthy();
 
     fixture.componentInstance.togglePosition = 'before';
     fixture.detectChanges();
 
     expect(panel.nativeElement.querySelector('.mat-expansion-toggle-indicator-before'))
-      .toBeTruthy('Expected the expansion indicator to be positioned before.');
+      .withContext('Expected the expansion indicator to be positioned before.')
+      .toBeTruthy();
   });
 
   it('should move focus to the next header when pressing the down arrow', () => {
diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts
index 20b56615609e..c1b1f4ba5933 100644
--- a/src/material/expansion/expansion.spec.ts
+++ b/src/material/expansion/expansion.spec.ts
@@ -71,13 +71,14 @@ describe('MatExpansionPanel', () => {
       By.css('.mat-expansion-panel-content'))!.nativeElement;
     fixture.detectChanges();
 
-    expect(content.textContent.trim()).toBe('', 'Expected content element to be empty.');
+    expect(content.textContent.trim())
+      .withContext('Expected content element to be empty.').toBe('');
 
     fixture.componentInstance.expanded = true;
     fixture.detectChanges();
 
     expect(content.textContent.trim())
-        .toContain('Some content', 'Expected content to be rendered.');
+      .withContext('Expected content to be rendered.').toContain('Some content');
   }));
 
   it('should render the content for a lazy-loaded panel that is opened on init', fakeAsync(() => {
@@ -87,7 +88,7 @@ describe('MatExpansionPanel', () => {
     fixture.detectChanges();
 
     expect(content.textContent.trim())
-        .toContain('Some content', 'Expected content to be rendered.');
+      .withContext('Expected content to be rendered.').toContain('Some content');
   }));
 
   it('emit correct events for change in panel expanded state', () => {
@@ -194,7 +195,8 @@ describe('MatExpansionPanel', () => {
     const button = fixture.debugElement.query(By.css('button'))!.nativeElement;
 
     button.focus();
-    expect(document.activeElement).toBe(button, 'Expected button to start off focusable.');
+    expect(document.activeElement)
+      .withContext('Expected button to start off focusable.').toBe(button);
 
     button.blur();
     fixture.componentInstance.expanded = false;
@@ -207,7 +209,8 @@ describe('MatExpansionPanel', () => {
     getComputedStyle(button).getPropertyValue('visibility');
 
     button.focus();
-    expect(document.activeElement).not.toBe(button, 'Expected button to no longer be focusable.');
+    expect(document.activeElement).not
+      .withContext('Expected button to no longer be focusable.').toBe(button);
   }));
 
   it('should restore focus to header if focused element is inside panel on close', fakeAsync(() => {
@@ -220,13 +223,15 @@ describe('MatExpansionPanel', () => {
     const header = fixture.debugElement.query(By.css('mat-expansion-panel-header'))!.nativeElement;
 
     button.focus();
-    expect(document.activeElement).toBe(button, 'Expected button to start off focusable.');
+    expect(document.activeElement)
+      .withContext('Expected button to start off focusable.').toBe(button);
 
     fixture.componentInstance.expanded = false;
     fixture.detectChanges();
     tick(250);
 
-    expect(document.activeElement).toBe(header, 'Expected header to be focused.');
+    expect(document.activeElement)
+      .withContext('Expected header to be focused.').toBe(header);
   }));
 
   it('should not change focus origin if origin not specified', fakeAsync(() => {
@@ -280,13 +285,15 @@ describe('MatExpansionPanel', () => {
     fixture.detectChanges();
 
     expect(header.querySelector('.mat-expansion-indicator'))
-        .toBeTruthy('Expected indicator to be shown.');
+      .withContext('Expected indicator to be shown.')
+      .toBeTruthy();
 
     fixture.componentInstance.hideToggle = true;
     fixture.detectChanges();
 
     expect(header.querySelector('.mat-expansion-indicator'))
-        .toBeFalsy('Expected indicator to be hidden.');
+      .withContext('Expected indicator to be hidden.')
+      .toBeFalsy();
   });
 
   it('should update the indicator rotation when the expanded state is toggled programmatically',
@@ -298,13 +305,15 @@ describe('MatExpansionPanel', () => {
 
       const arrow = fixture.debugElement.query(By.css('.mat-expansion-indicator'))!.nativeElement;
 
-      expect(arrow.style.transform).toBe('rotate(0deg)', 'Expected no rotation.');
+      expect(arrow.style.transform)
+        .withContext('Expected no rotation.').toBe('rotate(0deg)');
 
       fixture.componentInstance.expanded = true;
       fixture.detectChanges();
       tick(250);
 
-      expect(arrow.style.transform).toBe('rotate(180deg)', 'Expected 180 degree rotation.');
+      expect(arrow.style.transform)
+        .withContext('Expected 180 degree rotation.').toBe('rotate(180deg)');
     }));
 
   it('should make sure accordion item runs ngOnDestroy when expansion panel is destroyed', () => {
diff --git a/src/material/grid-list/grid-list.spec.ts b/src/material/grid-list/grid-list.spec.ts
index 3362685eb666..d15e3215f7f9 100644
--- a/src/material/grid-list/grid-list.spec.ts
+++ b/src/material/grid-list/grid-list.spec.ts
@@ -521,8 +521,10 @@ describe('MatGridList', () => {
     fixture.componentInstance.rowHeight = '400px';
     fixture.detectChanges();
 
-    expect(tileInlineStyles.paddingTop).toBeFalsy('Expected tile padding to be reset.');
-    expect(listInlineStyles.paddingBottom).toBeFalsy('Expected list padding to be reset.');
+    expect(tileInlineStyles.paddingTop)
+      .withContext('Expected tile padding to be reset.').toBeFalsy();
+    expect(listInlineStyles.paddingBottom)
+      .withContext('Expected list padding to be reset.').toBeFalsy();
 
     expect(getDimension(tile, 'top')).toBe(0);
     expect(getDimension(tile, 'height')).toBe(400);
@@ -534,7 +536,7 @@ describe('MatGridList', () => {
 
     fixture.detectChanges();
     expect(tiles.every(tile => getComputedLeft(tile) >= 0))
-        .toBe(true, 'Expected none of the tiles to have a negative `left`');
+      .withContext('Expected none of the tiles to have a negative `left`').toBe(true);
   });
 
   it('should default to LTR if empty directionality is given', () => {
diff --git a/src/material/icon/icon.spec.ts b/src/material/icon/icon.spec.ts
index dce55525fd42..c814b6de64e0 100644
--- a/src/material/icon/icon.spec.ts
+++ b/src/material/icon/icon.spec.ts
@@ -98,7 +98,8 @@ describe('MatIcon', () => {
 
     const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(matIconElement.classList.contains('notranslate'))
-      .toBeTruthy('Expected the mat-icon element to include the notranslate class');
+      .withContext('Expected the mat-icon element to include the notranslate class')
+      .toBeTruthy();
   });
 
   it('should apply class based on color attribute', () => {
@@ -130,26 +131,29 @@ describe('MatIcon', () => {
     const fixture = TestBed.createComponent(IconWithLigature);
     const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(iconElement.getAttribute('aria-hidden'))
-      .toBe('true', 'Expected the mat-icon element has aria-hidden="true" by default');
+      .withContext('Expected the mat-icon element has aria-hidden="true" by default').toBe('true');
   });
 
   it('should not override a user-provided aria-hidden attribute', () => {
     const fixture = TestBed.createComponent(IconWithAriaHiddenFalse);
     const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(iconElement.getAttribute('aria-hidden'))
-      .toBe('false', 'Expected the mat-icon element has the user-provided aria-hidden value');
+      .withContext('Expected the mat-icon element has the user-provided aria-hidden value')
+      .toBe('false');
   });
 
   it('should apply inline styling', () => {
     const fixture = TestBed.createComponent(InlineIcon);
     const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(iconElement.classList.contains('mat-icon-inline'))
-      .toBeFalsy('Expected the mat-icon element to not include the inline styling class');
+      .withContext('Expected the mat-icon element to not include the inline styling class')
+      .toBeFalsy();
 
     fixture.debugElement.componentInstance.inline = true;
     fixture.detectChanges();
     expect(iconElement.classList.contains('mat-icon-inline'))
-      .toBeTruthy('Expected the mat-icon element to include the inline styling class');
+      .withContext('Expected the mat-icon element to include the inline styling class')
+      .toBeTruthy();
   });
 
   describe('Ligature icons', () => {
diff --git a/src/material/input/input.spec.ts b/src/material/input/input.spec.ts
index 4af92cfded2d..4532c2fecdf2 100644
--- a/src/material/input/input.spec.ts
+++ b/src/material/input/input.spec.ts
@@ -57,8 +57,8 @@ describe('MatInput without forms', () => {
 
     const formField = fixture.debugElement.query(By.directive(MatFormField))!
         .componentInstance as MatFormField;
-    expect(formField.floatLabel).toBe('auto',
-        'Expected MatInput to set floatingLabel to auto by default.');
+    expect(formField.floatLabel)
+      .withContext('Expected MatInput to set floatingLabel to auto by default.').toBe('auto');
   }));
 
   it('should default to floating label type provided by global default options', fakeAsync(() => {
@@ -69,8 +69,9 @@ describe('MatInput without forms', () => {
 
     const formField = fixture.debugElement.query(By.directive(MatFormField))!
       .componentInstance as MatFormField;
-    expect(formField.floatLabel).toBe('always',
-      'Expected MatInput to set floatingLabel to always from global option.');
+    expect(formField.floatLabel)
+      .withContext('Expected MatInput to set floatingLabel to always from global option.')
+      .toBe('always');
   }));
 
   it('should not be treated as empty if type is date', fakeAsync(() => {
@@ -135,7 +136,8 @@ describe('MatInput without forms', () => {
     const inputElement = fixture.debugElement.query(By.css('input'))!;
     let labelEl = fixture.debugElement.query(By.css('label'))!.nativeElement;
     expect(labelEl).not.toBeNull();
-    expect(labelEl.classList.contains('mat-form-field-empty')).toBe(true, 'should be empty');
+    expect(labelEl.classList.contains('mat-form-field-empty'))
+      .withContext('should be empty').toBe(true);
 
     inputElement.nativeElement.value = 'hello';
     // Simulate input event.
@@ -143,7 +145,8 @@ describe('MatInput without forms', () => {
     fixture.detectChanges();
 
     labelEl = fixture.debugElement.query(By.css('label'))!.nativeElement;
-    expect(labelEl.classList.contains('mat-form-field-empty')).toBe(false, 'should not be empty');
+    expect(labelEl.classList.contains('mat-form-field-empty'))
+      .withContext('should not be empty').toBe(false);
   }));
 
   it('should update the placeholder when input entered', fakeAsync(() => {
@@ -212,13 +215,13 @@ describe('MatInput without forms', () => {
         fixture.debugElement.query(By.css('input'))!.nativeElement;
 
     expect(inputElement.getAttribute('aria-required'))
-        .toBe('false', 'Expected aria-required to reflect required state of false');
+      .withContext('Expected aria-required to reflect required state of false').toBe('false');
 
     fixture.componentInstance.required = true;
     fixture.detectChanges();
 
     expect(inputElement.getAttribute('aria-required'))
-        .toBe('true', 'Expected aria-required to reflect required state of true');
+      .withContext('Expected aria-required to reflect required state of true').toBe('true');
   }));
 
   it('should not overwrite existing id', fakeAsync(() => {
@@ -452,14 +455,14 @@ describe('MatInput without forms', () => {
     const inputEl = fixture.debugElement.query(By.css('input'))!.nativeElement;
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-        .toBe(false, `Expected form field not to start out disabled.`);
+      .withContext(`Expected form field not to start out disabled.`).toBe(false);
     expect(inputEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-        .toBe(true, `Expected form field to look disabled after property is set.`);
+      .withContext(`Expected form field to look disabled after property is set.`).toBe(true);
     expect(inputEl.disabled).toBe(true);
   }));
 
@@ -472,14 +475,14 @@ describe('MatInput without forms', () => {
     const selectEl = fixture.debugElement.query(By.css('select'))!.nativeElement;
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-        .toBe(false, `Expected form field not to start out disabled.`);
+      .withContext(`Expected form field not to start out disabled.`).toBe(false);
     expect(selectEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-        .toBe(true, `Expected form field to look disabled after property is set.`);
+      .withContext(`Expected form field to look disabled after property is set.`).toBe(true);
     expect(selectEl.disabled).toBe(true);
   }));
 
@@ -787,7 +790,7 @@ describe('MatInput without forms', () => {
 
     expect(containerInstance.floatLabel).toBe('auto');
     expect(label.classList)
-        .toContain('mat-form-field-empty', 'Expected input to be considered empty.');
+      .withContext('Expected input to be considered empty.').toContain('mat-form-field-empty');
 
     containerInstance.floatLabel = 'always';
     fixture.detectChanges();
@@ -827,7 +830,8 @@ describe('MatInput without forms', () => {
     const component = fixture.componentInstance;
     const label = fixture.debugElement.query(By.css('.mat-form-field-label'))!.nativeElement;
 
-    expect(label.classList).toContain('mat-form-field-empty', 'Input initially empty');
+    expect(label.classList)
+      .withContext('Input initially empty').toContain('mat-form-field-empty');
 
     component.formControl.setValue('something');
     fixture.detectChanges();
@@ -1036,15 +1040,19 @@ describe('MatInput with forms', () => {
     }));
 
     it('should not show any errors if the user has not interacted', fakeAsync(() => {
-      expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.untouched)
+        .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
     }));
 
     it('should display an error message when the input is touched and invalid', fakeAsync(() => {
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       inputEl.value = 'not valid';
       testComponent.formControl.markAsTouched();
@@ -1052,30 +1060,36 @@ describe('MatInput with forms', () => {
       flush();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should display an error message when the parent form is submitted', fakeAsync(() => {
-      expect(testComponent.form.submitted).toBe(false, 'Expected form not to have been submitted');
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.form.submitted)
+        .withContext('Expected form not to have been submitted').toBe(false);
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       inputEl.value = 'not valid';
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.form.submitted).toBe(true, 'Expected form to have been submitted');
+      expect(testComponent.form.submitted)
+        .withContext('Expected form to have been submitted').toBe(true);
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should display an error message when the parent form group is submitted', fakeAsync(() => {
@@ -1090,12 +1104,14 @@ describe('MatInput with forms', () => {
       containerEl = groupFixture.debugElement.query(By.css('mat-form-field'))!.nativeElement;
       inputEl = groupFixture.debugElement.query(By.css('input'))!.nativeElement;
 
-      expect(component.formGroup.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(component.formGroup.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .withContext('Expected aria-invalid to be set to "false".').toBe('false');
       expect(component.formGroupDirective.submitted)
-        .toBe(false, 'Expected form not to have been submitted');
+        .withContext('Expected form not to have been submitted').toBe(false);
 
       inputEl.value = 'not valid';
       dispatchFakeEvent(groupFixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
@@ -1103,13 +1119,14 @@ describe('MatInput with forms', () => {
       flush();
 
       expect(component.formGroupDirective.submitted)
-        .toBe(true, 'Expected form to have been submitted');
+        .withContext('Expected form to have been submitted').toBe(true);
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
     it('should hide the errors and show the hints once the input becomes valid', fakeAsync(() => {
@@ -1118,11 +1135,12 @@ describe('MatInput with forms', () => {
       flush();
 
       expect(containerEl.classList)
-        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+        .withContext('Expected container to have the invalid CSS class.')
+        .toContain('mat-form-field-invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message to have been rendered.');
+        .withContext('Expected one error message to have been rendered.').toBe(1);
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(0, 'Expected no hints to be shown.');
+        .withContext('Expected no hints to be shown.').toBe(0);
 
       testComponent.formControl.setValue('valid value');
       fixture.detectChanges();
@@ -1131,9 +1149,9 @@ describe('MatInput with forms', () => {
       expect(containerEl.classList).not.toContain('mat-form-field-invalid',
         'Expected container not to have the invalid class when valid.');
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages when the input is valid.');
+        .withContext('Expected no error messages when the input is valid.').toBe(0);
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to be shown once the input is valid.');
+        .withContext('Expected one hint to be shown once the input is valid.').toBe(1);
     }));
 
     it('should not hide the hint if there are no error messages', fakeAsync(() => {
@@ -1141,14 +1159,14 @@ describe('MatInput with forms', () => {
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to be shown on load.');
+        .withContext('Expected one hint to be shown on load.').toBe(1);
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
       flush();
 
       expect(containerEl.querySelectorAll('mat-hint').length)
-        .toBe(1, 'Expected one hint to still be shown.');
+        .withContext('Expected one hint to still be shown.').toBe(1);
     }));
 
     it('should set the proper aria-live attribute on the error messages', fakeAsync(() => {
@@ -1163,7 +1181,7 @@ describe('MatInput with forms', () => {
           fixture.debugElement.query(By.css('.mat-hint'))!.nativeElement.getAttribute('id');
       let describedBy = inputEl.getAttribute('aria-describedby');
 
-      expect(hintId).toBeTruthy('hint should be shown');
+      expect(hintId).withContext('hint should be shown').toBeTruthy();
       expect(describedBy).toBe(hintId);
 
       fixture.componentInstance.formControl.markAsTouched();
@@ -1173,7 +1191,7 @@ describe('MatInput with forms', () => {
           .map(el => el.nativeElement.getAttribute('id')).join(' ');
       describedBy = inputEl.getAttribute('aria-describedby');
 
-      expect(errorIds).toBeTruthy('errors should be shown');
+      expect(errorIds).withContext('errors should be shown').toBeTruthy();
       expect(describedBy).toBe(errorIds);
     }));
 
@@ -1183,17 +1201,19 @@ describe('MatInput with forms', () => {
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(inputEl.value).toBeFalsy();
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
 
       inputEl.value = 'not valid';
       fixture.detectChanges();
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
+        .withContext('Expected aria-invalid to be set to "true".').toBe('true');
     }));
 
   });
@@ -1209,21 +1229,22 @@ describe('MatInput with forms', () => {
 
       const control = component.formGroup.get('name')!;
 
-      expect(control.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(control.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages');
+        .withContext('Expected no error messages').toBe(0);
 
       control.markAsTouched();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages after being touched.');
+        .withContext('Expected no error messages after being touched.').toBe(0);
 
       component.errorState = true;
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error messages to have been rendered.');
+        .withContext('Expected one error messages to have been rendered.').toBe(1);
     }));
 
     it('should display an error message when global error matcher returns true', fakeAsync(() => {
@@ -1237,8 +1258,11 @@ describe('MatInput with forms', () => {
       const testComponent = fixture.componentInstance;
 
       // Expect the control to still be untouched but the error to show due to the global setting
-      expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(1, 'Expected an error message');
+      // Expect the control to still be untouched but the error to show due to the global setting
+expect(testComponent.formControl.untouched)
+  .withContext('Expected untouched form control').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected an error message').toBe(1);
     }));
 
     it('should display an error message when using ShowOnDirtyErrorStateMatcher', fakeAsync(() => {
@@ -1250,20 +1274,22 @@ describe('MatInput with forms', () => {
       const containerEl = fixture.debugElement.query(By.css('mat-form-field'))!.nativeElement;
       const testComponent = fixture.componentInstance;
 
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
-      expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid').toBe(true);
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error message').toBe(0);
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(0, 'Expected no error messages when touched');
+        .withContext('Expected no error messages when touched').toBe(0);
 
       testComponent.formControl.markAsDirty();
       fixture.detectChanges();
 
       expect(containerEl.querySelectorAll('mat-error').length)
-        .toBe(1, 'Expected one error message when dirty');
+        .withContext('Expected one error message when dirty').toBe(1);
     }));
   });
 
@@ -1296,8 +1322,9 @@ describe('MatInput with forms', () => {
     fixture.componentInstance.formControl.disable();
     fixture.detectChanges();
 
-    expect(formFieldEl.classList).toContain('mat-form-field-disabled',
-      `Expected form field to look disabled after disable() is called.`);
+    expect(formFieldEl.classList)
+      .withContext(`Expected form field to look disabled after disable() is called.`)
+      .toContain('mat-form-field-disabled');
     expect(inputEl.disabled).toBe(true);
   }));
 
@@ -1693,8 +1720,9 @@ describe('MatInput with textarea autosize', () => {
 
     autosize.resizeToFitContent(true);
 
-    expect(textarea.clientHeight).toBeLessThan(heightWithLongPlaceholder,
-        'Expected the textarea height to be shorter with a long placeholder.');
+    expect(textarea.clientHeight)
+      .withContext('Expected the textarea height to be shorter with a long placeholder.')
+      .toBeLessThan(heightWithLongPlaceholder);
   });
 
   it('should work in a tab', () => {
diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts
index f2a2b10c0d52..16c4b49099ab 100644
--- a/src/material/list/list.spec.ts
+++ b/src/material/list/list.spec.ts
@@ -100,8 +100,10 @@ describe('MatList', () => {
 
     const list = fixture.debugElement.children[0];
     const listItem = fixture.debugElement.children[0].query(By.css('mat-list-item'))!;
-    expect(list.nativeElement.getAttribute('role')).toBeNull('Expect mat-list no role');
-    expect(listItem.nativeElement.getAttribute('role')).toBeNull('Expect mat-list-item no role');
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-list no role').toBeNull();
+    expect(listItem.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-list-item no role').toBeNull();
   });
 
   it('should not show ripples for non-nav lists', () => {
@@ -226,12 +228,12 @@ describe('MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected ripples to be enabled by default.');
+        .withContext('Expected ripples to be enabled by default.').toBe(1);
 
       // Wait for the ripples to go away.
       tick(enterDuration + exitDuration);
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected ripples to go away.');
+        .withContext('Expected ripples to go away.').toBe(0);
 
       fixture.componentInstance.disableListRipple = true;
       fixture.detectChanges();
@@ -240,7 +242,7 @@ describe('MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples after list ripples are disabled.');
+        .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
     }));
 
   it('should disable item ripples when list ripples are disabled via the input in an action list',
@@ -254,12 +256,12 @@ describe('MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected ripples to be enabled by default.');
+        .withContext('Expected ripples to be enabled by default.').toBe(1);
 
       // Wait for the ripples to go away.
       tick(enterDuration + exitDuration);
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected ripples to go away.');
+        .withContext('Expected ripples to go away.').toBe(0);
 
       fixture.componentInstance.disableListRipple = true;
       fixture.detectChanges();
@@ -268,7 +270,7 @@ describe('MatList', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples after list ripples are disabled.');
+        .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
     }));
 
 
diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts
index da26d65b0432..e405b62f2c28 100644
--- a/src/material/list/selection-list.spec.ts
+++ b/src/material/list/selection-list.spec.ts
@@ -349,12 +349,12 @@ describe('MatSelectionList without forms', () => {
       selectionList.componentInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
       expect(selectionList.componentInstance._tabIndex)
-          .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+        .withContext('Expected tabIndex to be set to -1 temporarily.').toBe(-1);
 
       tick();
 
       expect(selectionList.componentInstance._tabIndex)
-          .toBe(0, 'Expected tabIndex to be reset back to 0');
+        .withContext('Expected tabIndex to be reset back to 0').toBe(0);
     }));
 
     it('should restore focus if active option is destroyed', () => {
@@ -760,12 +760,12 @@ describe('MatSelectionList without forms', () => {
         dispatchMouseEvent(rippleTarget, 'mouseup');
 
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-            .toBe(1, 'Expected ripples to be enabled by default.');
+          .withContext('Expected ripples to be enabled by default.').toBe(1);
 
         // Wait for the ripples to go away.
         tick(enterDuration + exitDuration);
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-            .toBe(0, 'Expected ripples to go away.');
+          .withContext('Expected ripples to go away.').toBe(0);
 
         fixture.componentInstance.listRippleDisabled = true;
         fixture.detectChanges();
@@ -775,7 +775,7 @@ describe('MatSelectionList without forms', () => {
         flush();
 
         expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
-            .toBe(0, 'Expected no ripples after list ripples are disabled.');
+          .withContext('Expected no ripples after list ripples are disabled.').toBe(0);
       }));
 
     it('can bind both selected and value at the same time', () => {
@@ -891,13 +891,13 @@ describe('MatSelectionList without forms', () => {
 
     it('should disable ripples for disabled option', () => {
       expect(listOption._isRippleDisabled())
-        .toBe(false, 'Expected ripples to be enabled by default');
+        .withContext('Expected ripples to be enabled by default').toBe(false);
 
       fixture.componentInstance.disableItem = true;
       fixture.detectChanges();
 
       expect(listOption._isRippleDisabled())
-        .toBe(true, 'Expected ripples to be disabled if option is disabled');
+        .withContext('Expected ripples to be disabled if option is disabled').toBe(true);
     });
 
     it('should apply the "mat-list-item-disabled" class properly', () => {
@@ -958,13 +958,13 @@ describe('MatSelectionList without forms', () => {
           .injector.get<MatRipple>(MatRipple);
 
       expect(listOptionRipple.disabled)
-        .toBe(true, 'Expected ripples of list option to be disabled');
+        .withContext('Expected ripples of list option to be disabled').toBe(true);
 
       fixture.componentInstance.disabled = false;
       fixture.detectChanges();
 
       expect(listOptionRipple.disabled)
-        .toBe(false, 'Expected ripples of list option to be enabled');
+        .withContext('Expected ripples of list option to be enabled').toBe(false);
     });
   });
 
@@ -1220,7 +1220,7 @@ describe('MatSelectionList with forms', () => {
 
     it('should update the model if an option got selected programmatically', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       listOptions[0].toggle();
       fixture.detectChanges();
@@ -1228,12 +1228,12 @@ describe('MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should update the model if an option got clicked', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       dispatchFakeEvent(listOptions[0]._getHostElement(), 'click');
       fixture.detectChanges();
@@ -1241,12 +1241,12 @@ describe('MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should update the options if a model value is set', fakeAsync(() => {
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(0, 'Expected no options to be selected by default');
+        .withContext('Expected no options to be selected by default').toBe(0);
 
       fixture.componentInstance.selectedOptions = ['opt3'];
       fixture.detectChanges();
@@ -1254,30 +1254,32 @@ describe('MatSelectionList with forms', () => {
       tick();
 
       expect(fixture.componentInstance.selectedOptions.length)
-        .toBe(1, 'Expected first list option to be selected');
+        .withContext('Expected first list option to be selected').toBe(1);
     }));
 
     it('should not mark the model as touched when the list is blurred', fakeAsync(() => {
       expect(ngModel.touched)
-        .toBe(false, 'Expected the selection-list to be untouched by default.');
+        .withContext('Expected the selection-list to be untouched by default.').toBe(false);
 
       dispatchFakeEvent(selectionListDebug.nativeElement, 'blur');
       fixture.detectChanges();
       tick();
 
-      expect(ngModel.touched).toBe(false, 'Expected the selection-list to remain untouched.');
+      expect(ngModel.touched)
+        .withContext('Expected the selection-list to remain untouched.').toBe(false);
     }));
 
     it('should mark the model as touched when a list item is blurred', fakeAsync(() => {
       expect(ngModel.touched)
-        .toBe(false, 'Expected the selection-list to be untouched by default.');
+        .withContext('Expected the selection-list to be untouched by default.').toBe(false);
 
       dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-list-option'), 'blur');
       fixture.detectChanges();
       tick();
 
       expect(ngModel.touched)
-        .toBe(true, 'Expected the selection-list to be touched after an item is blurred.');
+        .withContext('Expected the selection-list to be touched after an item is blurred.')
+        .toBe(true);
     }));
 
     it('should be pristine by default', fakeAsync(() => {
@@ -1295,7 +1297,7 @@ describe('MatSelectionList with forms', () => {
       tick();
 
       expect(ngModel.pristine)
-        .toBe(true, 'Expected the selection-list to be pristine by default.');
+        .withContext('Expected the selection-list to be pristine by default.').toBe(true);
 
       listOptions[1].toggle();
       fixture.detectChanges();
@@ -1303,7 +1305,7 @@ describe('MatSelectionList with forms', () => {
       tick();
 
       expect(ngModel.pristine)
-        .toBe(false, 'Expected the selection-list to be dirty after state change.');
+        .withContext('Expected the selection-list to be dirty after state change.').toBe(false);
     }));
 
     it('should remove a selected option from the value on destroy', fakeAsync(() => {
@@ -1424,28 +1426,28 @@ describe('MatSelectionList with forms', () => {
 
     it('should be able to disable options from the control', () => {
       expect(selectionList.disabled)
-        .toBe(false, 'Expected the selection list to be enabled.');
+        .withContext('Expected the selection list to be enabled.').toBe(false);
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
 
       expect(selectionList.disabled)
-        .toBe(true, 'Expected the selection list to be disabled.');
+        .withContext('Expected the selection list to be disabled.').toBe(true);
       expect(listOptions.every(option => option.disabled))
-        .toBe(true, 'Expected every list option to be disabled.');
+        .withContext('Expected every list option to be disabled.').toBe(true);
     });
 
     it('should be able to update the disabled property after form control disabling', () => {
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
 
       expect(listOptions.every(option => option.disabled))
-        .toBe(true, 'Expected every list option to be disabled.');
+        .withContext('Expected every list option to be disabled.').toBe(true);
 
       // Previously the selection list has been disabled through FormControl#disable. Now we
       // want to verify that we can still change the disabled state through updating the disabled
@@ -1455,24 +1457,26 @@ describe('MatSelectionList with forms', () => {
       fixture.detectChanges();
 
       expect(listOptions.every(option => !option.disabled))
-        .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
     });
 
     it('should be able to set the value through the form control', () => {
       expect(listOptions.every(option => !option.selected))
-        .toBe(true, 'Expected every list option to be unselected.');
+        .withContext('Expected every list option to be unselected.').toBe(true);
 
       fixture.componentInstance.formControl.setValue(['opt2', 'opt3']);
       fixture.detectChanges();
 
-      expect(listOptions[1].selected).toBe(true, 'Expected second option to be selected.');
-      expect(listOptions[2].selected).toBe(true, 'Expected third option to be selected.');
+      expect(listOptions[1].selected)
+        .withContext('Expected second option to be selected.').toBe(true);
+      expect(listOptions[2].selected)
+        .withContext('Expected third option to be selected.').toBe(true);
 
       fixture.componentInstance.formControl.setValue(null);
       fixture.detectChanges();
 
       expect(listOptions.every(option => !option.selected))
-        .toBe(true, 'Expected every list option to be unselected.');
+        .withContext('Expected every list option to be unselected.').toBe(true);
     });
 
     it('should deselect option whose value no longer matches', () => {
@@ -1481,12 +1485,14 @@ describe('MatSelectionList with forms', () => {
       fixture.componentInstance.formControl.setValue(['opt2']);
       fixture.detectChanges();
 
-      expect(option.selected).toBe(true, 'Expected option to be selected.');
+      expect(option.selected)
+        .withContext('Expected option to be selected.').toBe(true);
 
       option.value = 'something-different';
       fixture.detectChanges();
 
-      expect(option.selected).toBe(false, 'Expected option not to be selected.');
+      expect(option.selected)
+        .withContext('Expected option not to be selected.').toBe(false);
       expect(fixture.componentInstance.formControl.value).toEqual([]);
     });
 
@@ -1500,8 +1506,10 @@ describe('MatSelectionList with forms', () => {
       listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
         .map(optionDebugEl => optionDebugEl.componentInstance);
 
-      expect(listOptions[1].selected).toBe(true, 'Expected second option to be selected.');
-      expect(listOptions[2].selected).toBe(true, 'Expected third option to be selected.');
+      expect(listOptions[1].selected)
+        .withContext('Expected second option to be selected.').toBe(true);
+      expect(listOptions[2].selected)
+        .withContext('Expected third option to be selected.').toBe(true);
     });
 
     it('should not clear the form control when the list is destroyed', fakeAsync(() => {
diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts
index cb5c593dbc9b..1db31075391a 100644
--- a/src/material/menu/menu.spec.ts
+++ b/src/material/menu/menu.spec.ts
@@ -562,7 +562,7 @@ describe('MatMenu', () => {
       expect(panel.classList).not.toContain('custom-one');
       expect(panel.classList).toContain('custom-two');
       expect(panel.classList)
-          .toContain('mat-elevation-z4', 'Expected mat-elevation-z4 not to be removed');
+        .withContext('Expected mat-elevation-z4 not to be removed').toContain('mat-elevation-z4');
     }));
 
   it('should set the "menu" role on the overlay panel', fakeAsync(() => {
@@ -574,10 +574,11 @@ describe('MatMenu', () => {
 
     const menuPanel = overlayContainerElement.querySelector('.mat-menu-panel');
 
-    expect(menuPanel).toBeTruthy('Expected to find a menu panel.');
+    expect(menuPanel).withContext('Expected to find a menu panel.').toBeTruthy();
 
     const role = menuPanel ? menuPanel.getAttribute('role') : '';
-    expect(role).toBe('menu', 'Expected panel to have the "menu" role.');
+    expect(role)
+      .withContext('Expected panel to have the "menu" role.').toBe('menu');
   }));
 
   it('should forward ARIA attributes to the menu panel', fakeAsync(() => {
@@ -979,7 +980,8 @@ describe('MatMenu', () => {
       let menuPanel = document.querySelector('.mat-menu-panel')!;
       let items = menuPanel.querySelectorAll('.mat-menu-panel [mat-menu-item]');
 
-      expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected first item to be focused on open').toBe(items[0]);
 
       // Add a new item after the first one.
       fixture.componentInstance.items.splice(1, 0, {label: 'Calzone', disabled: false});
@@ -990,7 +992,8 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick();
 
-      expect(document.activeElement).toBe(items[1], 'Expected second item to be focused');
+      expect(document.activeElement)
+        .withContext('Expected second item to be focused').toBe(items[1]);
       flush();
     }));
 
@@ -1010,18 +1013,21 @@ describe('MatMenu', () => {
     const menuPanel = document.querySelector('.mat-menu-panel')!;
     const items = menuPanel.querySelectorAll('.mat-menu-panel [mat-menu-item]');
 
-    expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+    expect(document.activeElement)
+      .withContext('Expected first item to be focused on open').toBe(items[0]);
 
     fixture.componentInstance.itemInstances.toArray()[3].focus();
     fixture.detectChanges();
 
-    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fourth item to be focused').toBe(items[3]);
 
     dispatchKeyboardEvent(menuPanel, 'keydown', DOWN_ARROW);
     fixture.detectChanges();
     tick();
 
-    expect(document.activeElement).toBe(items[4], 'Expected fifth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fifth item to be focused').toBe(items[4]);
     flush();
   }));
 
@@ -1041,7 +1047,7 @@ describe('MatMenu', () => {
     flush();
 
     expect(overlayContainerElement.querySelectorAll('.mat-menu-item').length)
-        .toBe(2, 'Expected two open menus');
+      .withContext('Expected two open menus').toBe(2);
   }));
 
   it('should focus the menu panel if all items are disabled', fakeAsync(() => {
@@ -1100,7 +1106,8 @@ describe('MatMenu', () => {
     tick(500);
 
     const items = document.querySelectorAll('.mat-menu-panel [mat-menu-item]');
-    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+    expect(document.activeElement)
+      .withContext('Expected fourth item to be focused').toBe(items[3]);
   }));
 
   it('should default to the "below" and "after" positions', fakeAsync(() => {
@@ -1126,9 +1133,11 @@ describe('MatMenu', () => {
 
       const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
 
-      expect(panel).toBeTruthy('Expected panel to be defined');
-      expect(panel.textContent).toContain('Another item', 'Expected panel to have correct content');
-      expect(fixture.componentInstance.trigger.menuOpen).toBe(true, 'Expected menu to be open');
+      expect(panel).withContext('Expected panel to be defined').toBeTruthy();
+      expect(panel.textContent)
+        .withContext('Expected panel to have correct content').toContain('Another item');
+      expect(fixture.componentInstance.trigger.menuOpen)
+        .withContext('Expected menu to be open').toBe(true);
     }));
 
     it('should detach the lazy content when the menu is closed', fakeAsync(() => {
@@ -1155,23 +1164,27 @@ describe('MatMenu', () => {
         fixture.detectChanges();
         const trigger = fixture.componentInstance.trigger;
 
-        expect(trigger.menuOpen).toBe(false, 'Expected menu to start off closed');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to start off closed').toBe(false);
 
         trigger.openMenu();
         fixture.detectChanges();
         tick(500);
 
-        expect(trigger.menuOpen).toBe(true, 'Expected menu to be open');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to be open').toBe(true);
 
         trigger.closeMenu();
         fixture.detectChanges();
 
         expect(trigger.menuOpen)
-            .toBe(true, 'Expected menu to be considered open while the close animation is running');
+          .withContext('Expected menu to be considered open while the close animation is running')
+          .toBe(true);
         tick(500);
         fixture.detectChanges();
 
-        expect(trigger.menuOpen).toBe(false, 'Expected menu to be closed');
+        expect(trigger.menuOpen)
+          .withContext('Expected menu to be closed').toBe(false);
       }));
 
     it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => {
@@ -1193,7 +1206,8 @@ describe('MatMenu', () => {
 
       const item = document.querySelector('.mat-menu-panel [mat-menu-item]')!;
 
-      expect(document.activeElement).toBe(item, 'Expected first item to be focused');
+      expect(document.activeElement)
+        .withContext('Expected first item to be focused').toBe(item);
     }));
 
     it('should be able to open the same menu with a different context', fakeAsync(() => {
@@ -1287,7 +1301,8 @@ describe('MatMenu', () => {
       let panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
 
       expect(Math.floor(panel.getBoundingClientRect().bottom))
-          .toBe(Math.floor(trigger.getBoundingClientRect().top), 'Expected menu to open above');
+        .withContext('Expected menu to open above')
+        .toBe(Math.floor(trigger.getBoundingClientRect().top));
 
       fixture.componentInstance.trigger.closeMenu();
       fixture.detectChanges();
@@ -1302,7 +1317,8 @@ describe('MatMenu', () => {
       panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
 
       expect(Math.floor(panel.getBoundingClientRect().top))
-          .toBe(Math.floor(trigger.getBoundingClientRect().bottom), 'Expected menu to open below');
+        .withContext('Expected menu to open below')
+        .toBe(Math.floor(trigger.getBoundingClientRect().bottom));
     }));
 
     it('should not throw if a menu reposition is requested while the menu is closed',
@@ -1336,13 +1352,14 @@ describe('MatMenu', () => {
         // To find the overlay left, subtract the menu width from the origin's right side.
         const expectedLeft = triggerRect.right - overlayRect.width;
         expect(Math.floor(overlayRect.left))
-            .toBe(Math.floor(expectedLeft),
-                `Expected menu to open in "before" position if "after" position wouldn't fit.`);
+          .withContext(`Expected menu to open in "before" position if "after" position ` +
+                       `wouldn't fit.`).toBe(Math.floor(expectedLeft));
 
+        // The y-position of the overlay should be unaffected, as it can already fit vertically
         // The y-position of the overlay should be unaffected, as it can already fit vertically
         expect(Math.floor(overlayRect.top))
-            .toBe(Math.floor(triggerRect.bottom),
-                `Expected menu top position to be unchanged if it can fit in the viewport.`);
+          .withContext(`Expected menu top position to be unchanged if it can fit in the viewport.`)
+          .toBe(Math.floor(triggerRect.bottom));
       }));
 
     it('should fall back to "above" mode if "below" mode would not fit on screen', fakeAsync(() => {
@@ -1363,13 +1380,14 @@ describe('MatMenu', () => {
       const overlayRect = overlayPane.getBoundingClientRect();
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(triggerRect.top),
-              `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "above" position if "below" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.top));
 
+      // The x-position of the overlay should be unaffected, as it can already fit horizontally
       // The x-position of the overlay should be unaffected, as it can already fit horizontally
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(triggerRect.left),
-              `Expected menu x position to be unchanged if it can fit in the viewport.`);
+        .withContext(`Expected menu x position to be unchanged if it can fit in the viewport.`)
+        .toBe(Math.floor(triggerRect.left));
     }));
 
     it('should re-position menu on both axes if both defaults would not fit', fakeAsync(() => {
@@ -1393,12 +1411,12 @@ describe('MatMenu', () => {
       const expectedLeft = triggerRect.right - overlayRect.width;
 
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(expectedLeft),
-              `Expected menu to open in "before" position if "after" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "before" position if "after" position wouldn't fit.`)
+        .toBe(Math.floor(expectedLeft));
 
       expect(Math.floor(overlayRect.bottom))
-          .toBe(Math.floor(triggerRect.top),
-              `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "above" position if "below" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.top));
     }));
 
     it('should re-position a menu with custom position set', fakeAsync(() => {
@@ -1413,17 +1431,21 @@ describe('MatMenu', () => {
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
+      // As designated "before" position won't fit on screen, the menu should fall back
+      // to "after" mode, where the left sides of the overlay and trigger are aligned.
       // As designated "before" position won't fit on screen, the menu should fall back
       // to "after" mode, where the left sides of the overlay and trigger are aligned.
       expect(Math.floor(overlayRect.left))
-          .toBe(Math.floor(triggerRect.left),
-              `Expected menu to open in "after" position if "before" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "after" position if "before" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.left));
 
+      // As designated "above" position won't fit on screen, the menu should fall back
+      // to "below" mode, where the top edges of the overlay and trigger are aligned.
       // As designated "above" position won't fit on screen, the menu should fall back
       // to "below" mode, where the top edges of the overlay and trigger are aligned.
       expect(Math.floor(overlayRect.top))
-          .toBe(Math.floor(triggerRect.bottom),
-              `Expected menu to open in "below" position if "above" position wouldn't fit.`);
+        .withContext(`Expected menu to open in "below" position if "above" position wouldn't fit.`)
+        .toBe(Math.floor(triggerRect.bottom));
     }));
 
     function getOverlayPane(): HTMLElement {
@@ -1486,10 +1508,11 @@ describe('MatMenu', () => {
       it('positions the overlay below the trigger', fakeAsync(() => {
         subject.openMenu();
 
+        // Since the menu is overlaying the trigger, the overlay top should be the trigger top.
         // Since the menu is overlaying the trigger, the overlay top should be the trigger top.
         expect(Math.floor(subject.overlayRect.top))
-            .toBe(Math.floor(subject.triggerRect.top),
-                `Expected menu to open in default "below" position.`);
+          .withContext(`Expected menu to open in default "below" position.`)
+          .toBe(Math.floor(subject.triggerRect.top));
       }));
     });
 
@@ -1501,10 +1524,11 @@ describe('MatMenu', () => {
       it('positions the overlay below the trigger', fakeAsync(() => {
         subject.openMenu();
 
+        // Since the menu is below the trigger, the overlay top should be the trigger bottom.
         // Since the menu is below the trigger, the overlay top should be the trigger bottom.
         expect(Math.floor(subject.overlayRect.top))
-            .toBe(Math.floor(subject.triggerRect.bottom),
-                `Expected menu to open directly below the trigger.`);
+          .withContext(`Expected menu to open directly below the trigger.`)
+          .toBe(Math.floor(subject.triggerRect.bottom));
       }));
 
       it('supports above position fall back', fakeAsync(() => {
@@ -1514,10 +1538,11 @@ describe('MatMenu', () => {
         subject.trigger.style.bottom = '0';
         subject.openMenu();
 
+        // Since the menu is above the trigger, the overlay bottom should be the trigger top.
         // Since the menu is above the trigger, the overlay bottom should be the trigger top.
         expect(Math.floor(subject.overlayRect.bottom))
-            .toBe(Math.floor(subject.triggerRect.top),
-                `Expected menu to open in "above" position if "below" position wouldn't fit.`);
+          .withContext(`Expected menu to open in "above" position if "below" position ` +
+                       `wouldn't fit.`).toBe(Math.floor(subject.triggerRect.top));
       }));
 
       it('repositions the origin to be below, so the menu opens from the trigger', fakeAsync(() => {
@@ -1722,7 +1747,7 @@ describe('MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [mat-menu-item]'));
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')!;
@@ -1733,16 +1758,17 @@ describe('MatMenu', () => {
       fixture.detectChanges();
 
       expect(levelOneTrigger.classList)
-          .toContain('mat-menu-item-highlighted', 'Expected the trigger to be highlighted');
+        .withContext('Expected the trigger to be highlighted')
+        .toContain('mat-menu-item-highlighted');
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
       expect(levelOneTrigger.classList)
           .not.toContain('mat-menu-item-highlighted',
               'Expected the trigger to not be highlighted');
@@ -1767,14 +1793,14 @@ describe('MatMenu', () => {
         tick();
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(3, 'Expected three open menus');
+          .withContext('Expected three open menus').toBe(3);
 
         dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
         fixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
       }));
 
       it('should close submenu when hovering over disabled sibling item', fakeAsync(() => {
@@ -1790,7 +1816,7 @@ describe('MatMenu', () => {
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
 
         items[1].componentInstance.disabled = true;
         fixture.detectChanges();
@@ -1801,7 +1827,7 @@ describe('MatMenu', () => {
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
       }));
 
     it('should not open submenu when hovering over disabled trigger', fakeAsync(() => {
@@ -1811,7 +1837,7 @@ describe('MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const item = fixture.debugElement.query(By.directive(MatMenuItem))!;
 
@@ -1824,7 +1850,7 @@ describe('MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected to remain at one open menu');
+        .withContext('Expected to remain at one open menu').toBe(1);
     }));
 
 
@@ -1834,7 +1860,7 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1842,12 +1868,12 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       levelOneTrigger.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected repeat clicks not to close the menu.');
+        .withContext('Expected repeat clicks not to close the menu.').toBe(2);
     }));
 
     it('should open and close a nested menu with arrow keys in ltr', fakeAsync(() => {
@@ -1855,7 +1881,7 @@ describe('MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1864,7 +1890,8 @@ describe('MatMenu', () => {
 
       const panels = overlay.querySelectorAll('.mat-menu-panel');
 
-      expect(panels.length).toBe(2, 'Expected two open menus');
+      expect(panels.length)
+        .withContext('Expected two open menus').toBe(2);
       dispatchKeyboardEvent(panels[1], 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       tick(500);
@@ -1877,7 +1904,7 @@ describe('MatMenu', () => {
       instance.rootTriggerEl.nativeElement.click();
       fixture.detectChanges();
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const levelOneTrigger = overlay.querySelector('#level-one-trigger')! as HTMLElement;
 
@@ -1886,7 +1913,8 @@ describe('MatMenu', () => {
 
       const panels = overlay.querySelectorAll('.mat-menu-panel');
 
-      expect(panels.length).toBe(2, 'Expected two open menus');
+      expect(panels.length)
+        .withContext('Expected two open menus').toBe(2);
       dispatchKeyboardEvent(panels[1], 'keydown', RIGHT_ARROW);
       fixture.detectChanges();
       tick(500);
@@ -1906,13 +1934,13 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one menu to remain open');
+        .withContext('Expected one menu to remain open').toBe(1);
 
       dispatchKeyboardEvent(menu, 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one menu to remain open');
+        .withContext('Expected one menu to remain open').toBe(1);
     }));
 
     it('should close all of the menus when the backdrop is clicked', fakeAsync(() => {
@@ -1930,18 +1958,19 @@ describe('MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(3, 'Expected three open menus');
+        .withContext('Expected three open menus').toBe(3);
       expect(overlay.querySelectorAll('.cdk-overlay-backdrop').length)
-          .toBe(1, 'Expected one backdrop element');
+        .withContext('Expected one backdrop element').toBe(1);
       expect(overlay.querySelectorAll('.mat-menu-panel, .cdk-overlay-backdrop')[0].classList)
-          .toContain('cdk-overlay-backdrop', 'Expected backdrop to be beneath all of the menus');
+        .withContext('Expected backdrop to be beneath all of the menus')
+        .toContain('cdk-overlay-backdrop');
 
       (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should shift focus between the sub-menus', fakeAsync(() => {
@@ -1951,35 +1980,35 @@ describe('MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelector('.mat-menu-panel')!.contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the root menu');
+        .withContext('Expected focus to be inside the root menu').toBe(true);
 
       instance.levelOneTrigger.openMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel')[1].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the first nested menu');
+        .withContext('Expected focus to be inside the first nested menu').toBe(true);
 
       instance.levelTwoTrigger.openMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel')[2].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be inside the second nested menu');
+        .withContext('Expected focus to be inside the second nested menu').toBe(true);
 
       instance.levelTwoTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel')[1].contains(document.activeElement))
-          .toBe(true, 'Expected focus to be back inside the first nested menu');
+        .withContext('Expected focus to be back inside the first nested menu').toBe(true);
 
       instance.levelOneTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelector('.mat-menu-panel')!.contains(document.activeElement))
-          .toBe(true, 'Expected focus to be back inside the root menu');
+        .withContext('Expected focus to be back inside the root menu').toBe(true);
     }));
 
     it('should restore focus to a nested trigger when navgating via the keyboard', fakeAsync(() => {
@@ -2093,14 +2122,15 @@ describe('MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       (menus[2].querySelector('.mat-menu-item')! as HTMLElement).click();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should close all of the menus when the user tabs away', fakeAsync(() => {
@@ -2116,14 +2146,15 @@ describe('MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       dispatchKeyboardEvent(menus[menus.length - 1], 'keydown', TAB);
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should set a class on the menu items that trigger a sub-menu', fakeAsync(() => {
@@ -2157,11 +2188,13 @@ describe('MatMenu', () => {
       const menus = overlay.querySelectorAll('.mat-menu-panel');
 
       expect(menus[0].classList)
-        .toContain('mat-elevation-z4', 'Expected root menu to have base elevation.');
+        .withContext('Expected root menu to have base elevation.').toContain('mat-elevation-z4');
       expect(menus[1].classList)
-        .toContain('mat-elevation-z5', 'Expected first sub-menu to have base elevation + 1.');
+        .withContext('Expected first sub-menu to have base elevation + 1.')
+        .toContain('mat-elevation-z5');
       expect(menus[2].classList)
-        .toContain('mat-elevation-z6', 'Expected second sub-menu to have base elevation + 2.');
+        .withContext('Expected second sub-menu to have base elevation + 2.')
+        .toContain('mat-elevation-z6');
     }));
 
     it('should update the elevation when the same menu is opened at a different depth',
@@ -2179,14 +2212,15 @@ describe('MatMenu', () => {
         let lastMenu = overlay.querySelectorAll('.mat-menu-panel')[2];
 
         expect(lastMenu.classList)
-            .toContain('mat-elevation-z6', 'Expected menu to have the base elevation plus two.');
+          .withContext('Expected menu to have the base elevation plus two.')
+          .toContain('mat-elevation-z6');
 
         (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click();
         fixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(0, 'Expected no open menus');
+          .withContext('Expected no open menus').toBe(0);
 
         instance.alternateTrigger.openMenu();
         fixture.detectChanges();
@@ -2194,10 +2228,11 @@ describe('MatMenu', () => {
 
         lastMenu = overlay.querySelector('.mat-menu-panel') as HTMLElement;
 
-        expect(lastMenu.classList).not.toContain('mat-elevation-z6',
-          'Expected menu not to maintain old elevation.');
-        expect(lastMenu.classList).toContain('mat-elevation-z4',
-          'Expected menu to have the proper updated elevation.');
+        expect(lastMenu.classList).not.withContext('Expected menu not to maintain old elevation.')
+          .toContain('mat-elevation-z6');
+        expect(lastMenu.classList)
+          .withContext('Expected menu to have the proper updated elevation.')
+          .toContain('mat-elevation-z4');
       }));
 
     it('should not change focus origin if origin not specified for trigger', fakeAsync(() => {
@@ -2235,9 +2270,9 @@ describe('MatMenu', () => {
           overlayContainerElement.querySelectorAll('.mat-menu-panel')[1].classList;
 
       expect(menuClasses)
-          .toContain('mat-elevation-z24', 'Expected user elevation to be maintained');
+        .withContext('Expected user elevation to be maintained').toContain('mat-elevation-z24');
       expect(menuClasses)
-          .not.toContain('mat-elevation-z3', 'Expected no stacked elevation.');
+          .not.withContext('Expected no stacked elevation.').toContain('mat-elevation-z3');
     }));
 
     it('should close all of the menus when the root is closed programmatically', fakeAsync(() => {
@@ -2253,14 +2288,15 @@ describe('MatMenu', () => {
 
       const menus = overlay.querySelectorAll('.mat-menu-panel');
 
-      expect(menus.length).toBe(3, 'Expected three open menus');
+      expect(menus.length)
+        .withContext('Expected three open menus').toBe(3);
 
       instance.rootTrigger.closeMenu();
       fixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(0, 'Expected no open menus');
+        .withContext('Expected no open menus').toBe(0);
     }));
 
     it('should toggle a nested menu when its trigger is added after init', fakeAsync(() => {
@@ -2269,7 +2305,7 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       instance.showLazy = true;
       fixture.detectChanges();
@@ -2282,9 +2318,10 @@ describe('MatMenu', () => {
       fixture.detectChanges();
 
       expect(lazyTrigger.classList)
-          .toContain('mat-menu-item-highlighted', 'Expected the trigger to be highlighted');
+        .withContext('Expected the trigger to be highlighted')
+        .toContain('mat-menu-item-highlighted');
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should prevent the default mousedown action if the menu item opens a sub-menu',
@@ -2315,13 +2352,13 @@ describe('MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should be able to trigger the same nested menu from different triggers', fakeAsync(() => {
@@ -2333,7 +2370,7 @@ describe('MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const triggers = overlay.querySelectorAll('.level-one-trigger');
 
@@ -2341,14 +2378,14 @@ describe('MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(triggers[1], 'mouseenter');
       repeaterFixture.detectChanges();
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should close the initial menu if the user moves away while animating', fakeAsync(() => {
@@ -2360,7 +2397,7 @@ describe('MatMenu', () => {
       repeaterFixture.detectChanges();
       tick(500);
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(1, 'Expected one open menu');
+        .withContext('Expected one open menu').toBe(1);
 
       const triggers = overlay.querySelectorAll('.level-one-trigger');
 
@@ -2372,7 +2409,7 @@ describe('MatMenu', () => {
       tick(500);
 
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
     }));
 
     it('should be able to open a submenu through an item that is not a direct descendant ' +
@@ -2385,14 +2422,14 @@ describe('MatMenu', () => {
         nestedFixture.detectChanges();
         tick(500);
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
 
         dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
       }));
 
     it('should not close when hovering over a menu item inside a sub-menu panel that is declared' +
@@ -2405,21 +2442,21 @@ describe('MatMenu', () => {
         nestedFixture.detectChanges();
         tick(500);
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(1, 'Expected one open menu');
+          .withContext('Expected one open menu').toBe(1);
 
         dispatchMouseEvent(overlay.querySelector('.level-one-trigger')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(2, 'Expected two open menus');
+          .withContext('Expected two open menus').toBe(2);
 
         dispatchMouseEvent(overlay.querySelector('.level-two-item')!, 'mouseenter');
         nestedFixture.detectChanges();
         tick(500);
 
         expect(overlay.querySelectorAll('.mat-menu-panel').length)
-            .toBe(2, 'Expected two open menus to remain');
+          .withContext('Expected two open menus to remain').toBe(2);
       }));
 
     it('should not re-focus a child menu trigger when hovering another trigger', fakeAsync(() => {
@@ -2436,7 +2473,7 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick();
       expect(overlay.querySelectorAll('.mat-menu-panel').length)
-          .toBe(2, 'Expected two open menus');
+        .withContext('Expected two open menus').toBe(2);
 
       dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter');
       fixture.detectChanges();
diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts
index fdc3d576eb84..5f09267b54a4 100644
--- a/src/material/paginator/paginator.spec.ts
+++ b/src/material/paginator/paginator.spec.ts
@@ -130,19 +130,23 @@ describe('MatPaginator', () => {
   it('should be able to show the first/last buttons', () => {
     const fixture = createComponent(MatPaginatorApp);
     expect(getFirstButton(fixture))
-        .toBeNull('Expected first button to not exist.');
+      .withContext('Expected first button to not exist.')
+      .toBeNull();
 
     expect(getLastButton(fixture))
-        .toBeNull('Expected last button to not exist.');
+      .withContext('Expected last button to not exist.')
+      .toBeNull();
 
     fixture.componentInstance.showFirstLastButtons = true;
     fixture.detectChanges();
 
     expect(getFirstButton(fixture))
-        .toBeTruthy('Expected first button to be rendered.');
+      .withContext('Expected first button to be rendered.')
+      .toBeTruthy();
 
     expect(getLastButton(fixture))
-        .toBeTruthy('Expected last button to be rendered.');
+      .withContext('Expected last button to be rendered.')
+      .toBeTruthy();
   });
 
   it('should mark itself as initialized', fakeAsync(() => {
@@ -414,13 +418,15 @@ describe('MatPaginator', () => {
     const element = fixture.nativeElement;
 
     expect(element.querySelector('.mat-paginator-page-size'))
-        .toBeTruthy('Expected select to be rendered.');
+      .withContext('Expected select to be rendered.')
+      .toBeTruthy();
 
     fixture.componentInstance.hidePageSize = true;
     fixture.detectChanges();
 
     expect(element.querySelector('.mat-paginator-page-size'))
-        .toBeNull('Expected select to be removed.');
+      .withContext('Expected select to be removed.')
+      .toBeNull();
   });
 
   it('should be able to disable all the controls in the paginator via the binding', () => {
diff --git a/src/material/progress-bar/progress-bar.spec.ts b/src/material/progress-bar/progress-bar.spec.ts
index f9136a1dab71..4c504b143f24 100644
--- a/src/material/progress-bar/progress-bar.spec.ts
+++ b/src/material/progress-bar/progress-bar.spec.ts
@@ -166,13 +166,13 @@ describe('MatProgressBar', () => {
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.getAttribute('aria-valuenow'))
-            .toBe('50', 'Expected aria-valuenow to be set in determinate mode.');
+          .withContext('Expected aria-valuenow to be set in determinate mode.').toBe('50');
 
         progressComponent.mode = 'indeterminate';
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.hasAttribute('aria-valuenow'))
-            .toBe(false, 'Expect aria-valuenow to be cleared in indeterminate mode.');
+          .withContext('Expect aria-valuenow to be cleared in indeterminate mode.').toBe(false);
       });
 
       it('should remove the `aria-valuenow` attribute in query mode', () => {
@@ -187,13 +187,13 @@ describe('MatProgressBar', () => {
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.getAttribute('aria-valuenow'))
-            .toBe('50', 'Expected aria-valuenow to be set in determinate mode.');
+          .withContext('Expected aria-valuenow to be set in determinate mode.').toBe('50');
 
         progressComponent.mode = 'query';
         fixture.detectChanges();
 
         expect(progressElement.nativeElement.hasAttribute('aria-valuenow'))
-            .toBe(false, 'Expect aria-valuenow to be cleared in query mode.');
+          .withContext('Expect aria-valuenow to be cleared in query mode.').toBe(false);
       });
 
     });
diff --git a/src/material/progress-spinner/progress-spinner.spec.ts b/src/material/progress-spinner/progress-spinner.spec.ts
index 6961d4062a52..47f36f18bd10 100644
--- a/src/material/progress-spinner/progress-spinner.spec.ts
+++ b/src/material/progress-spinner/progress-spinner.spec.ts
@@ -146,15 +146,20 @@ describe('MatProgressSpinner', () => {
     fixture.detectChanges();
 
     expect(parseInt(spinner.style.width))
-        .toBe(32, 'Expected the custom diameter to be applied to the host element width.');
+      .withContext('Expected the custom diameter to be applied to the host element width.')
+      .toBe(32);
     expect(parseInt(spinner.style.height))
-        .toBe(32, 'Expected the custom diameter to be applied to the host element height.');
+      .withContext('Expected the custom diameter to be applied to the host element height.')
+      .toBe(32);
     expect(parseInt(svgElement.style.width))
-        .toBe(32, 'Expected the custom diameter to be applied to the svg element width.');
+      .withContext('Expected the custom diameter to be applied to the svg element width.')
+      .toBe(32);
     expect(parseInt(svgElement.style.height))
-        .toBe(32, 'Expected the custom diameter to be applied to the svg element height.');
+      .withContext('Expected the custom diameter to be applied to the svg element height.')
+      .toBe(32);
     expect(svgElement.getAttribute('viewBox'))
-        .toBe('0 0 25.2 25.2', 'Expected the custom diameter to be applied to the svg viewBox.');
+      .withContext('Expected the custom diameter to be applied to the svg viewBox.')
+      .toBe('0 0 25.2 25.2');
   });
 
   it('should add a style tag with the indeterminate animation to the document head when using a ' +
@@ -190,15 +195,20 @@ describe('MatProgressSpinner', () => {
       const svgElement = fixture.nativeElement.querySelector('svg');
 
       expect(parseFloat(spinner.style.width))
-        .toBe(32.5, 'Expected the custom diameter to be applied to the host element width.');
+        .withContext('Expected the custom diameter to be applied to the host element width.')
+        .toBe(32.5);
       expect(parseFloat(spinner.style.height))
-        .toBe(32.5, 'Expected the custom diameter to be applied to the host element height.');
+        .withContext('Expected the custom diameter to be applied to the host element height.')
+        .toBe(32.5);
       expect(parseFloat(svgElement.style.width))
-        .toBe(32.5, 'Expected the custom diameter to be applied to the svg element width.');
+        .withContext('Expected the custom diameter to be applied to the svg element width.')
+        .toBe(32.5);
       expect(parseFloat(svgElement.style.height))
-        .toBe(32.5, 'Expected the custom diameter to be applied to the svg element height.');
+        .withContext('Expected the custom diameter to be applied to the svg element height.')
+        .toBe(32.5);
       expect(svgElement.getAttribute('viewBox'))
-        .toBe('0 0 25.75 25.75', 'Expected the custom diameter to be applied to the svg viewBox.');
+        .withContext('Expected the custom diameter to be applied to the svg viewBox.')
+        .toBe('0 0 25.75 25.75');
   });
 
   it('should handle creating animation style tags based on a floating point diameter', () => {
@@ -209,10 +219,12 @@ describe('MatProgressSpinner', () => {
 
     const circleElement = fixture.nativeElement.querySelector('circle');
 
-    expect(circleElement.style.animationName).toBe('mat-progress-spinner-stroke-rotate-32_5',
-    'Expected the spinner circle element to have an animation name based on the custom diameter');
-    expect(document.head.querySelectorAll('style[mat-spinner-animation="32_5"]').length).toBe(1,
-    'Expected a style tag with the indeterminate animation to be attached to the document head');
+    expect(circleElement.style.animationName)
+      .withContext('Expected the spinner circle element to have an animation name based on ' +
+                   'the custom diameter').toBe('mat-progress-spinner-stroke-rotate-32_5');
+    expect(document.head.querySelectorAll('style[mat-spinner-animation="32_5"]').length)
+      .withContext('Expected a style tag with the indeterminate animation to be ' +
+                   'attached to the document head').toBe(1);
   });
 
   it('should allow a custom stroke width', () => {
@@ -224,10 +236,12 @@ describe('MatProgressSpinner', () => {
     const circleElement = fixture.nativeElement.querySelector('circle');
     const svgElement = fixture.nativeElement.querySelector('svg');
 
-    expect(parseInt(circleElement.style.strokeWidth)).toBe(40, 'Expected the custom stroke ' +
-      'width to be applied to the circle element as a percentage of the element size.');
+    expect(parseInt(circleElement.style.strokeWidth))
+      .withContext('Expected the custom stroke ' +
+    'width to be applied to the circle element as a percentage of the element size.').toBe(40);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.');
+      .withContext('Expected the viewBox to be adjusted based on the stroke width.')
+      .toBe('0 0 130 130');
   });
 
   it('should allow floating point values for custom stroke width', () => {
@@ -239,10 +253,12 @@ describe('MatProgressSpinner', () => {
     const circleElement = fixture.nativeElement.querySelector('circle');
     const svgElement = fixture.nativeElement.querySelector('svg');
 
-    expect(parseFloat(circleElement.style.strokeWidth)).toBe(40.5, 'Expected the custom stroke ' +
-      'width to be applied to the circle element as a percentage of the element size.');
+    expect(parseFloat(circleElement.style.strokeWidth))
+      .withContext('Expected the custom stroke ' +
+    'width to be applied to the circle element as a percentage of the element size.').toBe(40.5);
     expect(svgElement.getAttribute('viewBox'))
-      .toBe('0 0 130.5 130.5', 'Expected the viewBox to be adjusted based on the stroke width.');
+      .withContext('Expected the viewBox to be adjusted based on the stroke width.')
+      .toBe('0 0 130.5 130.5');
   });
 
   it('should expand the host element if the stroke width is greater than the default', () => {
diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts
index db7c932ee2d6..f9ee52894f58 100644
--- a/src/material/radio/radio.spec.ts
+++ b/src/material/radio/radio.spec.ts
@@ -240,7 +240,8 @@ describe('MatRadio', () => {
       let rippleAmount = radioNativeElements[0]
           .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
 
-      expect(rippleAmount).toBe(0, 'Expected a disabled radio button to not show ripples');
+      expect(rippleAmount)
+        .withContext('Expected a disabled radio button to not show ripples').toBe(0);
 
       testComponent.isFirstDisabled = false;
       fixture.detectChanges();
@@ -252,7 +253,7 @@ describe('MatRadio', () => {
           .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
 
       expect(rippleAmount)
-        .toBe(1, 'Expected an enabled radio button to show ripples');
+        .withContext('Expected an enabled radio button to show ripples').toBe(1);
     });
 
     it('should not show ripples if matRippleDisabled input is set', () => {
@@ -330,43 +331,54 @@ describe('MatRadio', () => {
 
       expect(changeSpy).not.toHaveBeenCalled();
       expect(groupInstance.value).toBe('apple');
-      expect(groupInstance.selected).toBeFalsy('expect group selected to be null');
-      expect(radioInstances[0].checked).toBeFalsy('should not select the first button');
-      expect(radioInstances[1].checked).toBeFalsy('should not select the second button');
-      expect(radioInstances[2].checked).toBeFalsy('should not select the third button');
+      expect(groupInstance.selected)
+        .withContext('expect group selected to be null').toBeFalsy();
+      expect(radioInstances[0].checked)
+        .withContext('should not select the first button').toBeFalsy();
+      expect(radioInstances[1].checked)
+        .withContext('should not select the second button').toBeFalsy();
+      expect(radioInstances[2].checked)
+        .withContext('should not select the third button').toBeFalsy();
 
       radioInstances[0].value = 'apple';
 
       fixture.detectChanges();
 
-      expect(groupInstance.selected).toBe(
-        radioInstances[0], 'expect group selected to be first button');
-      expect(radioInstances[0].checked).toBeTruthy('expect group select the first button');
-      expect(radioInstances[1].checked).toBeFalsy('should not select the second button');
-      expect(radioInstances[2].checked).toBeFalsy('should not select the third button');
+      expect(groupInstance.selected)
+        .withContext('expect group selected to be first button').toBe(radioInstances[0]);
+      expect(radioInstances[0].checked)
+        .withContext('expect group select the first button').toBeTruthy();
+      expect(radioInstances[1].checked)
+        .withContext('should not select the second button').toBeFalsy();
+      expect(radioInstances[2].checked)
+        .withContext('should not select the third button')
+        .toBeFalsy();
     });
 
     it('should apply class based on color attribute', () => {
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-accent')))
-        .toBe(true, 'Expected every radio element to use the accent color by default.');
+        .withContext('Expected every radio element to use the accent color by default.').toBe(true);
 
       testComponent.color = 'primary';
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-primary')))
-        .toBe(true, 'Expected every radio element to use the primary color from the binding.');
+        .withContext('Expected every radio element to use the primary color from the binding.')
+        .toBe(true);
 
       testComponent.color = 'warn';
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-warn')))
-        .toBe(true, 'Expected every radio element to use the primary color from the binding.');
+        .withContext('Expected every radio element to use the primary color from the binding.')
+        .toBe(true);
 
       testComponent.color = null;
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-accent')))
-        .toBe(true, 'Expected every radio element to fallback to accent color if value is falsy.');
+        .withContext('Expected every radio element to fallback to accent color if value is falsy.')
+        .toBe(true);
     });
 
     it('should be able to inherit the color from the radio group', () => {
@@ -374,7 +386,7 @@ describe('MatRadio', () => {
       fixture.detectChanges();
 
       expect(radioNativeElements.every(radioEl => radioEl.classList.contains('mat-warn')))
-        .toBe(true, 'Expected every radio element to have the warn color.');
+        .withContext('Expected every radio element to have the warn color.').toBe(true);
     });
 
     it('should have the individual button color take precedence over the group color', () => {
@@ -443,14 +455,14 @@ describe('MatRadio', () => {
       const nodes: HTMLInputElement[] = innerRadios.map(radio => radio.nativeElement);
 
       expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all radios to have the initial name.');
+        .withContext('Expected all radios to have the initial name.').toBe(true);
 
       fixture.componentInstance.groupName = 'changed-name';
       fixture.detectChanges();
 
       expect(groupInstance.name).toBe('changed-name');
       expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
-          .toBe(true, 'Expected all radios to have the new name.');
+        .withContext('Expected all radios to have the new name.').toBe(true);
     });
 
     it('should check the corresponding radio button on group value change', () => {
@@ -774,13 +786,13 @@ describe('MatRadio', () => {
         .query(By.css('.mat-radio-button input'))!.nativeElement as HTMLInputElement;
 
       expect(radioButtonInput.tabIndex)
-        .toBe(0, 'Expected the tabindex to be set to "0" by default.');
+        .withContext('Expected the tabindex to be set to "0" by default.').toBe(0);
 
       fixture.componentInstance.tabIndex = 4;
       fixture.detectChanges();
 
       expect(radioButtonInput.tabIndex)
-        .toBe(4, 'Expected the tabindex to be set to "4".');
+        .withContext('Expected the tabindex to be set to "4".').toBe(4);
     });
 
     it('should remove the tabindex from the host element', () => {
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
index d70c8ecf105c..c0bcf597e96b 100644
--- a/src/material/schematics/ng-add/index.spec.ts
+++ b/src/material/schematics/ng-add/index.spec.ts
@@ -41,8 +41,8 @@ describe('ng-add schematic', () => {
   /** Expects the given file to be in the styles of the specified workspace project. */
   function expectProjectStyleFile(project: ProjectDefinition, filePath: string) {
     expect(getProjectTargetOptions(project, 'build').styles)
-        .toContain(
-            filePath, `Expected "${filePath}" to be added to the project styles in the workspace.`);
+      .withContext(`Expected "${filePath}" to be added to the project styles in the workspace.`)
+      .toContain(filePath);
   }
 
   /** Removes the specified dependency from the /package.json in the given tree. */
@@ -66,23 +66,22 @@ describe('ng-add schematic', () => {
     expect(dependencies['@angular/material']).toBe('~0.0.0-PLACEHOLDER');
     expect(dependencies['@angular/cdk']).toBe('~0.0.0-PLACEHOLDER');
     expect(dependencies['@angular/forms'])
-        .toBe(
-            angularCoreVersion,
-            'Expected the @angular/forms package to have the same version as @angular/core.');
+      .withContext('Expected the @angular/forms package to have the same version as @angular/core.')
+        .toBe(angularCoreVersion);
     expect(dependencies['@angular/animations'])
-        .toBe(
-            angularCoreVersion,
-            'Expected the @angular/animations package to have the same version as @angular/core.');
+      .withContext('Expected the @angular/animations package to have the same ' +
+                   'version as @angular/core.').toBe(angularCoreVersion);
 
     expect(Object.keys(dependencies))
-        .toEqual(
-            Object.keys(dependencies).sort(),
-            'Expected the modified "dependencies" to be sorted alphabetically.');
-
-    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(true,
-      'Expected the package manager to be scheduled in order to update lock files.');
-    expect(runner.tasks.some(task => task.name === 'run-schematic')).toBe(true,
-      'Expected the setup-project schematic to be scheduled.');
+      .withContext('Expected the modified "dependencies" to be sorted alphabetically.')
+      .toEqual(Object.keys(dependencies).sort());
+
+    expect(runner.tasks.some(task => task.name === 'node-package'))
+      .withContext('Expected the package manager to be scheduled in order to update lock files.')
+        .toBe(true);
+    expect(runner.tasks.some(task => task.name === 'run-schematic'))
+      .withContext('Expected the setup-project schematic to be scheduled.')
+        .toBe(true);
   });
 
   it('should respect version range from CLI ng-add command', async () => {
@@ -136,7 +135,8 @@ describe('ng-add schematic', () => {
     const project = getProjectFromWorkspace(workspace);
     const expectedStylesPath = normalize(`/${project.root}/src/custom-theme.scss`);
 
-    expect(tree.files).toContain(expectedStylesPath, 'Expected a custom theme file to be created');
+    expect(tree.files)
+      .withContext('Expected a custom theme file to be created').toContain(expectedStylesPath);
     expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
   });
 
@@ -184,9 +184,8 @@ describe('ng-add schematic', () => {
       const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
       expect(fileContent)
-          .toContain(
-              'BrowserAnimationsModule',
-              'Expected the project app module to import the "BrowserAnimationsModule".');
+        .withContext('Expected the project app module to import the "BrowserAnimationsModule".')
+        .toContain('BrowserAnimationsModule');
     });
 
     it('should not add BrowserAnimationsModule if NoopAnimationsModule is set up', async () => {
@@ -215,9 +214,8 @@ describe('ng-add schematic', () => {
       const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
       expect(fileContent)
-          .toContain(
-              'NoopAnimationsModule',
-              'Expected the project app module to import the "NoopAnimationsModule".');
+        .withContext('Expected the project app module to import the "NoopAnimationsModule".')
+        .toContain('NoopAnimationsModule');
     });
 
     it('should not add NoopAnimationsModule if BrowserAnimationsModule is set up', async () => {
@@ -335,10 +333,12 @@ describe('ng-add schematic', () => {
       const project = getProjectFromWorkspace(workspace);
       const styles = getProjectTargetOptions(project, 'build').styles;
 
-      expect(styles).not.toContain(
-          existingThemePath, 'Expected the existing prebuilt theme file to be removed.');
-      expect(styles).toContain(
-          defaultPrebuiltThemePath, 'Expected the default prebuilt theme to be added.');
+      expect(styles).not
+        .withContext('Expected the existing prebuilt theme file to be removed.')
+        .toContain(existingThemePath);
+      expect(styles)
+        .withContext('Expected the default prebuilt theme to be added.')
+        .toContain(defaultPrebuiltThemePath);
     });
 
     it('should not replace existing custom theme files', async () => {
@@ -363,9 +363,10 @@ describe('ng-add schematic', () => {
       const project = getProjectFromWorkspace(workspace);
       const styles = getProjectTargetOptions(project, 'build').styles;
 
-      expect(styles).toEqual(
-          ['projects/material/src/styles.css', defaultPrebuiltThemePath],
-          'Expected the "styles.css" file and default prebuilt theme to be the only styles');
+      expect(styles)
+        .withContext('Expected the "styles.css" file and default prebuilt theme to be ' +
+                     'the only styles')
+                        .toEqual(['projects/material/src/styles.css', defaultPrebuiltThemePath]);
     });
 
     it('should not overwrite existing custom theme files', async () => {
@@ -375,7 +376,7 @@ describe('ng-add schematic', () => {
               .toPromise();
 
       expect(tree.readContent('/projects/material/custom-theme.scss'))
-          .toBe('custom-theme', 'Expected the old custom theme content to be unchanged.');
+        .withContext('Expected the old custom theme content to be unchanged.').toBe('custom-theme');
     });
   });
 
diff --git a/src/material/schematics/ng-update/test-cases/misc/constructor-checks.spec.ts b/src/material/schematics/ng-update/test-cases/misc/constructor-checks.spec.ts
index 02facde712cf..78ad40e86dce 100644
--- a/src/material/schematics/ng-update/test-cases/misc/constructor-checks.spec.ts
+++ b/src/material/schematics/ng-update/test-cases/misc/constructor-checks.spec.ts
@@ -9,12 +9,12 @@ describe('constructor checks', () => {
 
     const {logOutput} = await runFixers();
 
-    expect(logOutput).toMatch(
-        /@22:13 - Found "NativeDateAdapter"/,
-        'Expected the constructor checks to report if an argument is not assignable.');
-    expect(logOutput).not.toMatch(
-        /@24.*Found "NativeDateAdapter".*/,
-        'Expected the constructor to not report if an argument is assignable.');
+    expect(logOutput)
+      .withContext('Expected the constructor checks to report if an argument is not assignable.')
+      .toMatch(/@22:13 - Found "NativeDateAdapter"/);
+    expect(logOutput).not
+      .withContext('Expected the constructor to not report if an argument is assignable.')
+      .toMatch(/@24.*Found "NativeDateAdapter".*/);
 
     expect(logOutput).not.toMatch(/Found "NonMaterialClass".*: new NonMaterialClass\(\)/);
 
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index b3ff9ea1ca89..bf450a17184e 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -238,13 +238,15 @@ describe('MatSelect', () => {
 
         it('should set aria-required for required selects', fakeAsync(() => {
           expect(select.getAttribute('aria-required'))
-              .toEqual('false', `Expected aria-required attr to be false for normal selects.`);
+            .withContext(`Expected aria-required attr to be false for normal selects.`)
+            .toEqual('false');
 
           fixture.componentInstance.isRequired = true;
           fixture.detectChanges();
 
           expect(select.getAttribute('aria-required'))
-              .toEqual('true', `Expected aria-required attr to be true for required selects.`);
+            .withContext(`Expected aria-required attr to be true for required selects.`)
+            .toEqual('true');
         }));
 
         it('should set the mat-select-required class for required selects', fakeAsync(() => {
@@ -254,20 +256,23 @@ describe('MatSelect', () => {
           fixture.componentInstance.isRequired = true;
           fixture.detectChanges();
 
-          expect(select.classList).toContain(
-              'mat-select-required', `Expected the mat-select-required class to be set.`);
+          expect(select.classList)
+            .withContext(`Expected the mat-select-required class to be set.`)
+            .toContain('mat-select-required');
         }));
 
         it('should set aria-invalid for selects that are invalid and touched', fakeAsync(() => {
           expect(select.getAttribute('aria-invalid'))
-              .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
+            .withContext(`Expected aria-invalid attr to be false for valid selects.`)
+            .toEqual('false');
 
           fixture.componentInstance.isRequired = true;
           fixture.componentInstance.control.markAsTouched();
           fixture.detectChanges();
 
           expect(select.getAttribute('aria-invalid'))
-              .toEqual('true', `Expected aria-invalid attr to be true for invalid selects.`);
+            .withContext(`Expected aria-invalid attr to be true for invalid selects.`)
+            .toEqual('true');
         }));
 
         it('should set aria-disabled for disabled selects', fakeAsync(() => {
@@ -304,27 +309,34 @@ describe('MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-          expect(formControl.value).toBe(options[0].value,
-              'Expected value from first option to have been set on the model.');
+          expect(options[0].selected)
+            .withContext('Expected first option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from first option to have been set on the model.')
+            .toBe(options[0].value);
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
           // Note that the third option is skipped, because it is disabled.
-          expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
-          expect(formControl.value).toBe(options[3].value,
-              'Expected value from fourth option to have been set on the model.');
+          // Note that the third option is skipped, because it is disabled.
+          expect(options[3].selected)
+            .withContext('Expected fourth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from fourth option to have been set on the model.')
+            .toBe(options[3].value);
 
           dispatchKeyboardEvent(select, 'keydown', UP_ARROW);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-              'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
 
           flush();
         }));
@@ -334,27 +346,33 @@ describe('MatSelect', () => {
             const formControl = fixture.componentInstance.control;
             const options = fixture.componentInstance.options.toArray();
 
-            expect(formControl.value).toBeFalsy('Expected no initial value.');
+            expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
             flush();
 
-            expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-            expect(formControl.value).toBe(options[0].value,
-                'Expected value from first option to have been set on the model.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model.')
+              .toBe(options[0].value);
 
             formControl.reset();
             fixture.detectChanges();
 
-            expect(options[0].selected).toBe(false, 'Expected first option to be deselected.');
-            expect(formControl.value).toBeFalsy('Expected value to be reset.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be deselected.').toBe(false);
+            expect(formControl.value)
+              .withContext('Expected value to be reset.').toBeFalsy();
 
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
             flush();
 
-            expect(options[0].selected).toBe(true, 'Expected first option to be selected again.');
-            expect(formControl.value).toBe(options[0].value,
-                'Expected value from first option to have been set on the model again.');
+            expect(options[0].selected)
+              .withContext('Expected first option to be selected again.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model again.')
+              .toBe(options[0].value);
         }));
 
         it('should select first/last options via the HOME/END keys on a closed select',
@@ -363,21 +381,25 @@ describe('MatSelect', () => {
             const firstOption = fixture.componentInstance.options.first;
             const lastOption = fixture.componentInstance.options.last;
 
-            expect(formControl.value).toBeFalsy('Expected no initial value.');
+            expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
             const endEvent = dispatchKeyboardEvent(select, 'keydown', END);
 
             expect(endEvent.defaultPrevented).toBe(true);
-            expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
-            expect(formControl.value).toBe(lastOption.value,
-                'Expected value from last option to have been set on the model.');
+            expect(lastOption.selected)
+              .withContext('Expected last option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from last option to have been set on the model.')
+              .toBe(lastOption.value);
 
             const homeEvent = dispatchKeyboardEvent(select, 'keydown', HOME);
 
             expect(homeEvent.defaultPrevented).toBe(true);
-            expect(firstOption.selected).toBe(true, 'Expected first option to be selected.');
-            expect(formControl.value).toBe(firstOption.value,
-                'Expected value from first option to have been set on the model.');
+            expect(firstOption.selected)
+              .withContext('Expected first option to be selected.').toBe(true);
+            expect(formControl.value)
+              .withContext('Expected value from first option to have been set on the model.')
+              .toBe(firstOption.value);
 
             flush();
           }));
@@ -386,7 +408,7 @@ describe('MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
@@ -409,27 +431,34 @@ describe('MatSelect', () => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
-          expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-          expect(formControl.value).toBe(options[0].value,
-              'Expected value from first option to have been set on the model.');
+          expect(options[0].selected)
+            .withContext('Expected first option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from first option to have been set on the model.')
+            .toBe(options[0].value);
 
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
           // Note that the third option is skipped, because it is disabled.
-          expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
-          expect(formControl.value).toBe(options[3].value,
-              'Expected value from fourth option to have been set on the model.');
+          // Note that the third option is skipped, because it is disabled.
+          expect(options[3].selected)
+            .withContext('Expected fourth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from fourth option to have been set on the model.')
+            .toBe(options[3].value);
 
           dispatchKeyboardEvent(select, 'keydown', LEFT_ARROW);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-              'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
           flush();
         }));
 
@@ -462,29 +491,33 @@ describe('MatSelect', () => {
         it('should open a single-selection select using ALT + DOWN_ARROW', fakeAsync(() => {
           const {control: formControl, select: selectInstance} = fixture.componentInstance;
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           const event = createKeyboardEvent('keydown', DOWN_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
-          expect(formControl.value).toBeFalsy('Expected value not to have changed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
+          expect(formControl.value).withContext('Expected value not to have changed.').toBeFalsy();
         }));
 
         it('should open a single-selection select using ALT + UP_ARROW', fakeAsync(() => {
           const {control: formControl, select: selectInstance} = fixture.componentInstance;
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           const event = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
-          expect(formControl.value).toBeFalsy('Expected value not to have changed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
+          expect(formControl.value).withContext('Expected value not to have changed.').toBeFalsy();
         }));
 
         it('should close when pressing ALT + DOWN_ARROW', fakeAsync(() => {
@@ -493,14 +526,17 @@ describe('MatSelect', () => {
           selectInstance.open();
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
 
           const event = createKeyboardEvent('keydown', DOWN_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(event.defaultPrevented)
+            .withContext('Expected default action to be prevented.').toBe(true);
         }));
 
         it('should close when pressing ALT + UP_ARROW', fakeAsync(() => {
@@ -509,35 +545,42 @@ describe('MatSelect', () => {
           selectInstance.open();
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be open.').toBe(true);
 
           const event = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});
 
           dispatchEvent(select, event);
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.');
-          expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed.').toBe(false);
+          expect(event.defaultPrevented)
+            .withContext('Expected default action to be prevented.').toBe(true);
         }));
 
         it('should be able to select options by typing on a closed select', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-          expect(formControl.value).toBe(options[1].value,
-            'Expected value from second option to have been set on the model.');
+          expect(options[1].selected)
+            .withContext('Expected second option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 69, 'e'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(options[5].selected).toBe(true, 'Expected sixth option to be selected.');
-          expect(formControl.value).toBe(options[5].value,
-            'Expected value from sixth option to have been set on the model.');
+          expect(options[5].selected)
+            .withContext('Expected sixth option to be selected.').toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from sixth option to have been set on the model.')
+            .toBe(options[5].value);
         }));
 
         it('should not open the select when pressing space while typing', fakeAsync(() => {
@@ -546,7 +589,8 @@ describe('MatSelect', () => {
           fixture.componentInstance.typeaheadDebounceInterval = DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL;
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed on init.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed on init.').toBe(false);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
@@ -555,14 +599,14 @@ describe('MatSelect', () => {
           dispatchKeyboardEvent(select, 'keydown', SPACE);
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false,
-              'Expected select to remain closed after space was pressed.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to remain closed after space was pressed.').toBe(false);
 
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
           fixture.detectChanges();
 
-          expect(selectInstance.panelOpen).toBe(false,
-              'Expected select to be closed when the timer runs out.');
+          expect(selectInstance.panelOpen)
+            .withContext('Expected select to be closed when the timer runs out.').toBe(false);
         }));
 
         it('should be able to customize the typeahead debounce interval', fakeAsync(() => {
@@ -572,19 +616,22 @@ describe('MatSelect', () => {
           fixture.componentInstance.typeaheadDebounceInterval = 1337;
           fixture.detectChanges();
 
-          expect(formControl.value).toBeFalsy('Expected no initial value.');
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
           tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
 
-          expect(formControl.value).toBeFalsy('Expected no value after a bit of time has passed.');
+          expect(formControl.value)
+            .withContext('Expected no value after a bit of time has passed.').toBeFalsy();
 
           tick(1337);
 
           expect(options[1].selected)
-            .toBe(true, 'Expected second option to be selected after all the time has passed.');
-          expect(formControl.value).toBe(options[1].value,
-            'Expected value from second option to have been set on the model.');
+            .withContext('Expected second option to be selected after all the time has passed.')
+            .toBe(true);
+          expect(formControl.value)
+            .withContext('Expected value from second option to have been set on the model.')
+            .toBe(options[1].value);
         }));
 
         it('should open the panel when pressing a vertical arrow key on a closed multiple select',
@@ -599,13 +646,17 @@ describe('MatSelect', () => {
 
             const initialValue = instance.control.value;
 
-            expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be closed.').toBe(false);
 
             const event = dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-            expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
-            expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-            expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be open.').toBe(true);
+            expect(instance.control.value)
+              .withContext('Expected value to stay the same.').toBe(initialValue);
+            expect(event.defaultPrevented)
+              .withContext('Expected default to be prevented.').toBe(true);
           }));
 
         it('should open the panel when pressing a horizontal arrow key on closed multiple select',
@@ -620,13 +671,17 @@ describe('MatSelect', () => {
 
             const initialValue = instance.control.value;
 
-            expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be closed.').toBe(false);
 
             const event = dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
-            expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
-            expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-            expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+            expect(instance.select.panelOpen)
+              .withContext('Expected panel to be open.').toBe(true);
+            expect(instance.control.value)
+              .withContext('Expected value to stay the same.').toBe(initialValue);
+            expect(event.defaultPrevented)
+              .withContext('Expected default to be prevented.').toBe(true);
           }));
 
         it('should do nothing when typing on a closed multi-select', fakeAsync(() => {
@@ -640,24 +695,31 @@ describe('MatSelect', () => {
 
           const initialValue = instance.control.value;
 
-          expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+          expect(instance.select.panelOpen)
+            .withContext('Expected panel to be closed.').toBe(false);
 
           dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
 
-          expect(instance.select.panelOpen).toBe(false, 'Expected panel to stay closed.');
-          expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
+          expect(instance.select.panelOpen)
+            .withContext('Expected panel to stay closed.').toBe(false);
+          expect(instance.control.value)
+            .withContext('Expected value to stay the same.').toBe(initialValue);
         }));
 
         it('should do nothing if the key manager did not change the active item', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
 
-          expect(formControl.value).toBeNull('Expected form control value to be empty.');
-          expect(formControl.pristine).toBe(true, 'Expected form control to be clean.');
+          expect(formControl.value)
+            .withContext('Expected form control value to be empty.').toBeNull();
+          expect(formControl.pristine)
+            .withContext('Expected form control to be clean.').toBe(true);
 
           dispatchKeyboardEvent(select, 'keydown', 16); // Press a random key.
 
-          expect(formControl.value).toBeNull('Expected form control value to stay empty.');
-          expect(formControl.pristine).toBe(true, 'Expected form control to stay clean.');
+          expect(formControl.value)
+            .withContext('Expected form control value to stay empty.').toBeNull();
+          expect(formControl.pristine)
+            .withContext('Expected form control to stay clean.').toBe(true);
         }));
 
         it('should continue from the selected option when the value is set programmatically',
@@ -689,13 +751,14 @@ describe('MatSelect', () => {
               overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
 
           options[3].focus();
-          expect(document.activeElement).toBe(options[3], 'Expected fourth option to be focused.');
+          expect(document.activeElement)
+            .withContext('Expected fourth option to be focused.').toBe(options[3]);
 
           multiFixture.componentInstance.control.setValue(['steak-0', 'sushi-7']);
           multiFixture.detectChanges();
 
           expect(document.activeElement)
-              .toBe(options[3], 'Expected fourth option to remain focused.');
+            .withContext('Expected fourth option to remain focused.').toBe(options[3]);
         }));
 
         it('should not cycle through the options if the control is disabled', fakeAsync(() => {
@@ -706,7 +769,8 @@ describe('MatSelect', () => {
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(formControl.value).toBe('eggs-5', 'Expected value to remain unchaged.');
+          expect(formControl.value)
+            .withContext('Expected value to remain unchaged.').toBe('eggs-5');
         }));
 
         it('should not wrap selection after reaching the end of the options', fakeAsync(() => {
@@ -716,11 +780,13 @@ describe('MatSelect', () => {
             dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
           });
 
-          expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
+          expect(lastOption.selected)
+            .withContext('Expected last option to be selected.').toBe(true);
 
           dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
 
-          expect(lastOption.selected).toBe(true, 'Expected last option to stay selected.');
+          expect(lastOption.selected)
+            .withContext('Expected last option to stay selected.').toBe(true);
 
           flush();
         }));
@@ -734,12 +800,12 @@ describe('MatSelect', () => {
           select = multiFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
 
           expect(multiFixture.componentInstance.select.panelOpen)
-              .toBe(false, 'Expected panel to be closed initially.');
+            .withContext('Expected panel to be closed initially.').toBe(false);
 
           dispatchKeyboardEvent(select, 'keydown', TAB);
 
           expect(multiFixture.componentInstance.select.panelOpen)
-              .toBe(false, 'Expected panel to stay closed.');
+            .withContext('Expected panel to stay closed.').toBe(false);
         }));
 
         it('should toggle the next option when pressing shift + DOWN_ARROW on a multi-select',
@@ -839,7 +905,8 @@ describe('MatSelect', () => {
 
           fixture.componentInstance.select.focus();
 
-          expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
+          expect(document.activeElement)
+            .withContext('Expected select element to be focused.').toBe(select);
         }));
 
         it('should set `aria-multiselectable` to true on the listbox inside multi select',
@@ -873,7 +940,7 @@ describe('MatSelect', () => {
           const host = fixture.debugElement.query(By.css('mat-select'))!.nativeElement;
 
           expect(host.hasAttribute('aria-activedescendant'))
-              .toBe(false, 'Expected no aria-activedescendant on init.');
+            .withContext('Expected no aria-activedescendant on init.').toBe(false);
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
@@ -882,14 +949,15 @@ describe('MatSelect', () => {
           const options = overlayContainerElement.querySelectorAll('mat-option');
 
           expect(host.getAttribute('aria-activedescendant'))
-              .toBe(options[4].id, 'Expected aria-activedescendant to match the active option.');
+            .withContext('Expected aria-activedescendant to match the active option.')
+            .toBe(options[4].id);
 
           fixture.componentInstance.select.close();
           fixture.detectChanges();
           flush();
 
           expect(host.hasAttribute('aria-activedescendant'))
-              .toBe(false, 'Expected no aria-activedescendant when closed.');
+            .withContext('Expected no aria-activedescendant when closed.').toBe(false);
         }));
 
         it('should set aria-activedescendant based on the focused option', fakeAsync(() => {
@@ -956,7 +1024,8 @@ describe('MatSelect', () => {
             option.click();
             multiFixture.detectChanges();
 
-            expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+            expect(document.activeElement)
+              .withContext('Expected trigger to be focused.').toBe(select);
           }));
 
         it('should set a role of listbox on the select panel', fakeAsync(() => {
@@ -1037,8 +1106,9 @@ describe('MatSelect', () => {
         }));
 
         it('should set aria-selected on each option for single select',  fakeAsync(() => {
-          expect(options.every(option => !option.hasAttribute('aria-selected'))).toBe(true,
-            'Expected all unselected single-select options not to have aria-selected set.');
+          expect(options.every(option => !option.hasAttribute('aria-selected')))
+            .withContext('Expected all unselected single-select options not to have ' +
+                         'aria-selected set.').toBe(true);
 
           options[1].click();
           fixture.detectChanges();
@@ -1047,11 +1117,13 @@ describe('MatSelect', () => {
           fixture.detectChanges();
           flush();
 
-          expect(options[1].getAttribute('aria-selected')).toEqual('true',
-            'Expected selected single-select option to have aria-selected="true".');
+          expect(options[1].getAttribute('aria-selected'))
+            .withContext('Expected selected single-select option to have aria-selected="true".')
+            .toEqual('true');
           options.splice(1, 1);
-          expect(options.every(option => !option.hasAttribute('aria-selected'))).toBe(true,
-            'Expected all unselected single-select options not to have aria-selected set.');
+          expect(options.every(option => !option.hasAttribute('aria-selected')))
+            .withContext('Expected all unselected single-select options not to have ' +
+                         'aria-selected set.').toBe(true);
         }));
 
         it('should set aria-selected on each option for multi-select', fakeAsync(() => {
@@ -1067,8 +1139,9 @@ describe('MatSelect', () => {
           options = Array.from(overlayContainerElement.querySelectorAll('mat-option'));
 
           expect(options.every(option => option.hasAttribute('aria-selected') &&
-            option.getAttribute('aria-selected') === 'false')).toBe(true,
-            'Expected all unselected multi-select options to have aria-selected="false".');
+          option.getAttribute('aria-selected') === 'false'))
+            .withContext('Expected all unselected multi-select options to have ' +
+                         'aria-selected="false".').toBe(true);
 
           options[1].click();
           multiFixture.detectChanges();
@@ -1077,12 +1150,14 @@ describe('MatSelect', () => {
           multiFixture.detectChanges();
           flush();
 
-          expect(options[1].getAttribute('aria-selected')).toEqual('true',
-            'Expected selected multi-select option to have aria-selected="true".');
+          expect(options[1].getAttribute('aria-selected'))
+            .withContext('Expected selected multi-select option to have ' +
+                         'aria-selected="true".').toEqual('true');
           options.splice(1, 1);
           expect(options.every(option => option.hasAttribute('aria-selected') &&
-            option.getAttribute('aria-selected') === 'false')).toBe(true,
-            'Expected all unselected multi-select options to have aria-selected="false".');
+          option.getAttribute('aria-selected') === 'false'))
+            .withContext('Expected all unselected multi-select options to have ' +
+                         'aria-selected="false".').toBe(true);
           }));
 
         it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
@@ -1107,8 +1182,8 @@ describe('MatSelect', () => {
         it('should remove the active state from options that have been deselected while closed',
           fakeAsync(() => {
             let activeOptions = options.filter(option => option.classList.contains('mat-active'));
-            expect(activeOptions).toEqual([options[0]],
-                'Expected first option to have active styles.');
+            expect(activeOptions)
+              .withContext('Expected first option to have active styles.').toEqual([options[0]]);
 
             options[1].click();
             fixture.detectChanges();
@@ -1117,8 +1192,9 @@ describe('MatSelect', () => {
             flush();
 
             activeOptions = options.filter(option => option.classList.contains('mat-active'));
-            expect(activeOptions).toEqual([options[1]],
-              'Expected only selected option to be marked as active after it is clicked.');
+            expect(activeOptions)
+              .withContext('Expected only selected option to be marked as active after ' +
+                           'it is clicked.').toEqual([options[1]]);
 
             fixture.componentInstance.control.setValue(fixture.componentInstance.foods[7].value);
             fixture.detectChanges();
@@ -1130,8 +1206,9 @@ describe('MatSelect', () => {
             fixture.detectChanges();
 
             activeOptions = options.filter(option => option.classList.contains('mat-active'));
-            expect(activeOptions).toEqual([options[7]],
-              'Expected only selected option to be marked as active after the value has changed.');
+            expect(activeOptions)
+              .withContext('Expected only selected option to be marked as active after the ' +
+                           'value has changed.').toEqual([options[7]]);
           }));
       });
 
@@ -1158,9 +1235,12 @@ describe('MatSelect', () => {
           const group = groups[0];
           const label = group.querySelector('span')!;
 
-          expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
+          expect(label.getAttribute('id'))
+            .withContext('Expected label to have an id.')
+            .toBeTruthy();
           expect(group.getAttribute('aria-labelledby'))
-              .toBe(label.getAttribute('id'), 'Expected `aria-labelledby` to match the label id.');
+            .withContext('Expected `aria-labelledby` to match the label id.')
+            .toBe(label.getAttribute('id'));
         }));
 
         it('should set the `aria-disabled` attribute if the group is disabled', fakeAsync(() => {
@@ -1383,13 +1463,15 @@ describe('MatSelect', () => {
         const options = fixture.componentInstance.options.toArray();
 
         expect(options.every(option => option.disableRipple === false))
-            .toBeTruthy('Expected all options to have disableRipple set to false initially.');
+          .withContext('Expected all options to have disableRipple set to false initially.')
+          .toBeTruthy();
 
         fixture.componentInstance.disableRipple = true;
         fixture.detectChanges();
 
         expect(options.every(option => option.disableRipple === true))
-            .toBeTruthy('Expected all options to have disableRipple set to true.');
+          .withContext('Expected all options to have disableRipple set to true.')
+          .toBeTruthy();
       }));
 
       it('should not show ripples if they were disabled', fakeAsync(() => {
@@ -1418,7 +1500,7 @@ describe('MatSelect', () => {
         groupFixture.detectChanges();
 
         expect(document.querySelectorAll('.cdk-overlay-container mat-option').length)
-            .toBeGreaterThan(0, 'Expected at least one option to be rendered.');
+          .withContext('Expected at least one option to be rendered.').toBeGreaterThan(0);
       }));
 
       it('should not consider itself as blurred if the trigger loses focus while the ' +
@@ -1429,7 +1511,8 @@ describe('MatSelect', () => {
           dispatchFakeEvent(selectElement, 'focus');
           fixture.detectChanges();
 
-          expect(selectInstance.focused).toBe(true, 'Expected select to be focused.');
+          expect(selectInstance.focused)
+            .withContext('Expected select to be focused.').toBe(true);
 
           selectInstance.open();
           fixture.detectChanges();
@@ -1437,7 +1520,8 @@ describe('MatSelect', () => {
           dispatchFakeEvent(selectElement, 'blur');
           fixture.detectChanges();
 
-          expect(selectInstance.focused).toBe(true, 'Expected select element to remain focused.');
+          expect(selectInstance.focused)
+            .withContext('Expected select element to remain focused.').toBe(true);
         }));
 
     });
@@ -1456,7 +1540,7 @@ describe('MatSelect', () => {
 
       it('should not float label if no option is selected', fakeAsync(() => {
         expect(formField.classList.contains('mat-form-field-should-float'))
-            .toBe(false, 'Label should not be floating');
+          .withContext('Label should not be floating').toBe(false);
       }));
 
       it('should focus the first option if no option is selected', fakeAsync(() => {
@@ -1559,14 +1643,14 @@ describe('MatSelect', () => {
         expect(options[0].classList)
             .not.toContain('mat-selected', 'Expected first option to no longer be selected');
         expect(options[1].classList)
-            .toContain('mat-selected', 'Expected second option to be selected');
+          .withContext('Expected second option to be selected').toContain('mat-selected');
 
         const optionInstances = fixture.componentInstance.options.toArray();
 
         expect(optionInstances[0].selected)
-            .toBe(false, 'Expected first option to no longer be selected');
+          .withContext('Expected first option to no longer be selected').toBe(false);
         expect(optionInstances[1].selected)
-            .toBe(true, 'Expected second option to be selected');
+          .withContext('Expected second option to be selected').toBe(true);
       }));
 
       it('should remove selection if option has been removed', fakeAsync(() => {
@@ -1582,14 +1666,16 @@ describe('MatSelect', () => {
         firstOption.click();
         fixture.detectChanges();
 
-        expect(select.selected).toBe(select.options.first, 'Expected first option to be selected.');
+        expect(select.selected)
+          .withContext('Expected first option to be selected.').toBe(select.options.first);
 
         fixture.componentInstance.foods = [];
         fixture.detectChanges();
         flush();
 
         expect(select.selected)
-            .toBeUndefined('Expected selection to be removed when option no longer exists.');
+          .withContext('Expected selection to be removed when option no longer exists.')
+          .toBeUndefined();
       }));
 
       it('should display the selected option in the trigger', fakeAsync(() => {
@@ -1605,7 +1691,7 @@ describe('MatSelect', () => {
         const value = fixture.debugElement.query(By.css('.mat-select-value'))!.nativeElement;
 
         expect(formField.classList.contains('mat-form-field-should-float'))
-            .toBe(true, 'Label should be floating');
+          .withContext('Label should be floating').toBe(true);
         expect(value.textContent).toContain('Steak');
       }));
 
@@ -1800,7 +1886,8 @@ describe('MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-select-value'))!;
         expect(value.nativeElement.textContent)
-            .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+          .withContext(`Expected trigger to be populated by the control's initial value.`)
+          .toContain('Pizza');
 
         trigger = fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
         trigger.click();
@@ -1810,8 +1897,8 @@ describe('MatSelect', () => {
         const options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         expect(options[1].classList)
-            .toContain('mat-selected',
-                `Expected option with the control's initial value to be selected.`);
+          .withContext(`Expected option with the control's initial value to be selected.`)
+          .toContain('mat-selected');
       }));
 
       it('should set the view value from the form', fakeAsync(() => {
@@ -1823,7 +1910,8 @@ describe('MatSelect', () => {
 
         value = fixture.debugElement.query(By.css('.mat-select-value'))!;
         expect(value.nativeElement.textContent)
-            .toContain('Pizza', `Expected trigger to be populated by the control's new value.`);
+          .withContext(`Expected trigger to be populated by the control's new value.`)
+          .toContain('Pizza');
 
         trigger.click();
         fixture.detectChanges();
@@ -1831,13 +1919,14 @@ describe('MatSelect', () => {
 
         const options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-        expect(options[1].classList).toContain(
-            'mat-selected', `Expected option with the control's new value to be selected.`);
+        expect(options[1].classList)
+          .withContext(`Expected option with the control's new value to be selected.`)
+          .toContain('mat-selected');
       }));
 
       it('should update the form value when the view changes', fakeAsync(() => {
         expect(fixture.componentInstance.control.value)
-            .toEqual(null, `Expected the control's value to be empty initially.`);
+          .withContext(`Expected the control's value to be empty initially.`).toEqual(null);
 
         trigger.click();
         fixture.detectChanges();
@@ -1849,7 +1938,7 @@ describe('MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.value)
-            .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+          .withContext(`Expected control's value to be set to the new option.`).toEqual('steak-0');
       }));
 
       it('should clear the selection when a nonexistent option value is selected', fakeAsync(() => {
@@ -1861,7 +1950,7 @@ describe('MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-select-value'))!;
         expect(value.nativeElement.textContent.trim())
-            .toBe('Food', `Expected trigger to show the placeholder.`);
+          .withContext(`Expected trigger to show the placeholder.`).toBe('Food');
         expect(trigger.textContent)
             .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
 
@@ -1885,7 +1974,7 @@ describe('MatSelect', () => {
 
         const value = fixture.debugElement.query(By.css('.mat-select-value'))!;
         expect(value.nativeElement.textContent.trim())
-            .toBe('Food', `Expected trigger to show the placeholder.`);
+          .withContext(`Expected trigger to show the placeholder.`).toBe('Food');
         expect(trigger.textContent)
             .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
 
@@ -1901,7 +1990,7 @@ describe('MatSelect', () => {
 
       it('should set the control to touched when the select is blurred', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toEqual(false, `Expected the control to start off as untouched.`);
+          .withContext(`Expected the control to start off as untouched.`).toEqual(false);
 
         trigger.click();
         dispatchFakeEvent(trigger, 'blur');
@@ -1909,7 +1998,7 @@ describe('MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toEqual(false, `Expected the control to stay untouched when menu opened.`);
+          .withContext(`Expected the control to stay untouched when menu opened.`).toEqual(false);
 
         const backdrop =
             overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1919,12 +2008,13 @@ describe('MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toEqual(true, `Expected the control to be touched as soon as focus left the select.`);
+          .withContext(`Expected the control to be touched as soon as focus left the select.`)
+          .toEqual(true);
       }));
 
       it('should set the control to touched when the panel is closed', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         trigger.click();
         dispatchFakeEvent(trigger, 'blur');
@@ -1932,30 +2022,30 @@ describe('MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to stay untouched when menu opened.');
+          .withContext('Expected the control to stay untouched when menu opened.').toBe(false);
 
         fixture.componentInstance.select.close();
         fixture.detectChanges();
         flush();
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(true, 'Expected the control to be touched when the panel was closed.');
+          .withContext('Expected the control to be touched when the panel was closed.').toBe(true);
       }));
 
       it('should not set touched when a disabled select is touched', fakeAsync(() => {
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to start off as untouched.');
+          .withContext('Expected the control to start off as untouched.').toBe(false);
 
         fixture.componentInstance.control.disable();
         dispatchFakeEvent(trigger, 'blur');
 
         expect(fixture.componentInstance.control.touched)
-            .toBe(false, 'Expected the control to stay untouched.');
+          .withContext('Expected the control to stay untouched.').toBe(false);
       }));
 
       it('should set the control to dirty when the select value changes in DOM', fakeAsync(() => {
         expect(fixture.componentInstance.control.dirty)
-            .toEqual(false, `Expected control to start out pristine.`);
+          .withContext(`Expected control to start out pristine.`).toEqual(false);
 
         trigger.click();
         fixture.detectChanges();
@@ -1967,31 +2057,35 @@ describe('MatSelect', () => {
         flush();
 
         expect(fixture.componentInstance.control.dirty)
-            .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+          .withContext(`Expected control to be dirty after value was changed by user.`)
+          .toEqual(true);
       }));
 
       it('should not set the control to dirty when the value changes programmatically',
           fakeAsync(() => {
             expect(fixture.componentInstance.control.dirty)
-                .toEqual(false, `Expected control to start out pristine.`);
+              .withContext(`Expected control to start out pristine.`).toEqual(false);
 
             fixture.componentInstance.control.setValue('pizza-1');
 
             expect(fixture.componentInstance.control.dirty)
-                .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+              .withContext(`Expected control to stay pristine after programmatic change.`)
+              .toEqual(false);
           }));
 
       it('should set an asterisk after the label if control is required', fakeAsync(() => {
         let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
         expect(requiredMarker)
-            .toBeNull(`Expected label not to have an asterisk, as control was not required.`);
+          .withContext(`Expected label not to have an asterisk, as control was not required.`)
+          .toBeNull();
 
         fixture.componentInstance.isRequired = true;
         fixture.detectChanges();
 
         requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
-        expect(requiredMarker)
-            .not.toBeNull(`Expected label to have an asterisk, as control was required.`);
+        expect(requiredMarker).not
+          .withContext(`Expected label to have an asterisk, as control was required.`)
+          .toBeNull();
       }));
     });
 
@@ -2005,28 +2099,30 @@ describe('MatSelect', () => {
         const trigger =
             fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
         expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-            .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+          .withContext(`Expected cursor to be default arrow on disabled control.`)
+          .toEqual('default');
 
         trigger.click();
         fixture.detectChanges();
 
         expect(overlayContainerElement.textContent)
-            .toEqual('', `Expected select panel to stay closed.`);
+          .withContext(`Expected select panel to stay closed.`).toEqual('');
         expect(fixture.componentInstance.select.panelOpen)
-            .toBe(false, `Expected select panelOpen property to stay false.`);
+          .withContext(`Expected select panelOpen property to stay false.`).toBe(false);
 
         fixture.componentInstance.control.enable();
         fixture.detectChanges();
         expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-            .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+          .withContext(`Expected cursor to be a pointer on enabled control.`).toEqual('pointer');
 
         trigger.click();
         fixture.detectChanges();
 
         expect(overlayContainerElement.textContent)
-            .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+          .withContext(`Expected select panel to open normally on re-enabled control`)
+          .toContain('Steak');
         expect(fixture.componentInstance.select.panelOpen)
-            .toBe(true, `Expected select panelOpen property to become true.`);
+          .withContext(`Expected select panelOpen property to become true.`).toBe(true);
       }));
     });
 
@@ -2042,21 +2138,23 @@ describe('MatSelect', () => {
 
       it('should float the label when the panel is open and unselected', fakeAsync(() => {
         expect(formField.classList.contains('mat-form-field-should-float'))
-            .toBe(false, 'Expected label to initially have a normal position.');
+          .withContext('Expected label to initially have a normal position.').toBe(false);
 
         fixture.componentInstance.select.open();
         fixture.detectChanges();
         flush();
 
-        expect(formField.classList).toContain('mat-form-field-should-float',
-            'Expected label to animate up to floating position.');
+        expect(formField.classList)
+          .withContext('Expected label to animate up to floating position.')
+          .toContain('mat-form-field-should-float');
 
         fixture.componentInstance.select.close();
         fixture.detectChanges();
         flush();
 
-        expect(formField.classList).not.toContain('mat-form-field-should-float',
-            'Expected placeholder to animate back down to normal position.');
+        expect(formField.classList).not
+          .withContext('Expected placeholder to animate back down to normal position.')
+          .toContain('mat-form-field-should-float');
       }));
 
     });
@@ -2093,7 +2191,7 @@ describe('MatSelect', () => {
         });
 
         expect(panel.scrollTop)
-            .toBe(initialScrollPosition, 'Expected scroll position not to change');
+          .withContext('Expected scroll position not to change').toBe(initialScrollPosition);
       }));
 
       it('should scroll down to the active option', fakeAsync(() => {
@@ -2102,7 +2200,9 @@ describe('MatSelect', () => {
         }
 
         // <option index * height> - <panel height> = 16 * 48 - 256 = 512
-        expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
+        // <option index * height> - <panel height> = 16 * 48 - 256 = 512
+        expect(panel.scrollTop)
+          .withContext('Expected scroll to be at the 16th option.').toBe(512);
       }));
 
       it('should scroll up to the active option', fakeAsync(() => {
@@ -2116,7 +2216,9 @@ describe('MatSelect', () => {
         }
 
         // <option index * height> = 9 * 48 = 432
-        expect(panel.scrollTop).toBe(432, 'Expected scroll to be at the 9th option.');
+        // <option index * height> = 9 * 48 = 432
+        expect(panel.scrollTop)
+          .withContext('Expected scroll to be at the 9th option.').toBe(432);
       }));
 
       it('should skip option group labels', fakeAsync(() => {
@@ -2139,7 +2241,11 @@ describe('MatSelect', () => {
         // Note that we press down 5 times, but it will skip
         // 3 options because the second group is disabled.
         // <(option index + group labels) * height> - <panel height> = (9 + 3) * 48 - 256 = 320
-        expect(panel.scrollTop).toBe(320, 'Expected scroll to be at the 9th option.');
+        // Note that we press down 5 times, but it will skip
+        // 3 options because the second group is disabled.
+        // <(option index + group labels) * height> - <panel height> = (9 + 3) * 48 - 256 = 320
+        expect(panel.scrollTop)
+          .withContext('Expected scroll to be at the 9th option.').toBe(320);
       }));
 
       it('should scroll to the top when pressing HOME', fakeAsync(() => {
@@ -2148,12 +2254,14 @@ describe('MatSelect', () => {
           fixture.detectChanges();
         }
 
-        expect(panel.scrollTop).toBeGreaterThan(0, 'Expected panel to be scrolled down.');
+        expect(panel.scrollTop)
+          .withContext('Expected panel to be scrolled down.').toBeGreaterThan(0);
 
         dispatchKeyboardEvent(host, 'keydown', HOME);
         fixture.detectChanges();
 
-        expect(panel.scrollTop).toBe(0, 'Expected panel to be scrolled to the top');
+        expect(panel.scrollTop)
+          .withContext('Expected panel to be scrolled to the top').toBe(0);
       }));
 
       it('should scroll to the bottom of the panel when pressing END', fakeAsync(() => {
@@ -2161,7 +2269,9 @@ describe('MatSelect', () => {
         fixture.detectChanges();
 
         // <option amount> * <option height> - <panel height> = 30 * 48 - 256 = 1184
-        expect(panel.scrollTop).toBe(1184, 'Expected panel to be scrolled to the bottom');
+        // <option amount> * <option height> - <panel height> = 30 * 48 - 256 = 1184
+        expect(panel.scrollTop)
+          .withContext('Expected panel to be scrolled to the bottom').toBe(1184);
       }));
 
       it('should scroll to the active option when typing', fakeAsync(() => {
@@ -2174,7 +2284,9 @@ describe('MatSelect', () => {
         flush();
 
         // <option index * height> - <panel height> = 16 * 48 - 256 = 512
-        expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
+        // <option index * height> - <panel height> = 16 * 48 - 256 = 512
+        expect(panel.scrollTop)
+          .withContext('Expected scroll to be at the 16th option.').toBe(512);
       }));
 
       it('should scroll to top when going to first option in top group', fakeAsync(() => {
@@ -2285,15 +2397,15 @@ describe('MatSelect', () => {
       const trigger =
           fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
       expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+        .withContext(`Expected cursor to be default arrow on disabled control.`).toEqual('default');
 
       trigger.click();
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected select panel to stay closed.`);
+        .withContext(`Expected select panel to stay closed.`).toEqual('');
       expect(fixture.componentInstance.select.panelOpen)
-          .toBe(false, `Expected select panelOpen property to stay false.`);
+        .withContext(`Expected select panelOpen property to stay false.`).toBe(false);
 
       fixture.componentInstance.isDisabled = false;
       fixture.detectChanges();
@@ -2301,15 +2413,16 @@ describe('MatSelect', () => {
 
       fixture.detectChanges();
       expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+        .withContext(`Expected cursor to be a pointer on enabled control.`).toEqual('pointer');
 
       trigger.click();
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+        .withContext(`Expected select panel to open normally on re-enabled control`)
+        .toContain('Steak');
       expect(fixture.componentInstance.select.panelOpen)
-          .toBe(true, `Expected select panelOpen property to become true.`);
+        .withContext(`Expected select panelOpen property to become true.`).toBe(true);
     }));
   });
 
@@ -2332,7 +2445,8 @@ describe('MatSelect', () => {
 
       const value = fixture.debugElement.query(By.css('.mat-select-value'))!;
       expect(value.nativeElement.textContent)
-          .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+        .withContext(`Expected trigger to be populated by the control's initial value.`)
+        .toContain('Pizza');
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.minWidth).toEqual('300px');
@@ -2367,7 +2481,7 @@ describe('MatSelect', () => {
         const firstOptionID = options[0].id;
 
         expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+          .withContext(`Expected option ID to have the correct prefix.`).toContain('mat-option');
         expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
 
         const backdrop =
@@ -2383,7 +2497,7 @@ describe('MatSelect', () => {
         options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+          .withContext(`Expected option ID to have the correct prefix.`).toContain('mat-option');
         expect(options[0].id).not.toEqual(firstOptionID, `Expected option IDs to be unique.`);
         expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
       }));
@@ -2406,13 +2520,13 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(false, 'Floating label should be disabled');
+        .withContext('Floating label should be disabled').toBe(false);
 
       fixture.componentInstance.control.setValue('pizza-1');
       fixture.detectChanges();
 
       expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(false, 'Floating label should be disabled');
+        .withContext('Floating label should be disabled').toBe(false);
     }));
 
     it('should be able to always float the label', fakeAsync(() => {
@@ -2422,9 +2536,9 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(true, 'Label should be able to float');
+        .withContext('Label should be able to float').toBe(true);
       expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
 
     it('should default to global floating label type', fakeAsync(() => {
@@ -2454,9 +2568,9 @@ describe('MatSelect', () => {
       formField = fixture.debugElement.query(By.css('.mat-form-field'))!.nativeElement;
 
       expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(true, 'Label should be able to float');
+        .withContext('Label should be able to float').toBe(true);
       expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
 
     it('should float the label on focus if it has a placeholder', fakeAsync(() => {
@@ -2469,7 +2583,7 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'Label should be floating');
+        .withContext('Label should be floating').toBe(true);
     }));
   });
 
@@ -2695,27 +2809,29 @@ describe('MatSelect', () => {
     }));
 
     it('should not set the invalid class on a clean select', fakeAsync(() => {
-      expect(testComponent.formGroup.untouched).toBe(true, 'Expected the form to be untouched.');
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid.');
+      expect(testComponent.formGroup.untouched)
+        .withContext('Expected the form to be untouched.').toBe(true);
+      expect(testComponent.formControl.invalid)
+        .withContext('Expected form control to be invalid.').toBe(true);
       expect(select.classList)
           .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
     }));
 
     it('should appear as invalid if it becomes touched', fakeAsync(() => {
       expect(select.classList)
           .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
     }));
 
     it('should not have the invalid class when the select becomes valid', fakeAsync(() => {
@@ -2723,9 +2839,9 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
 
       testComponent.formControl.setValue('pizza-1');
       fixture.detectChanges();
@@ -2733,33 +2849,35 @@ describe('MatSelect', () => {
       expect(select.classList)
           .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
     }));
 
     it('should appear as invalid when the parent form group is submitted', fakeAsync(() => {
       expect(select.classList)
           .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
+        .withContext('Expected aria-invalid to be set to false.').toBe('false');
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
       expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+        .withContext('Expected select to appear invalid.').toContain('mat-select-invalid');
       expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
+        .withContext('Expected aria-invalid to be set to true.').toBe('true');
     }));
 
     it('should render the error messages when the parent form is submitted', fakeAsync(() => {
       const debugEl = fixture.debugElement.nativeElement;
 
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error messages');
+      expect(debugEl.querySelectorAll('mat-error').length)
+        .withContext('Expected no error messages').toBe(0);
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
       fixture.detectChanges();
 
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(1, 'Expected one error message');
+      expect(debugEl.querySelectorAll('mat-error').length)
+        .withContext('Expected one error message').toBe(1);
     }));
 
     it('should override error matching behavior via injection token', fakeAsync(() => {
@@ -2852,7 +2970,8 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.customAccessor.select.ngControl)
-          .toBeFalsy('Expected mat-select NOT to inherit control from parent value accessor.');
+        .withContext('Expected mat-select NOT to inherit control from parent value accessor.')
+        .toBeFalsy();
       expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
     }));
   });
@@ -2870,9 +2989,9 @@ describe('MatSelect', () => {
       flush();
 
       expect(fixture.componentInstance.options.first.selected)
-          .toBe(true, 'Expected first option to be selected');
+        .withContext('Expected first option to be selected').toBe(true);
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
-          .toContain('mat-selected', 'Expected first option to be selected');
+        .withContext('Expected first option to be selected').toContain('mat-selected');
     }));
   });
 
@@ -2924,8 +3043,8 @@ describe('MatSelect', () => {
 
       const label = fixture.debugElement.query(By.css('.mat-select-value'))!.nativeElement;
 
-      expect(label.textContent).toContain('azziP',
-          'Expected the displayed text to be "Pizza" in reverse.');
+      expect(label.textContent)
+        .withContext('Expected the displayed text to be "Pizza" in reverse.').toContain('azziP');
     }));
   });
 
@@ -3217,7 +3336,8 @@ describe('MatSelect', () => {
 
       const select = fixture.debugElement.nativeElement.querySelector('mat-select');
 
-      expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+      expect(document.activeElement)
+        .withContext('Expected trigger to be focused.').toBe(select);
     }));
 
     it('should not restore focus to the host element when clicking outside', fakeAsync(() => {
@@ -3230,7 +3350,8 @@ describe('MatSelect', () => {
       fixture.detectChanges();
       flush();
 
-      expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+      expect(document.activeElement)
+        .withContext('Expected trigger to be focused.').toBe(select);
 
       select.blur(); // Blur manually since the programmatic click might not do it.
       (overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement).click();
@@ -3320,7 +3441,8 @@ describe('MatSelect', () => {
       const fixture = TestBed.createComponent(BasicSelectWithoutFormsMultiple);
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.selectedFoods).toBeFalsy('Expected no value on init.');
+      expect(fixture.componentInstance.selectedFoods)
+        .withContext('Expected no value on init.').toBeFalsy();
 
       const select = fixture.nativeElement.querySelector('.mat-select');
       const trigger = fixture.nativeElement.querySelector('.mat-select-trigger');
@@ -3337,7 +3459,8 @@ describe('MatSelect', () => {
       flush();
 
       expect(fixture.componentInstance.selectedFoods)
-          .toBeFalsy('Expected no value after tabbing away.');
+        .withContext('Expected no value after tabbing away.')
+        .toBeFalsy();
     }));
 
     it('should emit once when a reset value is selected', fakeAsync(() => {
@@ -3423,7 +3546,9 @@ describe('MatSelect', () => {
           const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel')!;
 
           // The panel should be scrolled to 0 because centering the option disabled.
-          expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
+          // The panel should be scrolled to 0 because centering the option disabled.
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel not to be scrolled.`).toEqual(0);
           // The trigger should contain 'Pizza' because it was preselected
           expect(trigger.textContent).toContain('Pizza');
           // The selected index should be 1 because it was preselected
@@ -3476,11 +3601,14 @@ describe('MatSelect', () => {
       const topDifference = Math.floor(optionTop) -
           Math.floor(triggerTop - triggerFontSize - triggerExtraLineSpaceAbove);
 
+      // Expect the coordinates to be within a pixel of each other. We can't rely on comparing
+      // the exact value, because different browsers report the various sizes with slight (< 1px)
+      // deviations.
       // Expect the coordinates to be within a pixel of each other. We can't rely on comparing
       // the exact value, because different browsers report the various sizes with slight (< 1px)
       // deviations.
       expect(Math.abs(topDifference) < 2)
-          .toBe(true, `Expected trigger to align with option ${index}.`);
+        .withContext(`Expected trigger to align with option ${index}.`).toBe(true);
 
       // For the animation to start at the option's center, its origin must be the distance
       // from the top of the overlay to the option top + half the option height (48/2 = 24).
@@ -3490,8 +3618,11 @@ describe('MatSelect', () => {
 
       // Because the origin depends on the Y axis offset, we also have to
       // round down and check that the difference is within a pixel.
-      expect(Math.abs(expectedOrigin - origin) < 2).toBe(true,
-          `Expected panel animation to originate in the center of option ${index}.`);
+      // Because the origin depends on the Y axis offset, we also have to
+      // round down and check that the difference is within a pixel.
+      expect(Math.abs(expectedOrigin - origin) < 2)
+        .withContext(`Expected panel animation to originate in the center of option ${index}.`)
+        .toBe(true);
     }
 
     describe('ample space to open', () => {
@@ -3515,7 +3646,9 @@ describe('MatSelect', () => {
             const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel')!;
 
             // The panel should be scrolled to 0 because centering the option is not possible.
-            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
+            // The panel should be scrolled to 0 because centering the option is not possible.
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel not to be scrolled.`).toEqual(0);
             checkTriggerAlignedWithOption(0);
           }));
 
@@ -3532,7 +3665,9 @@ describe('MatSelect', () => {
             const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel')!;
 
             // The panel should be scrolled to 0 because centering the option is not possible.
-            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
+            // The panel should be scrolled to 0 because centering the option is not possible.
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected panel not to be scrolled.`).toEqual(0);
             checkTriggerAlignedWithOption(1);
           }));
 
@@ -3552,8 +3687,12 @@ describe('MatSelect', () => {
         // This will be its original offset from the scrollTop - half the panel height + half
         // the option height. 4 (index) * 48 (option height) = 192px offset from scrollTop
         // 192 - 256/2 + 48/2 = 88px
-        expect(scrollContainer.scrollTop)
-            .toEqual(88, `Expected overlay panel to be scrolled to center the selected option.`);
+        // The selected option should be scrolled to the center of the panel.
+// This will be its original offset from the scrollTop - half the panel height + half
+// the option height. 4 (index) * 48 (option height) = 192px offset from scrollTop
+// 192 - 256/2 + 48/2 = 88px
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected overlay panel to be scrolled to center the selected option.`).toEqual(88);
 
         checkTriggerAlignedWithOption(4);
       }));
@@ -3573,8 +3712,11 @@ describe('MatSelect', () => {
         // The selected option should be scrolled to the max scroll position.
         // This will be the height of the scrollContainer - the panel height.
         // 8 options * 48px = 384 scrollContainer height, 384 - 256 = 128px max scroll
-        expect(scrollContainer.scrollTop)
-            .toEqual(128, `Expected overlay panel to be scrolled to its maximum position.`);
+        // The selected option should be scrolled to the max scroll position.
+// This will be the height of the scrollContainer - the panel height.
+// 8 options * 48px = 384 scrollContainer height, 384 - 256 = 128px max scroll
+expect(scrollContainer.scrollTop)
+  .withContext(`Expected overlay panel to be scrolled to its maximum position.`).toEqual(128);
 
         checkTriggerAlignedWithOption(7);
       }));
@@ -3607,12 +3749,17 @@ describe('MatSelect', () => {
 
         const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel')!;
 
+        // The selected option should be scrolled to the center of the panel.
+        // This will be its original offset from the scrollTop - half the panel height + half the
+        // option height. 10 (option index + 3 group labels before it) * 48 (option height) = 480
+        // 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
         // The selected option should be scrolled to the center of the panel.
         // This will be its original offset from the scrollTop - half the panel height + half the
         // option height. 10 (option index + 3 group labels before it) * 48 (option height) = 480
         // 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
         expect(Math.floor(scrollContainer.scrollTop))
-            .toBe(376, `Expected overlay panel to be scrolled to center the selected option.`);
+          .withContext(`Expected overlay panel to be scrolled to center the selected option.`)
+          .toBe(376);
 
         checkTriggerAlignedWithOption(7, groupFixture.componentInstance.select);
       }));
@@ -3650,8 +3797,12 @@ describe('MatSelect', () => {
           // This will be its original offset from the scrollTop - half the panel height + half the
           // option height. 10 (option index + 3 group labels before it) * 48 (option height) = 480
           // 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
-          expect(Math.floor(scrollContainer.scrollTop))
-              .toBe(376, `Expected overlay panel to be scrolled to center the selected option.`);
+          // The selected option should be scrolled to the center of the panel.
+// This will be its original offset from the scrollTop - half the panel height + half the
+// option height. 10 (option index + 3 group labels before it) * 48 (option height) = 480
+// 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
+expect(Math.floor(scrollContainer.scrollTop))
+  .withContext(`Expected overlay panel to be scrolled to center the selected option.`).toBe(376);
 
           checkTriggerAlignedWithOption(7, groupFixture.componentInstance.select);
         }));
@@ -3712,8 +3863,8 @@ describe('MatSelect', () => {
             const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel')!;
 
             expect(Math.ceil(scrollContainer.scrollTop))
-                .toEqual(Math.ceil(idealScrollTop + 5),
-                    `Expected panel to adjust scroll position to fit in viewport.`);
+              .withContext(`Expected panel to adjust scroll position to fit in viewport.`)
+              .toEqual(Math.ceil(idealScrollTop + 5));
 
             checkTriggerAlignedWithOption(4);
           }));
@@ -3776,11 +3927,15 @@ describe('MatSelect', () => {
             const difference = Math.ceil(scrollContainer.scrollTop) -
                 Math.ceil(idealScrollTop - expectedExtraScroll);
 
+            // Note that different browser/OS combinations report the different dimensions with
+            // slight deviations (< 1px). We round the expectation and check that the values
+            // are within a pixel of each other to avoid flakes.
             // Note that different browser/OS combinations report the different dimensions with
             // slight deviations (< 1px). We round the expectation and check that the values
             // are within a pixel of each other to avoid flakes.
             expect(Math.abs(difference) < 2)
-                .toBe(true, `Expected panel to adjust scroll position to fit in viewport.`);
+              .withContext(`Expected panel to adjust scroll position to fit in viewport.`)
+              .toBe(true);
 
             checkTriggerAlignedWithOption(4);
           }));
@@ -3805,17 +3960,22 @@ describe('MatSelect', () => {
             const scrollContainer = overlayPane.querySelector('.mat-select-panel')!;
 
             // Expect no scroll to be attempted
-            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
+            // Expect no scroll to be attempted
+            expect(scrollContainer.scrollTop)
+              .withContext(`Expected panel not to be scrolled.`).toEqual(0);
 
             const difference = Math.floor(overlayBottom) - Math.floor(triggerBottom);
 
+            // Check that the values are within a pixel of each other. This avoids sub-pixel
+            // deviations between OS and browser versions.
             // Check that the values are within a pixel of each other. This avoids sub-pixel
             // deviations between OS and browser versions.
             expect(Math.abs(difference) < 2)
-                .toEqual(true, `Expected trigger bottom to align with overlay bottom.`);
+              .withContext(`Expected trigger bottom to align with overlay bottom.`).toEqual(true);
 
             expect(fixture.componentInstance.select._transformOrigin)
-                .toContain(`bottom`, `Expected panel animation to originate at the bottom.`);
+              .withContext(`Expected panel animation to originate at the bottom.`)
+              .toContain(`bottom`);
           }));
 
       it('should fall back to "below" positioning if scroll adjustment won\'t help',
@@ -3838,13 +3998,16 @@ describe('MatSelect', () => {
             const scrollContainer = overlayPane.querySelector('.mat-select-panel')!;
 
             // Expect scroll to remain at the max scroll position
-            expect(scrollContainer.scrollTop).toEqual(128, `Expected panel to be at max scroll.`);
+            // Expect scroll to remain at the max scroll position
+            expect(scrollContainer.scrollTop)
+              .withContext(`Expected panel to be at max scroll.`).toEqual(128);
 
             expect(Math.floor(overlayTop))
-                .toEqual(Math.floor(triggerTop), `Expected trigger top to align with overlay top.`);
+              .withContext(`Expected trigger top to align with overlay top.`)
+              .toEqual(Math.floor(triggerTop));
 
             expect(fixture.componentInstance.select._transformOrigin)
-                .toContain(`top`, `Expected panel animation to originate at the top.`);
+              .withContext(`Expected panel animation to originate at the top.`).toContain(`top`);
           }));
 
     });
@@ -3863,8 +4026,9 @@ describe('MatSelect', () => {
 
         const panelLeft = document.querySelector('.mat-select-panel')!.getBoundingClientRect().left;
 
-        expect(panelLeft).toBeGreaterThan(0,
-            `Expected select panel to be inside the viewport in ltr.`);
+        expect(panelLeft)
+          .withContext(`Expected select panel to be inside the viewport in ltr.`)
+          .toBeGreaterThan(0);
       }));
 
       it('should stay within the viewport when overflowing on the left in rtl', fakeAsync(() => {
@@ -3876,8 +4040,9 @@ describe('MatSelect', () => {
 
         const panelLeft = document.querySelector('.mat-select-panel')!.getBoundingClientRect().left;
 
-        expect(panelLeft).toBeGreaterThan(0,
-            `Expected select panel to be inside the viewport in rtl.`);
+        expect(panelLeft)
+          .withContext(`Expected select panel to be inside the viewport in rtl.`)
+          .toBeGreaterThan(0);
       }));
 
       it('should stay within the viewport when overflowing on the right in ltr', fakeAsync(() => {
@@ -3890,8 +4055,9 @@ describe('MatSelect', () => {
         const panelRight = document.querySelector('.mat-select-panel')!
             .getBoundingClientRect().right;
 
-        expect(viewportRect - panelRight).toBeGreaterThan(0,
-            `Expected select panel to be inside the viewport in ltr.`);
+        expect(viewportRect - panelRight)
+          .withContext(`Expected select panel to be inside the viewport in ltr.`)
+          .toBeGreaterThan(0);
       }));
 
       it('should stay within the viewport when overflowing on the right in rtl', fakeAsync(() => {
@@ -3905,8 +4071,9 @@ describe('MatSelect', () => {
         const panelRight = document.querySelector('.mat-select-panel')!
             .getBoundingClientRect().right;
 
-        expect(viewportRect - panelRight).toBeGreaterThan(0,
-            `Expected select panel to be inside the viewport in rtl.`);
+        expect(viewportRect - panelRight)
+          .withContext(`Expected select panel to be inside the viewport in rtl.`)
+          .toBeGreaterThan(0);
       }));
 
       it('should keep the position within the viewport on repeat openings', fakeAsync(() => {
@@ -3918,7 +4085,8 @@ describe('MatSelect', () => {
         let panelLeft = document.querySelector('.mat-select-panel')!.getBoundingClientRect().left;
 
         expect(panelLeft)
-            .toBeGreaterThanOrEqual(0, `Expected select panel to be inside the viewport.`);
+          .withContext(`Expected select panel to be inside the viewport.`)
+          .toBeGreaterThanOrEqual(0);
 
         fixture.componentInstance.select.close();
         fixture.detectChanges();
@@ -3930,8 +4098,9 @@ describe('MatSelect', () => {
 
         panelLeft = document.querySelector('.mat-select-panel')!.getBoundingClientRect().left;
 
-        expect(panelLeft).toBeGreaterThanOrEqual(0,
-            `Expected select panel continue being inside the viewport.`);
+        expect(panelLeft)
+          .withContext(`Expected select panel continue being inside the viewport.`)
+          .toBeGreaterThanOrEqual(0);
       }));
     });
 
@@ -4068,10 +4237,12 @@ describe('MatSelect', () => {
         const overlayBottom = overlayPane.getBoundingClientRect().bottom;
         const difference = Math.floor(overlayBottom) - Math.floor(triggerBottom);
 
+        // Check that the values are within a pixel of each other. This avoids sub-pixel
+        // deviations between OS and browser versions.
         // Check that the values are within a pixel of each other. This avoids sub-pixel
         // deviations between OS and browser versions.
         expect(Math.abs(difference) < 2)
-            .toEqual(true, `Expected trigger bottom to align with overlay bottom.`);
+          .withContext(`Expected trigger bottom to align with overlay bottom.`).toEqual(true);
       }));
 
       it('should fall back to "below" positioning properly when scrolled', fakeAsync(() => {
@@ -4104,7 +4275,8 @@ describe('MatSelect', () => {
         const overlayTop = overlayPane.getBoundingClientRect().top;
 
         expect(Math.floor(overlayTop))
-            .toEqual(Math.floor(triggerTop), `Expected trigger top to align with overlay top.`);
+          .withContext(`Expected trigger top to align with overlay top.`)
+          .toEqual(Math.floor(triggerTop));
       }));
     });
 
@@ -4125,8 +4297,11 @@ describe('MatSelect', () => {
 
         // Each option is 32px wider than the trigger, so it must be adjusted 16px
         // to ensure the text overlaps correctly.
-        expect(Math.floor(firstOptionLeft)).toEqual(Math.floor(triggerLeft - 16),
-            `Expected trigger to align with the selected option on the x-axis in LTR.`);
+        // Each option is 32px wider than the trigger, so it must be adjusted 16px
+        // to ensure the text overlaps correctly.
+        expect(Math.floor(firstOptionLeft))
+          .withContext(`Expected trigger to align with the selected option on the x-axis in LTR.`)
+          .toEqual(Math.floor(triggerLeft - 16));
       }));
 
       it('should align the trigger and the selected option on the x-axis in rtl', fakeAsync(() => {
@@ -4141,11 +4316,13 @@ describe('MatSelect', () => {
         const firstOptionRight =
             document.querySelector('.cdk-overlay-pane mat-option')!.getBoundingClientRect().right;
 
+        // Each option is 32px wider than the trigger, so it must be adjusted 16px
+        // to ensure the text overlaps correctly.
         // Each option is 32px wider than the trigger, so it must be adjusted 16px
         // to ensure the text overlaps correctly.
         expect(Math.floor(firstOptionRight))
-            .toEqual(Math.floor(triggerRight + 16),
-                `Expected trigger to align with the selected option on the x-axis in RTL.`);
+          .withContext(`Expected trigger to align with the selected option on the x-axis in RTL.`)
+          .toEqual(Math.floor(triggerRight + 16));
       }));
     });
 
@@ -4171,10 +4348,11 @@ describe('MatSelect', () => {
         const firstOptionLeft =
             document.querySelector('.cdk-overlay-pane mat-option')!.getBoundingClientRect().left;
 
+        // 44px accounts for the checkbox size, margin and the panel's padding.
         // 44px accounts for the checkbox size, margin and the panel's padding.
         expect(Math.floor(firstOptionLeft))
-            .toEqual(Math.floor(triggerLeft - 40),
-                `Expected trigger label to align along x-axis, accounting for the checkbox.`);
+          .withContext(`Expected trigger label to align along x-axis, accounting for the checkbox.`)
+          .toEqual(Math.floor(triggerLeft - 40));
       }));
 
       it('should adjust for the checkbox in rtl', fakeAsync(() => {
@@ -4187,10 +4365,11 @@ describe('MatSelect', () => {
         const firstOptionRight =
             document.querySelector('.cdk-overlay-pane mat-option')!.getBoundingClientRect().right;
 
+        // 44px accounts for the checkbox size, margin and the panel's padding.
         // 44px accounts for the checkbox size, margin and the panel's padding.
         expect(Math.floor(firstOptionRight))
-            .toEqual(Math.floor(triggerRight + 40),
-                `Expected trigger label to align along x-axis, accounting for the checkbox.`);
+          .withContext(`Expected trigger label to align along x-axis, accounting for the checkbox.`)
+          .toEqual(Math.floor(triggerRight + 40));
       }));
     });
 
@@ -4221,8 +4400,10 @@ describe('MatSelect', () => {
               .getBoundingClientRect().left;
 
           // 32px is the 16px default padding plus 16px of padding when an option is in a group.
-          expect(Math.floor(selectedOptionLeft)).toEqual(Math.floor(triggerLeft - 32),
-              `Expected trigger label to align along x-axis, accounting for the padding in ltr.`);
+          // 32px is the 16px default padding plus 16px of padding when an option is in a group.
+          expect(Math.floor(selectedOptionLeft))
+            .withContext(`Expected trigger label to align along x-axis, accounting for the ` +
+                         `padding in ltr.`).toEqual(Math.floor(triggerLeft - 32));
         });
       }));
 
@@ -4241,8 +4422,10 @@ describe('MatSelect', () => {
             .getBoundingClientRect().right;
 
         // 32px is the 16px default padding plus 16px of padding when an option is in a group.
-        expect(Math.floor(selectedOptionRight)).toEqual(Math.floor(triggerRight + 32),
-            `Expected trigger label to align along x-axis, accounting for the padding in rtl.`);
+        // 32px is the 16px default padding plus 16px of padding when an option is in a group.
+        expect(Math.floor(selectedOptionRight))
+          .withContext(`Expected trigger label to align along x-axis, accounting for the ` +
+                       `padding in rtl.`).toEqual(Math.floor(triggerRight + 32));
       }));
 
       it('should not adjust if all options are within a group, except the selected one',
@@ -4286,10 +4469,11 @@ describe('MatSelect', () => {
           const difference =
               Math.abs(optionTop + (menuItemHeight - triggerHeight) / 2 - triggerTop);
           expect(difference)
-              .toBeLessThan(0.1, 'Expected trigger to align with the first option.');
+            .withContext('Expected trigger to align with the first option.').toBeLessThan(0.1);
         } else {
           expect(Math.floor(optionTop + (menuItemHeight - triggerHeight) / 2))
-              .toBe(Math.floor(triggerTop), 'Expected trigger to align with the first option.');
+            .withContext('Expected trigger to align with the first option.')
+            .toBe(Math.floor(triggerTop));
         }
       }));
 
@@ -4534,14 +4718,16 @@ describe('MatSelect', () => {
       fixture.detectChanges();
       flush();
 
-      expect(testInstance.options.toArray().every(option => !!option.multiple)).toBe(true,
-          'Expected `multiple` to have been added to initial set of options.');
+      expect(testInstance.options.toArray().every(option => !!option.multiple))
+        .withContext('Expected `multiple` to have been added to initial set of options.')
+        .toBe(true);
 
       testInstance.foods.push({ value: 'cake-8', viewValue: 'Cake' });
       fixture.detectChanges();
 
-      expect(testInstance.options.toArray().every(option => !!option.multiple)).toBe(true,
-          'Expected `multiple` to have been set on dynamically-added option.');
+      expect(testInstance.options.toArray().every(option => !!option.multiple))
+        .withContext('Expected `multiple` to have been set on dynamically-added option.')
+        .toBe(true);
     }));
 
     it('should update the active item index on click', fakeAsync(() => {
diff --git a/src/material/sidenav/drawer.spec.ts b/src/material/sidenav/drawer.spec.ts
index 0eac9cdb5306..14fa3d669d72 100644
--- a/src/material/sidenav/drawer.spec.ts
+++ b/src/material/sidenav/drawer.spec.ts
@@ -199,17 +199,17 @@ describe('MatDrawer', () => {
       fixture.detectChanges();
       tick();
 
-      expect(testComponent.openCount).toBe(1, 'Expected one open event.');
-      expect(testComponent.openStartCount).toBe(1, 'Expected one open start event.');
-      expect(testComponent.closeCount).toBe(0, 'Expected no close events.');
-      expect(testComponent.closeStartCount).toBe(0, 'Expected no close start events.');
+      expect(testComponent.openCount).withContext('Expected one open event.').toBe(1);
+      expect(testComponent.openStartCount).withContext('Expected one open start event.').toBe(1);
+      expect(testComponent.closeCount).withContext('Expected no close events.').toBe(0);
+      expect(testComponent.closeStartCount).withContext('Expected no close start events.').toBe(0);
 
       const event = dispatchKeyboardEvent(drawer.nativeElement, 'keydown', ESCAPE);
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.closeCount).toBe(1, 'Expected one close event.');
-      expect(testComponent.closeStartCount).toBe(1, 'Expected one close start event.');
+      expect(testComponent.closeCount).withContext('Expected one close event.').toBe(1);
+      expect(testComponent.closeStartCount).withContext('Expected one close start event.').toBe(1);
       expect(event.defaultPrevented).toBe(true);
     }));
 
@@ -225,16 +225,17 @@ describe('MatDrawer', () => {
       fixture.detectChanges();
       tick();
 
-      expect(testComponent.closeCount).toBe(0, 'Expected no close events.');
-      expect(testComponent.closeStartCount).toBe(0, 'Expected no close start events.');
+      expect(testComponent.closeCount).withContext('Expected no close events.').toBe(0);
+      expect(testComponent.closeStartCount).withContext('Expected no close start events.').toBe(0);
 
       const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt: true});
       dispatchEvent(drawer.nativeElement, event);
       fixture.detectChanges();
       flush();
 
-      expect(testComponent.closeCount).toBe(0, 'Expected still no close events.');
-      expect(testComponent.closeStartCount).toBe(0, 'Expected still no close start events.');
+      expect(testComponent.closeCount).withContext('Expected still no close events.').toBe(0);
+      expect(testComponent.closeStartCount)
+        .withContext('Expected still no close start events.').toBe(0);
       expect(event.defaultPrevented).toBe(false);
     }));
 
@@ -309,7 +310,7 @@ describe('MatDrawer', () => {
       flush();
 
       expect(document.activeElement)
-          .toBe(openButton, 'Expected focus to be restored to the open button on close.');
+        .withContext('Expected focus to be restored to the open button on close.').toBe(openButton);
     }));
 
     it('should restore focus on close if focus is on drawer', fakeAsync(() => {
@@ -332,7 +333,7 @@ describe('MatDrawer', () => {
       flush();
 
       expect(document.activeElement)
-          .toBe(openButton, 'Expected focus to be restored to the open button on close.');
+        .withContext('Expected focus to be restored to the open button on close.').toBe(openButton);
     }));
 
     it('should restore focus to an SVG element', fakeAsync(() => {
@@ -354,7 +355,7 @@ describe('MatDrawer', () => {
       flush();
 
       expect(document.activeElement)
-          .toBe(svg, 'Expected focus to be restored to the SVG element on close.');
+        .withContext('Expected focus to be restored to the SVG element on close.').toBe(svg);
     }));
 
     it('should not restore focus on close if focus is outside drawer', fakeAsync(() => {
@@ -378,7 +379,8 @@ describe('MatDrawer', () => {
       tick();
 
       expect(document.activeElement)
-          .toBe(closeButton, 'Expected focus not to be restored to the open button on close.');
+        .withContext('Expected focus not to be restored to the open button on close.')
+        .toBe(closeButton);
     }));
 
     it('should pick up drawers that are not direct descendants', fakeAsync(() => {
@@ -451,7 +453,7 @@ describe('MatDrawer', () => {
 
       const drawerEl = fixture.debugElement.query(By.css('mat-drawer'))!.nativeElement;
       expect(drawerEl.hasAttribute('align'))
-          .toBe(false, 'Expected drawer not to have a native align attribute.');
+        .withContext('Expected drawer not to have a native align attribute.').toBe(false);
     });
 
     it('should throw when multiple drawers have the same position', fakeAsync(() => {
@@ -635,13 +637,13 @@ describe('MatDrawer', () => {
           Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.cdk-focus-trap-anchor'));
 
       expect(anchors.every(anchor => !anchor.hasAttribute('tabindex')))
-          .toBe(true, 'Expected focus trap anchors to be disabled in side mode.');
+        .withContext('Expected focus trap anchors to be disabled in side mode.').toBe(true);
 
       testComponent.mode = 'over';
       fixture.detectChanges();
 
       expect(anchors.every(anchor => anchor.getAttribute('tabindex') === '0'))
-          .toBe(true, 'Expected focus trap anchors to be enabled in over mode.');
+        .withContext('Expected focus trap anchors to be enabled in over mode.').toBe(true);
     }));
 
   });
@@ -842,7 +844,8 @@ describe('MatDrawerContainer', () => {
       fixture.detectChanges();
 
       const content = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
-      expect(content.style.marginLeft).toBe('', 'Margin should be omitted when drawer is closed');
+      expect(content.style.marginLeft)
+        .withContext('Margin should be omitted when drawer is closed').toBe('');
 
       // Open the drawer and resolve the open animation.
       fixture.componentInstance.drawer.open();
@@ -858,7 +861,8 @@ describe('MatDrawerContainer', () => {
       flush();
       fixture.detectChanges();
 
-      expect(content.style.marginLeft).toBe('', 'Margin should be removed after drawer close.');
+      expect(content.style.marginLeft)
+        .withContext('Margin should be removed after drawer close.').toBe('');
 
       discardPeriodicTasks();
     }));
diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts
index 792a3f09e338..4ea485ec7b8d 100644
--- a/src/material/slide-toggle/slide-toggle.spec.ts
+++ b/src/material/slide-toggle/slide-toggle.spec.ts
@@ -396,7 +396,8 @@ describe('MatSlideToggle without forms', () => {
         .query(By.directive(MatSlideToggle))!.componentInstance as MatSlideToggle;
 
       expect(slideToggle.tabIndex)
-        .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
+        .withContext('Expected tabIndex property to have been set based on the native attribute')
+        .toBe(5);
     }));
 
     it('should set the tabindex of the host element to -1', fakeAsync(() => {
@@ -443,20 +444,25 @@ describe('MatSlideToggle without forms', () => {
 
       expect(testComponent.toggleTriggered).toBe(0);
       expect(testComponent.dragTriggered).toBe(0);
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+      expect(slideToggle.checked)
+        .withContext('Expect slide toggle value not changed').toBe(false);
 
       labelElement.click();
       fixture.detectChanges();
 
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
-      expect(testComponent.toggleTriggered).toBe(1, 'Expect toggle once');
+      expect(slideToggle.checked)
+        .withContext('Expect slide toggle value not changed').toBe(false);
+      expect(testComponent.toggleTriggered)
+        .withContext('Expect toggle once').toBe(1);
       expect(testComponent.dragTriggered).toBe(0);
 
       inputElement.click();
       fixture.detectChanges();
 
-      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
-      expect(testComponent.toggleTriggered).toBe(2, 'Expect toggle twice');
+      expect(slideToggle.checked)
+        .withContext('Expect slide toggle value not changed').toBe(false);
+      expect(testComponent.toggleTriggered)
+        .withContext('Expect toggle twice').toBe(2);
       expect(testComponent.dragTriggered).toBe(0);
     });
 
@@ -717,14 +723,15 @@ describe('MatSlideToggle with forms', () => {
       fixture.detectChanges();
 
       expect(slideToggle.checked)
-        .toBe(true, 'Expected slide-toggle to be checked initially');
+        .withContext('Expected slide-toggle to be checked initially').toBe(true);
 
       labelElement.click();
       fixture.detectChanges();
       tick();
 
       expect(slideToggle.checked)
-        .toBe(false, 'Expected slide-toggle to be no longer checked after label click.');
+        .withContext('Expected slide-toggle to be no longer checked after label click.')
+        .toBe(false);
     }));
 
     it('should be pristine if initial value is set from NgModel', fakeAsync(() => {
@@ -878,7 +885,8 @@ describe('MatSlideToggle with forms', () => {
 
       spyOn(fixture.componentInstance, 'onChange').and.callFake(() => {
         expect(fixture.componentInstance.checked)
-          .toBe(true, 'Expected the model value to have changed before the change event fired.');
+          .withContext('Expected the model value to have changed before the change event fired.')
+          .toBe(true);
       });
 
       labelEl.click();
diff --git a/src/material/slide-toggle/testing/shared.spec.ts b/src/material/slide-toggle/testing/shared.spec.ts
index fe91a36bd978..f9d9455af9e9 100644
--- a/src/material/slide-toggle/testing/shared.spec.ts
+++ b/src/material/slide-toggle/testing/shared.spec.ts
@@ -71,12 +71,13 @@ export function runHarnessTests(
 
   it('should get valid state', async () => {
     const [requiredToggle, optionalToggle] = await loader.getAllHarnesses(slideToggleHarness);
-    expect(await optionalToggle.isValid()).toBe(true, 'Expected optional toggle to be valid');
+    expect(await optionalToggle.isValid())
+      .withContext('Expected optional toggle to be valid').toBe(true);
     expect(await requiredToggle.isValid())
-        .toBe(true, 'Expected required checked toggle to be valid');
+      .withContext('Expected required checked toggle to be valid').toBe(true);
     await requiredToggle.uncheck();
     expect(await requiredToggle.isValid())
-        .toBe(false, 'Expected required unchecked toggle to be invalid');
+      .withContext('Expected required unchecked toggle to be invalid').toBe(false);
   });
 
   it('should get name', async () => {
diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts
index 8c22af78cf0c..5dabc3e54010 100644
--- a/src/material/slider/slider.spec.ts
+++ b/src/material/slider/slider.spec.ts
@@ -648,7 +648,7 @@ describe('MatSlider', () => {
 
     it('should be able to reset the tick interval after it has been set', () => {
       expect(sliderNativeElement.classList)
-          .toContain('mat-slider-has-ticks', 'Expected element to have ticks initially.');
+        .withContext('Expected element to have ticks initially.').toContain('mat-slider-has-ticks');
 
       fixture.componentInstance.tickInterval = 0;
       fixture.detectChanges();
@@ -1243,7 +1243,7 @@ describe('MatSlider', () => {
       fixture.detectChanges();
 
       expect(sliderNativeElement.classList.contains('mat-slider-hide-last-tick'))
-          .toBe(true, 'last tick should be hidden');
+        .withContext('last tick should be hidden').toBe(true);
     });
   });
 
@@ -1317,12 +1317,14 @@ describe('MatSlider', () => {
 
       const slider = fixture.debugElement.query(By.directive(MatSlider))!.componentInstance;
 
-      expect(slider.tabIndex).toBe(0, 'Expected the tabIndex to be set to 0 by default.');
+      expect(slider.tabIndex)
+        .withContext('Expected the tabIndex to be set to 0 by default.').toBe(0);
 
       fixture.componentInstance.tabIndex = 3;
       fixture.detectChanges();
 
-      expect(slider.tabIndex).toBe(3, 'Expected the tabIndex to have been changed.');
+      expect(slider.tabIndex)
+        .withContext('Expected the tabIndex to have been changed.').toBe(3);
     });
 
     it('should detect the native tabindex attribute', () => {
@@ -1332,7 +1334,8 @@ describe('MatSlider', () => {
       const slider = fixture.debugElement.query(By.directive(MatSlider))!.componentInstance;
 
       expect(slider.tabIndex)
-        .toBe(5, 'Expected the tabIndex to be set to the value of the native attribute.');
+        .withContext('Expected the tabIndex to be set to the value of the native attribute.')
+        .toBe(5);
     });
   });
 
diff --git a/src/material/snack-bar/snack-bar.spec.ts b/src/material/snack-bar/snack-bar.spec.ts
index d3d79b9e5237..f14fef3057d4 100644
--- a/src/material/snack-bar/snack-bar.spec.ts
+++ b/src/material/snack-bar/snack-bar.spec.ts
@@ -72,13 +72,14 @@ describe('MatSnackBar', () => {
     const inertElement = containerElement.querySelector('[aria-hidden]')!;
 
     expect(inertElement.getAttribute('aria-hidden'))
-      .toBe('true', 'Expected the non-live region to be aria-hidden');
-    expect(inertElement.textContent).toContain('Snack time!',
-        'Expected non-live region to contain the snack bar content');
+      .withContext('Expected the non-live region to be aria-hidden').toBe('true');
+    expect(inertElement.textContent)
+      .withContext('Expected non-live region to contain the snack bar content')
+      .toContain('Snack time!');
 
     const liveElement = containerElement.querySelector('[aria-live]')!;
     expect(liveElement.childNodes.length)
-        .toBe(0, 'Expected live region to not contain any content');
+      .withContext('Expected live region to not contain any content').toBe(0);
   });
 
   it('should move content to the live region after 150ms', fakeAsync(() => {
@@ -89,11 +90,13 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
     tick(announceDelay);
 
-    expect(liveElement.textContent).toContain('Snack time!',
-        'Expected live region to contain the snack bar content');
+    expect(liveElement.textContent)
+      .withContext('Expected live region to contain the snack bar content')
+      .toContain('Snack time!');
 
     const inertElement = containerElement.querySelector('[aria-hidden]')!;
-    expect(inertElement).toBeFalsy('Expected non-live region to not contain any content');
+    expect(inertElement)
+      .withContext('Expected non-live region to not contain any content').toBeFalsy();
   }));
 
   it('should preserve focus when moving content to the live region', fakeAsync(() => {
@@ -104,11 +107,11 @@ describe('MatSnackBar', () => {
         .querySelector('.mat-simple-snackbar-action > button')! as HTMLElement;
     actionButton.focus();
     expect(document.activeElement)
-        .toBe(actionButton, 'Expected the focus to move to the action button');
+      .withContext('Expected the focus to move to the action button').toBe(actionButton);
 
     flush();
     expect(document.activeElement)
-        .toBe(actionButton, 'Expected the focus to remain on the action button');
+      .withContext('Expected the focus to remain on the action button').toBe(actionButton);
   }));
 
   it('should have aria-live of `assertive` with an `assertive` politeness if no announcement ' +
@@ -121,8 +124,9 @@ describe('MatSnackBar', () => {
     const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
-    expect(liveElement.getAttribute('aria-live')).toBe('assertive',
-        'Expected snack bar container live region to have aria-live="assertive"');
+    expect(liveElement.getAttribute('aria-live'))
+      .withContext('Expected snack bar container live region to have aria-live="assertive"')
+      .toBe('assertive');
   });
 
   it('should have aria-live of `polite` with an `assertive` politeness if an announcement ' +
@@ -135,7 +139,8 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('polite', 'Expected snack bar container live region to have aria-live="polite"');
+      .withContext('Expected snack bar container live region to have aria-live="polite"')
+      .toBe('polite');
   });
 
   it('should have aria-live of `polite` with a `polite` politeness', () => {
@@ -146,7 +151,8 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('polite', 'Expected snack bar container live region to have aria-live="polite"');
+      .withContext('Expected snack bar container live region to have aria-live="polite"')
+      .toBe('polite');
   });
 
   it('should have aria-live of `off` if the politeness is turned off', () => {
@@ -157,7 +163,7 @@ describe('MatSnackBar', () => {
     const liveElement = containerElement.querySelector('[aria-live]')!;
 
     expect(liveElement.getAttribute('aria-live'))
-        .toBe('off', 'Expected snack bar container live region to have aria-live="off"');
+      .withContext('Expected snack bar container live region to have aria-live="off"').toBe('off');
   });
 
   it('should have role of `alert` with an `assertive` politeness (Firefox only)', () => {
@@ -189,15 +195,16 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     const messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
-    expect(messageElement.textContent).toContain('Snack time!',
-       'Expected snack bar to show a message without a ViewContainerRef');
+    expect(messageElement.textContent)
+      .withContext('Expected snack bar to show a message without a ViewContainerRef')
+      .toContain('Snack time!');
 
     snackBarRef.dismiss();
     viewContainerFixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.childNodes.length)
-        .toBe(0, 'Expected snack bar to be dismissed without a ViewContainerRef');
+      .withContext('Expected snack bar to be dismissed without a ViewContainerRef').toBe(0);
   }));
 
   it('should open a simple message with a button', () => {
@@ -207,21 +214,22 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof SimpleSnackBar)
-      .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+      .withContext('Expected the snack bar content component to be SimpleSnackBar').toBe(true);
     expect(snackBarRef.instance.snackBarRef)
-      .toBe(snackBarRef,
-            'Expected the snack bar reference to be placed in the component instance');
+      .withContext('Expected the snack bar reference to be placed in the component instance')
+      .toBe(snackBarRef);
 
     const messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
     expect(messageElement.textContent)
-        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
+      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
+      .toContain(simpleMessage);
 
     const buttonElement = overlayContainerElement.querySelector('button.mat-button')!;
     expect(buttonElement.tagName)
-        .toBe('BUTTON', 'Expected snack bar action label to be a <button>');
+      .withContext('Expected snack bar action label to be a <button>').toBe('BUTTON');
     expect(buttonElement.textContent)
-        .toBe(simpleActionLabel,
-              `Expected the snack bar action label to be '${simpleActionLabel}'`);
+      .withContext(`Expected the snack bar action label to be '${simpleActionLabel}'`)
+      .toBe(simpleActionLabel);
   });
 
   it('should open a simple message with no button', () => {
@@ -231,15 +239,18 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof SimpleSnackBar)
-      .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+      .withContext('Expected the snack bar content component to be SimpleSnackBar').toBe(true);
     expect(snackBarRef.instance.snackBarRef)
-      .toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
+      .withContext('Expected the snack bar reference to be placed in the component instance')
+      .toBe(snackBarRef);
 
     const messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
     expect(messageElement.textContent)
-        .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
+      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
+      .toContain(simpleMessage);
     expect(overlayContainerElement.querySelector('button.mat-button'))
-        .toBeNull('Expected the query selection for action label to be null');
+      .withContext('Expected the query selection for action label to be null')
+      .toBeNull();
   });
 
   it('should dismiss the snack bar and remove itself from the view', fakeAsync(() => {
@@ -249,21 +260,23 @@ describe('MatSnackBar', () => {
     const snackBarRef = snackBar.open(simpleMessage, undefined, config);
     viewContainerFixture.detectChanges();
     expect(overlayContainerElement.childElementCount)
-        .toBeGreaterThan(0, 'Expected overlay container element to have at least one child');
+      .withContext('Expected overlay container element to have at least one child')
+      .toBeGreaterThan(0);
 
     snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
 
     snackBarRef.dismiss();
     const messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
-    expect (messageElement.hasAttribute('mat-exit'))
-        .toBe(true, 'Expected the snackbar container to have the "exit" attribute upon dismiss');
+    expect(messageElement.hasAttribute('mat-exit'))
+      .withContext('Expected the snackbar container to have the "exit" attribute upon dismiss')
+      .toBe(true);
 
     viewContainerFixture.detectChanges();  // Run through animations for dismissal
     flush();
 
     expect(dismissCompleteSpy).toHaveBeenCalled();
     expect(overlayContainerElement.childElementCount)
-        .toBe(0, 'Expected the overlay container element to have no child elements');
+      .withContext('Expected the overlay container element to have no child elements').toBe(0);
   }));
 
 
@@ -275,7 +288,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-      .toBe(1, 'Expected the overlay with the default announcement message to be added');
+      .withContext('Expected the overlay with the default announcement message to be added')
+      .toBe(1);
 
     expect(liveAnnouncer.announce).not.toHaveBeenCalled();
   }));
@@ -291,7 +305,7 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-      .toBe(1, 'Expected the overlay with a custom `announcementMessage` to be added');
+      .withContext('Expected the overlay with a custom `announcementMessage` to be added').toBe(1);
 
     expect(liveAnnouncer.announce).toHaveBeenCalledWith('Custom announcement', 'assertive');
   }));
@@ -318,7 +332,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.childElementCount)
-        .toBe(0, 'Expected snack bar to be removed after the view container was destroyed');
+      .withContext('Expected snack bar to be removed after the view container was destroyed')
+      .toBe(0);
   }));
 
   it('should set the animation state to visible on entry', () => {
@@ -328,12 +343,12 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
     const container = snackBarRef.containerInstance as MatSnackBarContainer;
     expect(container._animationState)
-        .toBe('visible', `Expected the animation state would be 'visible'.`);
+      .withContext(`Expected the animation state would be 'visible'.`).toBe('visible');
     snackBarRef.dismiss();
 
     viewContainerFixture.detectChanges();
     expect(container._animationState)
-        .toBe('hidden', `Expected the animation state would be 'hidden'.`);
+      .withContext(`Expected the animation state would be 'hidden'.`).toBe('hidden');
   });
 
   it('should set the animation state to complete on exit', () => {
@@ -344,7 +359,7 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
     const container = snackBarRef.containerInstance as MatSnackBarContainer;
     expect(container._animationState)
-        .toBe('hidden', `Expected the animation state would be 'hidden'.`);
+      .withContext(`Expected the animation state would be 'hidden'.`).toBe('hidden');
   });
 
   it(`should set the old snack bar animation state to complete and the new snack bar animation
@@ -356,7 +371,7 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
     const container1 = snackBarRef.containerInstance as MatSnackBarContainer;
     expect(container1._animationState)
-        .toBe('visible', `Expected the animation state would be 'visible'.`);
+      .withContext(`Expected the animation state would be 'visible'.`).toBe('visible');
 
     const config2 = {viewContainerRef: testViewContainerRef};
     const snackBarRef2 = snackBar.open(simpleMessage, undefined, config2);
@@ -368,9 +383,9 @@ describe('MatSnackBar', () => {
     expect(dismissCompleteSpy).toHaveBeenCalled();
     const container2 = snackBarRef2.containerInstance as MatSnackBarContainer;
     expect(container1._animationState)
-        .toBe('hidden', `Expected the animation state would be 'hidden'.`);
+      .withContext(`Expected the animation state would be 'hidden'.`).toBe('hidden');
     expect(container2._animationState)
-        .toBe('visible', `Expected the animation state would be 'visible'.`);
+      .withContext(`Expected the animation state would be 'visible'.`).toBe('visible');
   }));
 
   it('should open a new snackbar after dismissing a previous snackbar', fakeAsync(() => {
@@ -391,7 +406,7 @@ describe('MatSnackBar', () => {
     flush();
     const container = snackBarRef.containerInstance as MatSnackBarContainer;
     expect(container._animationState)
-        .toBe('visible', `Expected the animation state would be 'visible'.`);
+      .withContext(`Expected the animation state would be 'visible'.`).toBe('visible');
   }));
 
   it('should remove past snackbars when opening new snackbars', fakeAsync(() => {
@@ -556,7 +571,8 @@ describe('MatSnackBar', () => {
 
     const pane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
 
-    expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.');
+    expect(pane.getAttribute('dir'))
+      .withContext('Expected the pane to be in RTL mode.').toBe('rtl');
   });
 
   it('should be able to override the default config', fakeAsync(() => {
@@ -582,7 +598,8 @@ describe('MatSnackBar', () => {
     flush();
 
     expect(overlayContainerElement.querySelector('snack-bar-container')!.classList)
-        .toContain('custom-class', 'Expected class applied through the defaults to be applied.');
+      .withContext('Expected class applied through the defaults to be applied.')
+      .toContain('custom-class');
   }));
 
   it('should dismiss the open snack bar on destroy', fakeAsync(() => {
@@ -615,16 +632,19 @@ describe('MatSnackBar', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);
 
       expect(snackBarRef.instance instanceof BurritosNotification)
-        .toBe(true, 'Expected the snack bar content component to be BurritosNotification');
+        .withContext('Expected the snack bar content component to be BurritosNotification')
+        .toBe(true);
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('Burritos are on the way.', 'Expected component to have the proper text.');
+        .withContext('Expected component to have the proper text.')
+        .toBe('Burritos are on the way.');
     });
 
     it('should inject the snack bar reference into the component', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);
 
       expect(snackBarRef.instance.snackBarRef)
-        .toBe(snackBarRef, 'Expected component to have an injected snack bar reference.');
+        .withContext('Expected component to have an injected snack bar reference.')
+        .toBe(snackBarRef);
     });
 
     it('should be able to inject arbitrary user data', () => {
@@ -634,9 +654,12 @@ describe('MatSnackBar', () => {
         }
       });
 
-      expect(snackBarRef.instance.data).toBeTruthy('Expected component to have a data object.');
+      expect(snackBarRef.instance.data)
+        .withContext('Expected component to have a data object.')
+        .toBeTruthy();
       expect(snackBarRef.instance.data.burritoType)
-        .toBe('Chimichanga', 'Expected the injected data object to be the one the user provided.');
+        .withContext('Expected the injected data object to be the one the user provided.')
+        .toBe('Chimichanga');
     });
 
     it('should allow manually dismissing with an action', fakeAsync(() => {
@@ -736,14 +759,15 @@ describe('MatSnackBar with parent MatSnackBar', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a snackBar to be opened');
+      .withContext('Expected a snackBar to be opened').toContain('Pizza');
 
     childSnackBar.open('Taco');
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected parent snackbar msg to be dismissed by opening from child');
+      .withContext('Expected parent snackbar msg to be dismissed by opening from child')
+      .toContain('Taco');
   }));
 
   it('should close snackBars opened by child when opening from parent', fakeAsync(() => {
@@ -752,14 +776,15 @@ describe('MatSnackBar with parent MatSnackBar', () => {
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a snackBar to be opened');
+      .withContext('Expected a snackBar to be opened').toContain('Pizza');
 
     parentSnackBar.open('Taco');
     fixture.detectChanges();
     tick(1000);
 
     expect(overlayContainerElement.textContent)
-        .toContain('Taco', 'Expected child snackbar msg to be dismissed by opening from parent');
+      .withContext('Expected child snackbar msg to be dismissed by opening from parent')
+      .toContain('Taco');
   }));
 
   it('should not dismiss parent snack bar if child is destroyed', fakeAsync(() => {
@@ -822,10 +847,14 @@ describe('MatSnackBar Positioning', () => {
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy();
 
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should be in the bottom left corner', fakeAsync(() => {
@@ -842,10 +871,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy();
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
    }));
 
    it('should be in the bottom right corner', fakeAsync(() => {
@@ -862,10 +895,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy();
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
    }));
 
    it('should be in the bottom center', fakeAsync(() => {
@@ -882,10 +919,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy();
-    expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"');
-    expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be ""').toBe('');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
    }));
 
    it('should be in the top left corner', fakeAsync(() => {
@@ -902,10 +943,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
    }));
 
    it('should be in the top right corner', fakeAsync(() => {
@@ -922,10 +967,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
    }));
 
    it('should be in the top center', fakeAsync(() => {
@@ -942,10 +991,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
    }));
 
    it('should handle start based on direction (rtl)', fakeAsync(() => {
@@ -963,10 +1016,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
   it('should handle start based on direction (ltr)', fakeAsync(() => {
@@ -984,10 +1041,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should handle end based on direction (rtl)', fakeAsync(() => {
@@ -1005,10 +1066,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""');
-    expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left  to be "0px"');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be ""').toBe('');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be "0px"').toBe('0px');
   }));
 
   it('should handle end based on direction (ltr)', fakeAsync(() => {
@@ -1026,10 +1091,14 @@ describe('MatSnackBar Positioning', () => {
 
     expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy();
     expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy();
-    expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""');
-    expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"');
-    expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"');
-    expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left  to be ""');
+    expect(overlayPaneEl.style.marginBottom)
+      .withContext('Expected margin-bottom to be ""').toBe('');
+    expect(overlayPaneEl.style.marginTop)
+      .withContext('Expected margin-top to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginRight)
+      .withContext('Expected margin-right to be "0px"').toBe('0px');
+    expect(overlayPaneEl.style.marginLeft)
+      .withContext('Expected margin-left  to be ""').toBe('');
   }));
 
 });
diff --git a/src/material/snack-bar/testing/shared.spec.ts b/src/material/snack-bar/testing/shared.spec.ts
index 626a951e6926..554f31b5a156 100644
--- a/src/material/snack-bar/testing/shared.spec.ts
+++ b/src/material/snack-bar/testing/shared.spec.ts
@@ -145,12 +145,12 @@ export function runHarnessTests(
     snackBarRef.onAction().subscribe(() => actionCount++);
 
     expect(await snackBar.isDismissed())
-        .toBe(false, 'The snackbar should be present in the DOM before dismiss');
+      .withContext('The snackbar should be present in the DOM before dismiss').toBe(false);
 
     await snackBar.dismissWithAction();
     expect(actionCount).toBe(1);
     expect(await snackBar.isDismissed())
-        .toBe(true, 'The snackbar should be absent from the DOM after dismiss');
+      .withContext('The snackbar should be absent from the DOM after dismiss').toBe(true);
 
     fixture.componentInstance.openSimple('No action');
     snackBar = await loader.getHarness(snackBarHarness);
diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts
index 69e3ca2f1ca3..b7e79c36fc75 100644
--- a/src/material/stepper/stepper.spec.ts
+++ b/src/material/stepper/stepper.spec.ts
@@ -198,7 +198,8 @@ describe('MatStepper', () => {
 
     it('should set the next stepper button type to "submit"', () => {
       const button = fixture.debugElement.query(By.directive(MatStepperNext))!.nativeElement;
-      expect(button.type).toBe('submit', `Expected the button to have "submit" set as type.`);
+      expect(button.type)
+        .withContext(`Expected the button to have "submit" set as type.`).toBe('submit');
     });
 
     it('should go to previous available step when the previous button is clicked', () => {
@@ -232,7 +233,8 @@ describe('MatStepper', () => {
 
     it('should set the previous stepper button type to "button"', () => {
       const button = fixture.debugElement.query(By.directive(MatStepperPrevious))!.nativeElement;
-      expect(button.type).toBe('button', `Expected the button to have "button" set as type.`);
+      expect(button.type)
+        .withContext(`Expected the button to have "button" set as type.`).toBe('button');
     });
 
     it('should set the correct step position for animation', () => {
@@ -674,7 +676,7 @@ describe('MatStepper', () => {
       fixture.detectChanges();
 
       expect(stepperComponent.selectedIndex)
-          .toBe(3, 'Expected selectedIndex to change when optional step input is empty.');
+        .withContext('Expected selectedIndex to change when optional step input is empty.').toBe(3);
 
       stepperComponent.selectedIndex = 2;
       testComponent.threeGroup.get('threeCtrl')!.setValue('input');
@@ -683,7 +685,8 @@ describe('MatStepper', () => {
 
       expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(false);
       expect(stepperComponent.selectedIndex)
-          .toBe(3, 'Expected selectedIndex to change when optional step input is invalid.');
+        .withContext('Expected selectedIndex to change when optional step input is invalid.')
+        .toBe(3);
     });
 
     it('should be able to reset the stepper to its initial state', () => {
@@ -759,14 +762,16 @@ describe('MatStepper', () => {
       fillOutStepper();
 
       expect(steps[2].completed)
-          .toBe(true, 'Expected third step to be considered complete after the first run through.');
+        .withContext('Expected third step to be considered complete after the first run through.')
+        .toBe(true);
 
       stepperComponent.reset();
       fixture.detectChanges();
       fillOutStepper();
 
-      expect(steps[2].completed).toBe(true,
-          'Expected third step to be considered complete when doing a run after a reset.');
+      expect(steps[2].completed)
+        .withContext('Expected third step to be considered complete when doing a run after ' +
+                     'a reset.').toBe(true);
     });
 
     it('should be able to skip past the current step if a custom `completed` value is set', () => {
@@ -1476,28 +1481,32 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
   fixture.detectChanges();
 
   expect(stepperComponent._getFocusIndex())
-      .toBe(1, 'Expected index of focused step to increase by 1 after pressing the next key.');
+    .withContext('Expected index of focused step to increase by 1 after pressing the next key.')
+    .toBe(1);
   expect(stepperComponent.selectedIndex)
-      .toBe(0, 'Expected index of selected step to remain unchanged after pressing the next key.');
+    .withContext('Expected index of selected step to remain unchanged after pressing the next key.')
+    .toBe(0);
 
   stepHeaderEl = stepHeaders[1].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', ENTER);
   fixture.detectChanges();
 
   expect(stepperComponent._getFocusIndex())
-      .toBe(1, 'Expected index of focused step to remain unchanged after ENTER event.');
+    .withContext('Expected index of focused step to remain unchanged after ENTER event.').toBe(1);
   expect(stepperComponent.selectedIndex)
-      .toBe(1,
-          'Expected index of selected step to change to index of focused step after ENTER event.');
+    .withContext('Expected index of selected step to change to index of focused step ' +
+                 'after ENTER event.').toBe(1);
 
   stepHeaderEl = stepHeaders[1].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', prevKey);
   fixture.detectChanges();
 
   expect(stepperComponent._getFocusIndex())
-      .toBe(0, 'Expected index of focused step to decrease by 1 after pressing the previous key.');
-  expect(stepperComponent.selectedIndex).toBe(1,
-      'Expected index of selected step to remain unchanged after pressing the previous key.');
+    .withContext('Expected index of focused step to decrease by 1 after pressing the ' +
+                 'previous key.').toBe(0);
+  expect(stepperComponent.selectedIndex)
+    .withContext('Expected index of selected step to remain unchanged after pressing the ' +
+                 'previous key.').toBe(1);
 
   // When the focus is on the last step and right arrow key is pressed, the focus should cycle
   // through to the first step.
@@ -1506,30 +1515,35 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', nextKey);
   fixture.detectChanges();
 
-  expect(stepperComponent._getFocusIndex()).toBe(0,
-      'Expected index of focused step to cycle through to index 0 after pressing the next key.');
+  expect(stepperComponent._getFocusIndex())
+    .withContext('Expected index of focused step to cycle through to index 0 after pressing ' +
+                 'the next key.').toBe(0);
   expect(stepperComponent.selectedIndex)
-      .toBe(1, 'Expected index of selected step to remain unchanged after pressing the next key.');
+    .withContext('Expected index of selected step to remain unchanged after pressing ' +
+                 'the next key.').toBe(1);
 
   stepHeaderEl = stepHeaders[0].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', SPACE);
   fixture.detectChanges();
 
   expect(stepperComponent._getFocusIndex())
-      .toBe(0, 'Expected index of focused to remain unchanged after SPACE event.');
+    .withContext('Expected index of focused to remain unchanged after SPACE event.').toBe(0);
   expect(stepperComponent.selectedIndex)
-      .toBe(0,
-          'Expected index of selected step to change to index of focused step after SPACE event.');
+    .withContext('Expected index of selected step to change to index of focused step ' +
+                 'after SPACE event.').toBe(0);
 
   const endEvent = dispatchKeyboardEvent(stepHeaderEl, 'keydown', END);
   expect(stepperComponent._getFocusIndex())
-      .toBe(stepHeaders.length - 1, 'Expected last step to be focused when pressing END.');
-  expect(endEvent.defaultPrevented).toBe(true, 'Expected default END action to be prevented.');
+    .withContext('Expected last step to be focused when pressing END.')
+    .toBe(stepHeaders.length - 1);
+  expect(endEvent.defaultPrevented)
+    .withContext('Expected default END action to be prevented.').toBe(true);
 
   const homeEvent = dispatchKeyboardEvent(stepHeaderEl, 'keydown', HOME);
   expect(stepperComponent._getFocusIndex())
-      .toBe(0, 'Expected first step to be focused when pressing HOME.');
-  expect(homeEvent.defaultPrevented).toBe(true, 'Expected default HOME action to be prevented.');
+    .withContext('Expected first step to be focused when pressing HOME.').toBe(0);
+  expect(homeEvent.defaultPrevented)
+    .withContext('Expected default HOME action to be prevented.').toBe(true);
 }
 
 /** Asserts that arrow key direction works correctly in RTL mode. */
@@ -1568,9 +1582,11 @@ function assertSelectKeyWithModifierInteraction(fixture: ComponentFixture<any>,
   fixture.detectChanges();
 
   expect(stepperComponent._getFocusIndex())
-      .toBe(1, 'Expected index of focused step to increase by 1 after pressing the next key.');
+    .withContext('Expected index of focused step to increase by 1 after pressing ' +
+                 'the next key.').toBe(1);
   expect(stepperComponent.selectedIndex)
-      .toBe(0, 'Expected index of selected step to remain unchanged after pressing the next key.');
+    .withContext('Expected index of selected step to remain unchanged after pressing ' +
+                 'the next key.').toBe(0);
 
   modifiers.forEach(modifier => {
     const event = createKeyboardEvent('keydown', selectionKey);
@@ -1578,8 +1594,9 @@ function assertSelectKeyWithModifierInteraction(fixture: ComponentFixture<any>,
     dispatchEvent(stepHeaders[1].nativeElement, event);
     fixture.detectChanges();
 
-    expect(stepperComponent.selectedIndex).toBe(0, `Expected selected index to remain unchanged ` +
-        `when pressing the selection key with ${modifier} modifier.`);
+    expect(stepperComponent.selectedIndex)
+      .withContext(`Expected selected index to remain unchanged ` +
+    `when pressing the selection key with ${modifier} modifier.`).toBe(0);
     expect(event.defaultPrevented).toBe(false);
   });
 }
diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
index c6bc55095637..7ae246fa39cf 100644
--- a/src/material/tabs/tab-group.spec.ts
+++ b/src/material/tabs/tab-group.spec.ts
@@ -188,13 +188,13 @@ describe('MatTabGroup', () => {
       const tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially.');
+        .withContext('Expected no ripples to show up initially.').toBe(0);
 
       dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
       dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up on label mousedown.');
+        .withContext('Expected one ripple to show up on label mousedown.').toBe(1);
     });
 
     it('should allow disabling ripples for tab-group labels', () => {
@@ -205,13 +205,13 @@ describe('MatTabGroup', () => {
       const tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripples to show up initially.');
+        .withContext('Expected no ripples to show up initially.').toBe(0);
 
       dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
       dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripple to show up on label mousedown.');
+        .withContext('Expected no ripple to show up on label mousedown.').toBe(0);
     });
 
     it('should set the isActive flag on each of the tabs', fakeAsync(() => {
diff --git a/src/material/tabs/tab-header.spec.ts b/src/material/tabs/tab-header.spec.ts
index 7c96f6a900e9..0f5ee66e4b6f 100644
--- a/src/material/tabs/tab-header.spec.ts
+++ b/src/material/tabs/tab-header.spec.ts
@@ -289,13 +289,13 @@ describe('MatTabHeader', () => {
         const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after'))!;
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up initially.');
+          .withContext('Expected no ripple to show up initially.').toBe(0);
 
         dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
         dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected one ripple to show up after mousedown');
+          .withContext('Expected one ripple to show up after mousedown').toBe(1);
       });
 
       it('should allow disabling ripples for pagination buttons', () => {
@@ -308,13 +308,13 @@ describe('MatTabHeader', () => {
         const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after'))!;
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up initially.');
+          .withContext('Expected no ripple to show up initially.').toBe(0);
 
         dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
         dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
 
         expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple to show up after mousedown');
+          .withContext('Expected no ripple to show up after mousedown').toBe(0);
       });
 
     });
@@ -388,7 +388,8 @@ describe('MatTabHeader', () => {
         }));
 
       it('should not scroll if the sequence is interrupted quickly', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, 'mousedown');
         fixture.detectChanges();
@@ -400,7 +401,8 @@ describe('MatTabHeader', () => {
 
         tick(3000);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to have scrolled after a while.').toBe(0);
       }));
 
       it('should clear the timeouts on destroy', fakeAsync(() => {
@@ -455,17 +457,20 @@ describe('MatTabHeader', () => {
       }));
 
       it('should stop scrolling if the pointer leaves the header', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, 'mousedown');
         fixture.detectChanges();
         tick(300);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to scroll after short amount of time.').toBe(0);
 
         tick(1000);
 
-        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+        expect(header.scrollDistance)
+          .withContext('Expected to scroll after some time.').toBeGreaterThan(0);
 
         const previousDistance = header.scrollDistance;
 
@@ -477,13 +482,15 @@ describe('MatTabHeader', () => {
       }));
 
       it('should not scroll when pressing the right mouse button', fakeAsync(() => {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchEvent(nextButton, createMouseEvent('mousedown', undefined, undefined, 2));
         fixture.detectChanges();
         tick(3000);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to have scrolled after a while.').toBe(0);
       }));
 
       /**
@@ -492,24 +499,28 @@ describe('MatTabHeader', () => {
        * @param endEventName Name of the event that is supposed to end the scrolling.
        */
       function assertNextButtonScrolling(startEventName: string, endEventName: string) {
-        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+        expect(header.scrollDistance)
+          .withContext('Expected to start off not scrolled.').toBe(0);
 
         dispatchFakeEvent(nextButton, startEventName);
         fixture.detectChanges();
         tick(300);
 
-        expect(header.scrollDistance).toBe(0, 'Expected not to scroll after short amount of time.');
+        expect(header.scrollDistance)
+          .withContext('Expected not to scroll after short amount of time.').toBe(0);
 
         tick(1000);
 
-        expect(header.scrollDistance).toBeGreaterThan(0, 'Expected to scroll after some time.');
+        expect(header.scrollDistance)
+          .withContext('Expected to scroll after some time.').toBeGreaterThan(0);
 
         const previousDistance = header.scrollDistance;
 
         tick(100);
 
         expect(header.scrollDistance)
-            .toBeGreaterThan(previousDistance, 'Expected to scroll again after some more time.');
+          .withContext('Expected to scroll again after some more time.')
+          .toBeGreaterThan(previousDistance);
 
         dispatchFakeEvent(nextButton, endEventName);
       }
@@ -525,26 +536,28 @@ describe('MatTabHeader', () => {
 
         let currentScroll = header.scrollDistance;
 
-        expect(currentScroll).toBeGreaterThan(0, 'Expected to start off scrolled.');
+        expect(currentScroll)
+          .withContext('Expected to start off scrolled.').toBeGreaterThan(0);
 
         dispatchFakeEvent(prevButton, startEventName);
         fixture.detectChanges();
         tick(300);
 
         expect(header.scrollDistance)
-            .toBe(currentScroll, 'Expected not to scroll after short amount of time.');
+          .withContext('Expected not to scroll after short amount of time.').toBe(currentScroll);
 
         tick(1000);
 
         expect(header.scrollDistance)
-            .toBeLessThan(currentScroll, 'Expected to scroll after some time.');
+          .withContext('Expected to scroll after some time.').toBeLessThan(currentScroll);
 
         currentScroll = header.scrollDistance;
 
         tick(100);
 
         expect(header.scrollDistance)
-            .toBeLessThan(currentScroll, 'Expected to scroll again after some more time.');
+          .withContext('Expected to scroll again after some more time.')
+          .toBeLessThan(currentScroll);
 
         dispatchFakeEvent(nextButton, endEventName);
       }
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index ed872bb90913..3809218cf5ae 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -93,13 +93,14 @@ describe('MatTabNavBar', () => {
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
       expect(tabLinkElements.every(tabLinkEl => !tabLinkEl.classList.contains('mat-tab-disabled')))
-        .toBe(true, 'Expected every tab link to not have the disabled class initially');
+        .withContext('Expected every tab link to not have the disabled class initially').toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLinkEl => tabLinkEl.classList.contains('mat-tab-disabled')))
-        .toBe(true, 'Expected every tab link to have the disabled class if set through binding');
+        .withContext('Expected every tab link to have the disabled class if set through binding')
+        .toBe(true);
     });
 
     it('should update aria-disabled if disabled', () => {
@@ -107,13 +108,13 @@ describe('MatTabNavBar', () => {
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
       expect(tabLinkElements.every(tabLink => tabLink.getAttribute('aria-disabled') === 'false'))
-        .toBe(true, 'Expected aria-disabled to be set to "false" by default.');
+        .withContext('Expected aria-disabled to be set to "false" by default.').toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLink => tabLink.getAttribute('aria-disabled') === 'true'))
-        .toBe(true, 'Expected aria-disabled to be set to "true" if link is disabled.');
+        .withContext('Expected aria-disabled to be set to "true" if link is disabled.').toBe(true);
     });
 
     it('should update the tabindex if links are disabled', () => {
@@ -121,13 +122,13 @@ describe('MatTabNavBar', () => {
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
       expect(tabLinkElements.every(tabLink => tabLink.tabIndex === 0))
-        .toBe(true, 'Expected element to be keyboard focusable by default');
+        .withContext('Expected element to be keyboard focusable by default').toBe(true);
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
       expect(tabLinkElements.every(tabLink => tabLink.tabIndex === -1))
-        .toBe(true, 'Expected element to no longer be keyboard focusable if disabled.');
+        .withContext('Expected element to no longer be keyboard focusable if disabled.').toBe(true);
     });
 
     it('should mark disabled links', () => {
@@ -232,7 +233,7 @@ describe('MatTabNavBar', () => {
     dispatchMouseEvent(link, 'mousedown');
 
     expect(link.querySelector('.mat-ripple-element'))
-      .toBeFalsy('Expected no ripple to be created when ripple target is destroyed.');
+      .withContext('Expected no ripple to be created when ripple target is destroyed.').toBeFalsy();
   });
 
   it('should support the native tabindex attribute', () => {
@@ -243,7 +244,7 @@ describe('MatTabNavBar', () => {
         .injector.get<MatTabLink>(MatTabLink);
 
     expect(tabLink.tabIndex)
-      .toBe(5, 'Expected the tabIndex to be set from the native tabindex attribute.');
+      .withContext('Expected the tabIndex to be set from the native tabindex attribute.').toBe(5);
   });
 
   it('should support binding to the tabIndex', () => {
@@ -253,12 +254,14 @@ describe('MatTabNavBar', () => {
     const tabLink = fixture.debugElement.query(By.directive(MatTabLink))!
         .injector.get<MatTabLink>(MatTabLink);
 
-    expect(tabLink.tabIndex).toBe(0, 'Expected the tabIndex to be set to 0 by default.');
+    expect(tabLink.tabIndex)
+      .withContext('Expected the tabIndex to be set to 0 by default.').toBe(0);
 
     fixture.componentInstance.tabIndex = 3;
     fixture.detectChanges();
 
-    expect(tabLink.tabIndex).toBe(3, 'Expected the tabIndex to be have been set to 3.');
+    expect(tabLink.tabIndex)
+      .withContext('Expected the tabIndex to be have been set to 3.').toBe(3);
   });
 
   it('should select the proper tab, if the tabs come in after init', () => {
@@ -287,25 +290,27 @@ describe('MatTabNavBar', () => {
 
     it('should be disabled on all tab links when they are disabled on the nav bar', () => {
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => !tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples enabled');
+        .withContext('Expected every tab link to have ripples enabled').toBe(true);
 
       fixture.componentInstance.disableRippleOnBar = true;
       fixture.detectChanges();
 
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples disabled');
+        .withContext('Expected every tab link to have ripples disabled').toBe(true);
     });
 
     it('should have the `disableRipple` from the tab take precedence over the nav bar', () => {
       const firstTab = fixture.componentInstance.tabLinks.first;
 
-      expect(firstTab.rippleDisabled).toBe(false, 'Expected ripples to be enabled on first tab');
+      expect(firstTab.rippleDisabled)
+        .withContext('Expected ripples to be enabled on first tab').toBe(false);
 
       firstTab.disableRipple = true;
       fixture.componentInstance.disableRippleOnBar = false;
       fixture.detectChanges();
 
-      expect(firstTab.rippleDisabled).toBe(true, 'Expected ripples to be disabled on first tab');
+      expect(firstTab.rippleDisabled)
+        .withContext('Expected ripples to be disabled on first tab').toBe(true);
     });
 
     it('should show up for tab link elements on mousedown', () => {
@@ -315,7 +320,7 @@ describe('MatTabNavBar', () => {
       dispatchMouseEvent(tabLink, 'mouseup');
 
       expect(tabLink.querySelectorAll('.mat-ripple-element').length)
-        .toBe(1, 'Expected one ripple to show up if user clicks on tab link.');
+        .withContext('Expected one ripple to show up if user clicks on tab link.').toBe(1);
     });
 
     it('should be able to disable ripples on an individual tab link', () => {
@@ -329,17 +334,17 @@ describe('MatTabNavBar', () => {
       dispatchMouseEvent(tabLinkElement, 'mouseup');
 
       expect(tabLinkElement.querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected no ripple to show up if ripples are disabled.');
+        .withContext('Expected no ripple to show up if ripples are disabled.').toBe(0);
     });
 
     it('should be able to disable ripples through global options at runtime', () => {
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => !tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples enabled');
+        .withContext('Expected every tab link to have ripples enabled').toBe(true);
 
       globalRippleOptions.disabled = true;
 
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
-        .toBe(true, 'Expected every tab link to have ripples disabled');
+        .withContext('Expected every tab link to have ripples disabled').toBe(true);
     });
 
     it('should have a focus indicator', () => {
diff --git a/src/material/toolbar/toolbar.spec.ts b/src/material/toolbar/toolbar.spec.ts
index d23439eb8cac..14fc38806835 100644
--- a/src/material/toolbar/toolbar.spec.ts
+++ b/src/material/toolbar/toolbar.spec.ts
@@ -51,8 +51,9 @@ describe('MatToolbar', () => {
     });
 
     it('should not wrap the first row contents inside of a generated element', () => {
-      expect(toolbarElement.firstElementChild!.tagName).toBe('SPAN',
-          'Expected the <span> element of the first row to be a direct child of the toolbar');
+      expect(toolbarElement.firstElementChild!.tagName)
+        .withContext('Expected the <span> element of the first row to be a direct child ' +
+                     'of the toolbar').toBe('SPAN');
     });
   });
 
@@ -63,7 +64,8 @@ describe('MatToolbar', () => {
       fixture.detectChanges();
 
       expect(fixture.debugElement.queryAll(By.css('.mat-toolbar > .mat-toolbar-row')).length)
-        .toBe(2, 'Expected one toolbar row to be present while no content is projected.');
+        .withContext('Expected one toolbar row to be present while no content is projected.')
+        .toBe(2);
     });
 
     it('should throw an error if different toolbar modes are mixed', () => {
diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
index 3fdeebf4f8a3..e5988789b9c8 100644
--- a/src/material/tooltip/tooltip.spec.ts
+++ b/src/material/tooltip/tooltip.spec.ts
@@ -243,8 +243,9 @@ describe('MatTooltip', () => {
       const overlayRef = tooltipDirective._overlayRef;
 
       expect(!!overlayRef).toBeTruthy();
-      expect(overlayRef!.overlayElement.classList).toContain('mat-tooltip-panel',
-          'Expected the overlay panel element to have the tooltip panel class set.');
+      expect(overlayRef!.overlayElement.classList)
+        .withContext('Expected the overlay panel element to have the tooltip panel class set.')
+        .toContain('mat-tooltip-panel');
     }));
 
     it('should not show if disabled', fakeAsync(() => {
@@ -429,10 +430,12 @@ describe('MatTooltip', () => {
 
       // Make sure classes aren't prematurely added
       let tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
-      expect(tooltipElement.classList).not.toContain('custom-one',
-        'Expected to not have the class before enabling matTooltipClass');
-      expect(tooltipElement.classList).not.toContain('custom-two',
-        'Expected to not have the class before enabling matTooltipClass');
+      expect(tooltipElement.classList).not
+        .withContext('Expected to not have the class before enabling matTooltipClass')
+        .toContain('custom-one');
+      expect(tooltipElement.classList).not
+        .withContext('Expected to not have the class before enabling matTooltipClass')
+        .toContain('custom-two');
 
       // Enable the classes via ngClass syntax
       fixture.componentInstance.showTooltipClass = true;
@@ -440,10 +443,12 @@ describe('MatTooltip', () => {
 
       // Make sure classes are correctly added
       tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
-      expect(tooltipElement.classList).toContain('custom-one',
-        'Expected to have the class after enabling matTooltipClass');
-      expect(tooltipElement.classList).toContain('custom-two',
-        'Expected to have the class after enabling matTooltipClass');
+      expect(tooltipElement.classList)
+        .withContext('Expected to have the class after enabling matTooltipClass')
+        .toContain('custom-one');
+      expect(tooltipElement.classList)
+        .withContext('Expected to have the class after enabling matTooltipClass')
+        .toContain('custom-two');
     }));
 
     it('should be removed after parent destroyed', fakeAsync(() => {
@@ -584,8 +589,9 @@ describe('MatTooltip', () => {
       const tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
 
-      expect(tooltipWrapper).toBeTruthy('Expected tooltip to be shown.');
-      expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.');
+      expect(tooltipWrapper).withContext('Expected tooltip to be shown.').toBeTruthy();
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in RTL mode.').toBe('rtl');
     }));
 
     it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => {
@@ -597,7 +603,8 @@ describe('MatTooltip', () => {
 
       let tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
-      expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL.');
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in RTL.').toBe('rtl');
 
       tooltipDirective.hide(0);
       tick(0);
@@ -612,7 +619,8 @@ describe('MatTooltip', () => {
 
       tooltipWrapper =
           overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
-      expect(tooltipWrapper.getAttribute('dir')).toBe('ltr', 'Expected tooltip to be in LTR.');
+      expect(tooltipWrapper.getAttribute('dir'))
+        .withContext('Expected tooltip to be in LTR.').toBe('ltr');
     }));
 
     it('should be able to set the tooltip message as a number', fakeAsync(() => {
@@ -933,22 +941,25 @@ describe('MatTooltip', () => {
       fixture.detectChanges();
       tick(0);
 
+      // Expect that the tooltip is displayed
       // Expect that the tooltip is displayed
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(true, 'Expected tooltip to be initially visible');
+        .withContext('Expected tooltip to be initially visible').toBe(true);
 
       // Scroll the page but tick just before the default throttle should update.
       fixture.componentInstance.scrollDown();
       tick(SCROLL_THROTTLE_MS - 1);
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(true, 'Expected tooltip to be visible when scrolling, before throttle limit');
+        .withContext('Expected tooltip to be visible when scrolling, before throttle limit')
+        .toBe(true);
 
       // Finish ticking to the throttle's limit and check that the scroll event notified the
       // tooltip and it was hidden.
       tick(100);
       fixture.detectChanges();
       expect(tooltipDirective._isTooltipVisible())
-          .toBe(false, 'Expected tooltip hidden when scrolled out of view, after throttle limit');
+        .withContext('Expected tooltip hidden when scrolled out of view, after throttle limit')
+        .toBe(false);
     }));
 
     it('should execute the `hide` call, after scrolling away, inside the NgZone', fakeAsync(() => {
diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts
index 2ef981ba41e0..b75a7ecc75c6 100644
--- a/src/material/tree/tree.spec.ts
+++ b/src/material/tree/tree.spec.ts
@@ -52,7 +52,7 @@ describe('MatTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
@@ -131,7 +131,7 @@ describe('MatTree', () => {
         expect(underlyingDataSource.data.length).toBe(3);
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect no expanded node`);
+          .withContext(`Expect no expanded node`).toBe(0);
 
         component.toggleRecursively = false;
         const data = underlyingDataSource.data;
@@ -149,7 +149,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(1, `Expect node expanded one level`);
+          .withContext(`Expect node expanded one level`).toBe(1);
         expectFlatTreeToMatch(treeElement, 40,
             [`topping_1 - cheese_1 + base_1`],
             [`topping_2 - cheese_2 + base_2`],
@@ -160,7 +160,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(2, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(2);
         expectFlatTreeToMatch(treeElement, 40,
             [`topping_1 - cheese_1 + base_1`],
             [`topping_2 - cheese_2 + base_2`],
@@ -181,7 +181,7 @@ describe('MatTree', () => {
         expect(underlyingDataSource.data.length).toBe(3);
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect no expanded node`);
+          .withContext(`Expect no expanded node`).toBe(0);
 
         const data = underlyingDataSource.data;
         const child = underlyingDataSource.addChild(data[2]);
@@ -197,7 +197,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(3, `Expect nodes expanded`);
+          .withContext(`Expect nodes expanded`).toBe(3);
         expectFlatTreeToMatch(treeElement, 40,
             [`topping_1 - cheese_1 + base_1`],
             [`topping_2 - cheese_2 + base_2`],
@@ -210,7 +210,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
 
         expectFlatTreeToMatch(treeElement, 40,
           [`topping_1 - cheese_1 + base_1`],
@@ -259,7 +259,7 @@ describe('MatTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
     });
@@ -280,7 +280,7 @@ describe('MatTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
     });
@@ -304,7 +304,7 @@ describe('MatTree', () => {
       it('with rendered dataNodes', () => {
         const nodes = getNodes(treeElement);
 
-        expect(nodes).toBeDefined('Expect nodes to be defined');
+        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
         expect(nodes[0].classList).toContain('customNodeClass');
       });
 
@@ -458,7 +458,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(1, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(1);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
@@ -473,7 +473,7 @@ describe('MatTree', () => {
           [`topping_2 - cheese_2 + base_2`],
           [`topping_3 - cheese_3 + base_3`]);
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
       });
 
       it('should expand/collapse the node recursively', () => {
@@ -491,7 +491,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(3, `Expect node expanded`);
+          .withContext(`Expect node expanded`).toBe(3);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],
@@ -503,7 +503,7 @@ describe('MatTree', () => {
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
-          .toBe(0, `Expect node collapsed`);
+          .withContext(`Expect node collapsed`).toBe(0);
         expectNestedTreeToMatch(treeElement,
           [`topping_1 - cheese_1 + base_1`],
           [`topping_2 - cheese_2 + base_2`],