Example of how types allow incorrect usage

test/trans.render.object.spec.js

@@ -242,3 +242,32 @@ describe('trans using no children but components (object) - interpolated compone
     `);
   });
 });
+
+describe('trans using no children but components (object) - ReactNodes that error', () => {
+  const Button = ({ children }) => <button type="button">{children}</button>;
+  // Suppress console.errors in these tests
+  let consoleErrorFn;
+  beforeAll(() => {
+    consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+  });
+  afterAll(() => {
+    consoleErrorFn.restoreMocks();
+  });
+  it('should throw if you use some valid ReactNodes', () => {
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: Button }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: {} }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: null }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: true }} />),
+    ).toThrow();
+  });
+});

test/typescript/Trans.test.tsx

@@ -26,6 +26,29 @@ function objectComponents() {
   return <Trans components={{ Btn: <button /> }} defaults="Hello <Btn />" />;
 }
 
+function MyComponent(): React.ReactElement {
+  return <>world</>;
+}
+
+function objectCustomComponents() {
+  return <Trans components={{ Btn: <MyComponent /> }} defaults="Hello <Btn />" />;
+}
+
+function objectCustomComponentsShouldError() {
+  return (
+    <Trans
+      // Valid ReactNodes according to types
+      components={{
+        Btn: MyComponent,
+        Btn2: null,
+        Btn4: true,
+        Btn5: {},
+      }}
+      defaults="Hello <Btn /><Btn2 /><Btn3 /><Btn4 /><Btn5 />"
+    />
+  );
+}
+
 function constObjectComponents() {
   const constObject = {
     Btn: <button />,