add jest-dom matchers from react-testing

jest.config.js

@@ -6,7 +6,7 @@
 const commonConfig = {
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
   },
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: [
@@ -18,12 +18,12 @@ const commonConfig = {
   ],
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   transformIgnorePatterns: [
-    '/node_modules/',
-    '^.+\\.module\\.(css|sass|scss)$',
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
   ],
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
   },
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage-unit",
@@ -164,7 +164,6 @@ const commonConfig = {
   // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
   // timers: "real",
 
-
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,
 
@@ -176,23 +175,23 @@ const commonConfig = {
 
   // Whether to use watchman for file crawling
   // watchman: true,
-}
+};
 
 module.exports = {
   // shared configuration for global features, such as coverage computation
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/*.d.ts',
-    '!**/node_modules/**',
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/*.d.ts",
+    "!**/node_modules/**",
     // we have to explicitely exclude tests from coverage when using "projects" options
     // because Jest can't tell anymore which files is a test or not as it varies per environment
-    '!**/__tests__/**/*.[jt]s?(x)',
-    '!**/*.test.[jt]s?(x)',
-    '!coverage/**',
-    '!.next/**',
+    "!**/__tests__/**/*.[jt]s?(x)",
+    "!**/*.test.[jt]s?(x)",
+    "!coverage/**",
+    "!.next/**",
     // we exclude configuration files from coverage computation
-    '!*.js',
+    "!*.js",
     //"!**/stor{y,ies}.{js,ts,jsx,tsx}",
     //"!**/*.stor{y,ies}.{js,ts,jsx,tsx}",
     //"!**/cypress/**",
@@ -211,26 +210,23 @@ module.exports = {
   projects: [
     {
       ...commonConfig,
-      name: 'client',
-      displayName: 'client',
+      name: "client",
+      displayName: "client",
       // testEnvironment: "jsdom", // defautl already
-      testMatch: [
-        '**/!(*.server).test.[jt]s?(x)',
-      ],
-      modulePaths: ['<rootDir>'],
+      testMatch: ["**/!(*.server).test.[jt]s?(x)"],
+      modulePaths: ["<rootDir>"],
       // The paths to modules that run some code to configure or set up the testing environment before each test
       setupFiles: ["./jest/setup.js"],
+      setupFilesAfterEnv: ["./jest/setupFilesAfterEnv.ts"],
     },
     {
       ...commonConfig,
-      name: 'server',
-      displayName: 'server',
-      testEnvironment: 'node',
-      testMatch: [
-        '**/*.server.test.[jt]s?(x)',
-      ],
+      name: "server",
+      displayName: "server",
+      testEnvironment: "node",
+      testMatch: ["**/*.server.test.[jt]s?(x)"],
       // The paths to modules that run some code to configure or set up the testing environment before each test
       setupFiles: ["./jest/setup.server.js"],
     },
   ],
-}
+};

jest/setup.js

@@ -3,4 +3,4 @@
 import { setGlobalConfig } from "@storybook/testing-react";
 import * as globalStorybookConfig from "../.storybook/preview"; // path of your preview.js file
 
-setGlobalConfig(globalStorybookConfig);
+setGlobalConfig(globalStorybookConfig);

jest/setupFilesAfterEnv.ts

@@ -0,0 +1,2 @@
+// @see https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package.json

@@ -29,6 +29,7 @@
     "@storybook/addon-links": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "@storybook/testing-react": "^0.0.17",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.14",
     "@types/node": "^13.7.6",

packages/react-ui/components/form/Form/Form.tsx

@@ -634,9 +634,9 @@ export const Form = (props: FormProps) => {
     setDisabled(false);
 
     // eslint-disable-next-line no-console
-    console.log("// graphQL Error");
+    console.error("// graphQL Error");
     // eslint-disable-next-line no-console
-    console.log(error);
+    console.error(error);
 
     // run mutation failure callbacks on error, we do not allow the callbacks to change the error
     runCallbacks({

packages/react-ui/components/form/Form/tests/Form.test.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import {
+  render,
+  fireEvent,
+  waitFor,
+  screen,
+  act,
+} from "@testing-library/react";
 // @see https://storybook.js.org/addons/@storybook/react-testing
 import { composeStories } from "@storybook/testing-react";
 import * as stories from "./Form.stories"; // import all stories from the stories file
@@ -11,7 +17,9 @@ import {
   ArrayFullCustom,
   ArrayOfCustomObjects,
   addressSchema,
+  OneField,
 } from "../../tests/fixtures/models";
+import { create } from "underscore";
 // Every component that is returned maps 1:1 with the stories,
 // but they already contain all decorators from story level, meta level and global level.
 // => here the form comes with default I18n context and default components to simplify the setup
@@ -227,6 +235,31 @@ describe("vulcan-forms/Form", function () {
     });
   });
 
+  describe("Form submission", function () {
+    test("create a new empty document", async () => {
+      // @see https://stackoverflow.com/a/41939921/5513532 keep the "args" there for correct typing
+      let createPromise = Promise.resolve({
+        document: {},
+        errors: [],
+      });
+      const createDocument = jest.fn((args) => createPromise);
+      const { getByRole } = render(
+        // @ts-ignore
+        <DefaultForm model={OneField} createDocument={createDocument} />
+      );
+      const submitButton = getByRole("button", { name: /submit/i });
+      submitButton.click();
+      // @see https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
+      // When using a promise, you need to wait for it to be done in the "act"
+      await act(() => {
+        // it could be improved by checking visual state (does the form show success message etc.)
+        return createPromise;
+      });
+      expect(createDocument).toHaveBeenCalledTimes(1);
+      expect(createDocument.mock.calls[0][0]).toEqual({ input: { data: {} } });
+    });
+  });
+
   describe("Form state management", function () {
     // TODO: modern approach with hooks, is exporting the hook that manage state and testing it independently
     // TODO: the change callback is triggerd but `foo` becomes null instead of "bar

yarn.lock

@@ -1119,6 +1119,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.5.tgz#665450911c6031af38f81db530f387ec04cd9a98"
+  integrity sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.13", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -3227,6 +3234,21 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
+"@testing-library/jest-dom@^5.14.1":
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
+  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    "@types/testing-library__jest-dom" "^5.9.1"
+    aria-query "^4.2.2"
+    chalk "^3.0.0"
+    css "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@testing-library/react-hooks@^3.4.1":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.7.0.tgz#6d75c5255ef49bce39b6465bf6b49e2dac84919e"
@@ -3446,6 +3468,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@*":
+  version "26.0.23"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.23.tgz#a1b7eab3c503b80451d019efb588ec63522ee4e7"
+  integrity sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
+
 "@types/jest@^26.0.14":
   version "26.0.22"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.22.tgz#8308a1debdf1b807aa47be2838acdcd91e88fbe6"
@@ -3695,6 +3725,13 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"
   integrity sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==
 
+"@types/testing-library__jest-dom@^5.9.1":
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz#98eb7537cb5502bcca7a0d82acf5f245a2e6c322"
+  integrity sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==
+  dependencies:
+    "@types/jest" "*"
+
 "@types/testing-library__react-hooks@^3.4.0":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.4.1.tgz#b8d7311c6c1f7db3103e94095fe901f8fef6e433"
@@ -6179,6 +6216,20 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
   integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -6547,6 +6598,11 @@ dom-accessibility-api@^0.5.4:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.5.tgz#8546a8f0574f6a3ec9160c610d14449128bd6208"
   integrity sha512-8qdiSHWFg/rzd/oDByhKtBCR+1QtpNPcHDr94m3K+SLkFaPEhdCPA/Rm9hOPN9WUK9mEfNXH1zaM6F5e0yhw/A==
 
+dom-accessibility-api@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
+  integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -13318,6 +13374,14 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"