feat(container, row, col): enforce react children

src/components/Col/Col.test.tsx

@@ -5,7 +5,7 @@ import { Col } from './Col';
 
 describe('Col', () => {
   it('should render with default styles', () => {
-    const { container } = render(<Col />);
+    const { container } = render(<Col>Col</Col>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -21,19 +21,19 @@ describe('Col', () => {
   ] as const;
 
   it.each(sizes)('should render with width styles for media %s', (size) => {
-    const { container } = render(<Col {...size} />);
+    const { container } = render(<Col {...size}>Col</Col>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it.each(sizes)('should render with offset styles', (size) => {
-    const { container } = render(<Col offset={size} />);
+    const { container } = render(<Col offset={size}>Col</Col>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it.each(sizes)('should render with offset styles for media %s', (size) => {
-    const { container } = render(<Col offset={size} />);
+    const { container } = render(<Col offset={size}>Col</Col>);
 
     expect(container.firstChild).toMatchSnapshot();
   });

src/components/Col/__snapshots__/Col.test.tsx.snap

@@ -52,7 +52,9 @@ exports[`Col should render with default styles 1`] = `
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Col
+</div>
 `;
 
 exports[`Col should render with offset styles 1`] = `
@@ -137,7 +139,9 @@ exports[`Col should render with offset styles 1`] = `
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Col
+</div>
 `;
 
 exports[`Col should render with offset styles for media [object Object] 1`] = `
@@ -222,7 +226,9 @@ exports[`Col should render with offset styles for media [object Object] 1`] = `
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Col
+</div>
 `;
 
 exports[`Col should render with width styles for media [object Object] 1`] = `
@@ -322,5 +328,7 @@ exports[`Col should render with width styles for media [object Object] 1`] = `
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Col
+</div>
 `;

src/components/Container/Container.test.tsx

@@ -7,13 +7,13 @@ import { Col } from '../Col';
 
 describe('Container', () => {
   it('should render with default styles', () => {
-    const { container } = render(<Container />);
+    const { container } = render(<Container>Container</Container>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should render with fluid styles when passed the fluid prop', () => {
-    const { container } = render(<Container fluid />);
+    const { container } = render(<Container fluid>Container fluid</Container>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -22,7 +22,7 @@ describe('Container', () => {
     const { container } = render(
       <Container debug>
         <Row>
-          <Col />
+          <Col>Col</Col>
         </Row>
       </Container>
     );

src/components/Container/__snapshots__/Container.test.tsx.snap

@@ -188,7 +188,9 @@ exports[`Container should render with debug styles when passed the debug prop 1`
   >
     <div
       class="grid-0 grid-1"
-    />
+    >
+      Col
+    </div>
   </div>
 </div>
 `;
@@ -271,7 +273,9 @@ exports[`Container should render with default styles 1`] = `
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Container
+</div>
 `;
 
 exports[`Container should render with fluid styles when passed the fluid prop 1`] = `
@@ -319,5 +323,7 @@ exports[`Container should render with fluid styles when passed the fluid prop 1`
 
 <div
   class="grid-0 grid-1"
-/>
+>
+  Container fluid
+</div>
 `;

src/components/Row/Row.test.tsx

@@ -24,21 +24,23 @@ describe('Row', () => {
   ] as const;
 
   it('should render with default styles', () => {
-    const { container } = render(<Row />);
+    const { container } = render(<Row>Row</Row>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should render with reverse styles when passed the reverse prop', () => {
-    const { container } = render(<Row reverse />);
+    const { container } = render(<Row reverse>Row reverse</Row>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it.each(breakpoints)(
     'should render reverse styles with breakpoint %s',
     (breakpoint) => {
-      const { container } = render(<Row reverse={[breakpoint]} />);
+      const { container } = render(
+        <Row reverse={[breakpoint]}>Row reverse {breakpoint}</Row>
+      );
 
       expect(container.firstChild).toMatchSnapshot();
     }
@@ -47,37 +49,43 @@ describe('Row', () => {
   it.each(align)(
     'should render align styles when passed the align %s prop as string',
     (propertie) => {
-      const { container } = render(<Row align={propertie} />);
+      const { container } = render(
+        <Row align={propertie}>Row align {propertie}</Row>
+      );
 
       expect(container.firstChild).toMatchSnapshot();
     }
   );
 
   it('should render align styles when passed the align prop as object', () => {
-    const { container } = render(<Row align={{ md: 'center' }} />);
+    const { container } = render(<Row align={{ md: 'center' }}>Row align</Row>);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it.each(justify)(
     'should render justify styles when when passed the justify %s prop as string',
     (propertie) => {
-      const { container } = render(<Row justify={propertie} />);
+      const { container } = render(
+        <Row justify={propertie}>Row justify {propertie}</Row>
+      );
 
       expect(container.firstChild).toMatchSnapshot();
     }
   );
 
   it('should render justify styles when passed the align prop as object', () => {
-    const { container } = render(<Row justify={{ md: 'center' }} />);
+    const { container } = render(
+      <Row justify={{ md: 'center' }}>Row justify</Row>
+    );
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should render with noGutters styles when passed the noGutters prop', () => {
     const { container } = render(
       <Row noGutters>
-        <Col />
+        <Col>Col</Col>
       </Row>
     );