fix(if): properly throw warnings in dev mode

src/If.tsx

@@ -1,7 +1,7 @@
 import React, { FC, Fragment, ReactElement } from 'react';
 import { Else } from './Else';
 import { getConditionResult } from './getConditionResults';
-import { invariant } from './invariant';
+import { tinyWarning } from './tinyWarning';
 import { Then } from './Then';
 import { ComponentWithConditionProps } from './types';
 
@@ -18,7 +18,7 @@ export const If: FC<ComponentWithConditionProps> = ({ condition, children }) =>
     return null;
   }
 
-  invariant(
+  tinyWarning(
     (!Array.isArray(children) && !((children as ReactElement).type === Else || (children as ReactElement).type === Then)) ||
       !(React.Children.toArray(children) as ReactElement[]).every(child => child.type === Else || child.type === Then),
     'The <If> component should contain <Then /> and <Else /> components as its children'

src/tinyWarning.ts

@@ -0,0 +1,27 @@
+/**
+ * Handles errors by throwing them to the console.
+ * `__DEV__` is replaced by tsdx using {@link https://www.npmjs.com/package/babel-plugin-dev-expression babel-plugin-dev-expressions}
+ * which will ensure this entire throw is not present in production
+ * @param condition The condition to check
+ * @param message The message to throw if `condition` resolves to `true`
+ */
+export function tinyWarning(condition: boolean, message: string): asserts condition {
+  if (__DEV__) {
+    if (condition) {
+      // check console for IE9 support which provides console
+      // only with open devtools
+
+      if (typeof console !== 'undefined') {
+        console.warn(message);
+      }
+
+      // Throwing an error and catching it immediately to improve debugging
+      // Users can utilize 'pause on caught exceptions' to get into this throw
+      try {
+        throw new Error(message);
+      } catch (x) {
+        // noop
+      }
+    }
+  }
+}

test/If.test.tsx

@@ -69,16 +69,6 @@ describe('<If /> component', () => {
         expect(wrapped.containsMatchingElement(<span>Else</span>)).toBe(false);
       });
 
-      test('GIVEN content w/o <Then /> nor <Else /> THEN errors in test & development', () => {
-        expect(() =>
-          shallow(
-            <If condition={true}>
-              <span>Not Then nor Else</span>
-            </If>
-          )
-        ).toThrowError('The <If> component should contain <Then /> and <Else /> components as its children');
-      });
-
       test('GIVEN w/o children THEN renders null', () => {
         const wrapped = shallow(<If condition={true} />);
 
@@ -243,15 +233,6 @@ describe('<If /> component', () => {
         expect(wrapped.containsMatchingElement(<span>Else</span>)).toBe(true);
         expect(wrapped.containsMatchingElement(<span>Then</span>)).toBe(false);
       });
-      test('GIVEN w/o <Then /> nor <Else /> THEN throws error', () => {
-        expect(() =>
-          shallow(
-            <If condition={false}>
-              <span>Content</span>
-            </If>
-          )
-        ).toThrowError('The <If> component should contain <Then /> and <Else /> components as its children');
-      });
 
       test('GIVEN w/o children THEN renders null', () => {
         const wrapped = shallow(<If condition={false} />);

test/jest.setup.ts

@@ -7,3 +7,14 @@ configure({ adapter: new Adapter() });
 
 // @ts-ignore => Type definitions are off
 expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));
+
+// Stub out console.warn so it doesn't log in tests
+const originalWarn = console.warn;
+
+beforeAll(() => {
+  console.warn = () => undefined;
+});
+
+afterAll(() => {
+  console.warn = originalWarn;
+});

test/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "rootDir": "."
   },
-  "include": ["."],
+  "include": [".", "../src/Augments.d.ts"],
   "references": [{ "path": "../src" }]
 }