support-functional-components

Author: k2snowman69

.github/workflows/publish.yml

@@ -43,5 +43,5 @@ jobs:
         run: npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
 
       - name: Publish
-        run: npx --no release-it -- --ci
+        run: npx --no release-it -- --ci --dry-run
         continue-on-error: true

.vscode/launch.json

@@ -12,19 +12,8 @@
       "program": "${workspaceRoot}/node_modules/jest/bin/jest",
       "request": "launch",
       "sourceMaps": true,
-      "type": "node"
-    },
-    {
-      "args": [],
-      "cwd": "${workspaceRoot}",
-      "name": "Debug app",
-      "outFiles": [],
-      "preLaunchTask": "npm: build",
-      "program": "${workspaceRoot}/bin/index",
-      "request": "launch",
-      "runtimeArgs": ["--nolazy"],
-      "sourceMaps": true,
-      "type": "node"
+      "type": "node",
+      "runtimeArgs": ["--experimental-vm-modules"]
     }
   ],
   "version": "0.2.0"

CHANGELOG.md

@@ -7,6 +7,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.0.0] - 2022-12-25
-
 - Initial release

README.md

@@ -4,21 +4,59 @@ Simple utiltiies to help with mocking React scenarios for testing.
 
 ## Usage
 
-### Mock dependent components
-
-You can check our comprehesive unit tests for more examples of testing scenarios
+The best option is to check out our [unit tests](./src/functional-component/index.test.tsx) to see different uses however here's a quick code snippet.
 
 ```typescript
+// Step 1: if using typescript, import the Props for the child component
+import type { ChildProps } from "./test-asset.child.js";
+
+// Step 2: Now mock the child component
+jest.unstable_mockModule("./test-asset.child.js", () => ({
+  Child: createMockFunctionComponent<ChildProps>("button"),
+}));
+
+// Step 3: Import the parent and child, mocking the child
+const { Parent, parentTestIdMap } = await import("./parent.js");
+const { Child } = jest.mocked(await import("./test-asset.child.js"));
+
+afterEach(() => {
+  Child.mockClear();
+});
+
+// Step 4: Write your test
+it("Mock child callback causes click count to increase", async () => {
+  // Act
+  const result = render(<Parent />);
+  await userEvent.click(result.getByRole("button"));
 
+  // Assert
+  const countElement = result.getByTestId("click-count");
+  expect(countElement.innerHTML).toBe("1");
+});
 ```
 
+### I get an error when using await import
+
+There's two halves to this problem:
+
+1. Dynamic imports (e.g. `import("...")`) were implemented in ES2020:
+   - Does your runtime environment support this? Node started [support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import#browser_compatibility) in 13.2.0
+   - If using typescript, is your `module` set to [ES2020](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#es2020-for-target-and-module) or later?
+1. Top level await statements were implemented in ES2022:
+   - Does your runtime environment support this? Node started [support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#browser_compatibility) in 14.8.0.
+   - If using typescript, is your `module` set to [ES2022](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#module-es2022) or later?
+
 ## Goals
 
 ### Why mock?
 
-Unfortunately there exist scenarios where you may not what to render a child component; for example when that child component is delay loaded, complex, unstable, server driven, or not owned by you directly and is already covered by integration or end to end testing scenarios.
+Unfortunately there exist scenarios where you may not want to render a child component; for example when that child component is delay loaded, complex, unstable, server driven, or not owned by you directly and is already covered by integration or end to end testing scenarios.
+
+A good example scenario is [Stripe's React Elements Component](https://www.npmjs.com/package/@stripe/react-stripe-js) and [Adyen's web components](https://www.npmjs.com/package/@adyen/adyen-web) both of which have the following implementation details which make it difficult to test cleanly:
 
-A good example scenario is [Stripe's React Elements Component](https://www.npmjs.com/package/@stripe/react-stripe-js) and [Adyen's web components](https://www.npmjs.com/package/@adyen/adyen-web) which has a significant amount of internal logic, server side driven logic, along with use of iframes for security purposes making it much more difficult to test cleanly.
+- a significant amount of internal logic
+- server side driven logic
+- the use of iframes limiting access to textfields (for credit card security purposes)
 
 To create a full integration test for this scenario would be extremely complex, costly, and constantly unpredictable as Stripe and Adyen can change the rendering of the components from their server side causing random instability of your tests.
 

jest.config.js

@@ -1,3 +1,6 @@
 import { jest } from "@snowcoders/renovate-config";
 
-export default jest;
+export default {
+  ...jest,
+  testEnvironment: "jsdom",
+};