Merge pull request #103 from martpie/test-react-components

Add integration test for a TypeScript react component

src/__tests__/__apps__/_shared-ts/components/Subtitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {
+  underlined: boolean;
+};
+
+export const Subtitle: React.FC<Props> = (props) => {
+  return <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
+};

src/__tests__/__apps__/npm-basic/pages/test-local-typescript-module.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { add } from 'shared-ts/utils/calc';
+import { Subtitle } from 'shared-ts/components/Subtitle';
 
 const HomePage: React.FC = () => {
-  return <h1>The answer is {add(40, 3)}</h1>;
+  return (
+    <>
+      <h1>The answer is {add(40, 3)}</h1>
+      <Subtitle underlined>And this is a subtitle</Subtitle>
+    </>
+  );
 };
 
 export default HomePage;

src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {
+  underlined: boolean;
+};
+
+export const Subtitle: React.FC<Props> = (props) => {
+  return <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
+};

src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { add } from 'shared-ts/utils/calc';
+import { Subtitle } from 'shared-ts/components/Subtitle';
 
 const HomePage: React.FC = () => {
-  return <h1>The answer is {add(40, 3)}</h1>;
+  return (
+    <div>
+      <h1>The answer is {add(40, 3)}</h1>
+      <Subtitle underlined>And this is a subtitle</Subtitle>
+    </div>
+  );
 };
 
 export default HomePage;

src/__tests__/integrations.test.js

@@ -40,7 +40,7 @@ describe.each([
   });
 
   describe('local-typescript-module transpilation', () => {
-    test('pages using transpiled modules should be correctly displayed', async () => {
+    test('pages using transpiled modules (helpers or React components) should be correctly displayed', async () => {
       const page = await browser.newPage();
       const response = await page.goto(`${BASE_URL}/test-local-typescript-module`);
 
@@ -50,6 +50,9 @@ describe.each([
 
       const content = await page.$eval('h1', (e) => e.textContent);
       expect(content).toBe('The answer is 43');
+
+      const content2 = await page.$eval('h2', (e) => e.textContent);
+      expect(content2).toBe('And this is a subtitle');
     });
   });