fix: remove isMDXDocument files from tests

ccontrols · Apr 4, 2021 · 213cc90 · 213cc90
1 parent 0e16003
commit 213cc90
Show file tree

Hide file tree

Showing 18 changed files with 288 additions and 227 deletions.
diff --git a/core/config/package.json b/core/config/package.json
@@ -31,6 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/core": "^3.5.0",
+    "@component-controls/instrument": "^3.5.2",
     "esm": "^3.2.25",
     "glob": "^7.1.6",
     "glob-base": "^0.3.0",

diff --git a/core/config/src/index.ts b/core/config/src/index.ts
@@ -14,6 +14,10 @@ import {
   defaultRunConfig,
   convertConfig,
 } from '@component-controls/core';
+import {
+  defaultMDXOptions,
+  InstrumentOptions,
+} from '@component-controls/instrument';
 
 export const buildConfigFileNames = [
   'buildtime.js',
@@ -137,6 +141,16 @@ export const extractDocuments = ({
   return documents;
 };
 
+export const isMDXDocument = (
+  filePath: string,
+  options?: InstrumentOptions,
+): boolean => {
+  const test = options?.mdx?.test || defaultMDXOptions.test;
+  if (test) {
+    return filePath.match(test) !== null;
+  }
+  return false;
+};
 /**
  * from the glob list of documents, extract require.context array of props
  */

diff --git a/examples/stories/src/tutorial/testing/jest-snapshots.mdx b/examples/stories/src/tutorial/testing/jest-snapshots.mdx
@@ -81,6 +81,24 @@ yarn add enzyme enzyme-to-json @wojtekmaj/enzyme-adapter-react-17 @types/enzyme
 yarn add react-test-renderer @types/react-test-renderer --dev
 ```
 
+### custom jest loaders
+
+If you are using images, css files etc - you might need to add some custom transforms for your jest tests
+
+```js:title=package.json
+  ...
+  "jest": {
+    "transform": {
+      ...
+      ".+\\.(jpg|jpeg|png|gif|svg)$": "jest-url-loader",
+      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
+    }
+  }
+}
+```    
+
+
+
 ## Examples
 
 The starter projects are set up to demonstrate no-code jest snapshots:

diff --git a/plugins/cc-cli/templates/store/import/imports.cjs.js b/plugins/cc-cli/templates/store/import/imports.cjs.js
@@ -1,6 +1,7 @@
 const {
   loadConfigurations,
   extractDocuments,
+  isMDXDocument,
 } = require('@component-controls/config');
 const { renderExample } = require('@component-controls/test-renderers');
 const { render: reactRender } = require('@component-controls/render/react');
diff --git a/plugins/cc-cli/templates/store/import/imports.esm.js b/plugins/cc-cli/templates/store/import/imports.esm.js
@@ -1,3 +1,3 @@
-import { loadConfigurations, extractDocuments } from '@component-controls/config';
+import { loadConfigurations, extractDocuments, isMDXDocument } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
diff --git a/plugins/cc-cli/templates/store/import/imports.ts.js b/plugins/cc-cli/templates/store/import/imports.ts.js
@@ -1,3 +1,3 @@
-import { loadConfigurations, extractDocuments } from '@component-controls/config';
+import { loadConfigurations, extractDocuments, isMDXDocument } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
diff --git a/plugins/cc-cli/templates/store/loop/imports.cjs.js b/plugins/cc-cli/templates/store/loop/imports.cjs.js
@@ -1,6 +1,6 @@
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach(file => {
+    documents.filter(file => !isMDXDocument(file, config.instrument)).forEach(file => {
       const exports = require(file);
       const doc = exports.default;
       const examples = Object.keys(exports)

diff --git a/plugins/cc-cli/templates/store/loop/imports.esm.js b/plugins/cc-cli/templates/store/loop/imports.esm.js
@@ -1,6 +1,6 @@
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach(file => {
+    documents.filter(file => !isMDXDocument(file, config.instrument)).forEach(file => {
       const exports = require(file);
       const doc = exports.default;
       const examples = Object.keys(exports)

diff --git a/plugins/cc-cli/templates/store/loop/imports.ts.js b/plugins/cc-cli/templates/store/loop/imports.ts.js
@@ -1,6 +1,6 @@
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach((file: string) => {
+    documents.filter((file: string) => !isMDXDocument(file, config.instrument)).forEach((file: string) => {
       const exports = require(file);
       const doc = exports.default;
       const examples = Object.keys(exports)

diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap
@@ -6,6 +6,7 @@ const MatchMediaMock = require('jest-matchmedia-mock').default;
 const {
   loadConfigurations,
   extractDocuments,
+  isMDXDocument,
 } = require('@component-controls/config');
 const { renderExample } = require('@component-controls/test-renderers');
 const { render: reactRender } = require('@component-controls/render/react');
@@ -31,30 +32,32 @@ describe('component-controls generated', () => {
   }
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach(file => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
+    documents
+      .filter(file => !isMDXDocument(file, config.instrument))
+      .forEach(file => {
+        const exports = require(file);
+        const doc = exports.default;
+        const examples = Object.keys(exports)
+          .filter(key => key !== 'default')
+          .map(key => exports[key]);
 
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+        if (examples.length) {
+          describe(doc.title, () => {
+            examples.forEach(example => {
+              it(example.name, async () => {
+                const rendered = renderExample({
+                  example,
+                  doc,
+                  config,
+                });
 
-              const component = mount(rendered);
-              expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+                const component = mount(rendered);
+                expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+              });
             });
           });
-        });
-      }
-    });
+        }
+      });
   }
 });
 "

diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap
@@ -6,6 +6,7 @@ import MatchMediaMock from 'jest-matchmedia-mock';
 import {
   loadConfigurations,
   extractDocuments,
+  isMDXDocument,
 } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -31,30 +32,32 @@ describe('component-controls generated', () => {
   }
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach(file => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
+    documents
+      .filter(file => !isMDXDocument(file, config.instrument))
+      .forEach(file => {
+        const exports = require(file);
+        const doc = exports.default;
+        const examples = Object.keys(exports)
+          .filter(key => key !== 'default')
+          .map(key => exports[key]);
 
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+        if (examples.length) {
+          describe(doc.title, () => {
+            examples.forEach(example => {
+              it(example.name, async () => {
+                const rendered = renderExample({
+                  example,
+                  doc,
+                  config,
+                });
 
-              const component = mount(rendered);
-              expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+                const component = mount(rendered);
+                expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+              });
             });
           });
-        });
-      }
-    });
+        }
+      });
   }
 });
 "

diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap
@@ -6,6 +6,7 @@ import MatchMediaMock from 'jest-matchmedia-mock';
 import {
   loadConfigurations,
   extractDocuments,
+  isMDXDocument,
 } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -31,30 +32,32 @@ describe('component-controls generated', () => {
   }
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach((file: string) => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
+    documents
+      .filter((file: string) => !isMDXDocument(file, config.instrument))
+      .forEach((file: string) => {
+        const exports = require(file);
+        const doc = exports.default;
+        const examples = Object.keys(exports)
+          .filter(key => key !== 'default')
+          .map(key => exports[key]);
 
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+        if (examples.length) {
+          describe(doc.title, () => {
+            examples.forEach(example => {
+              it(example.name, async () => {
+                const rendered = renderExample({
+                  example,
+                  doc,
+                  config,
+                });
 
-              const component = mount(rendered);
-              expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+                const component = mount(rendered);
+                expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+              });
             });
           });
-        });
-      }
-    });
+        }
+      });
   }
 });
 "

diff --git a/plugins/cc-cli/test/__snapshots__/store-rtl-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-rtl-cjs.test.ts.snap
@@ -6,6 +6,7 @@ const MatchMediaMock = require('jest-matchmedia-mock').default;
 const {
   loadConfigurations,
   extractDocuments,
+  isMDXDocument,
 } = require('@component-controls/config');
 const { renderExample } = require('@component-controls/test-renderers');
 const { render: reactRender } = require('@component-controls/render/react');
@@ -31,36 +32,38 @@ describe('component-controls generated', () => {
   }
   const documents = extractDocuments({ config, configPath });
   if (documents) {
-    documents.forEach(file => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
+    documents
+      .filter(file => !isMDXDocument(file, config.instrument))
+      .forEach(file => {
+        const exports = require(file);
+        const doc = exports.default;
+        const examples = Object.keys(exports)
+          .filter(key => key !== 'default')
+          .map(key => exports[key]);
 
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-              let rendered;
-              act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
+        if (examples.length) {
+          describe(doc.title, () => {
+            examples.forEach(example => {
+              it(example.name, async () => {
+                let rendered;
+                act(() => {
+                  rendered = renderExample({
+                    example,
+                    doc,
+                    config,
+                  });
                 });
+                if (!rendered) {
+                  renderErr();
+                  return;
+                }
+                const { asFragment } = render(rendered);
+                expect(asFragment()).toMatchSnapshot();
               });
-              if (!rendered) {
-                renderErr();
-                return;
-              }
-              const { asFragment } = render(rendered);
-              expect(asFragment()).toMatchSnapshot();
             });
           });
-        });
-      }
-    });
+        }
+      });
   }
 });
 "