feat: move test-renderers to own package

.vscode/launch.json

@@ -183,7 +183,7 @@
       "name": "jest testing",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/jest-testing",
-      "args": ["react-story"],
+      "args": ["react-link"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/jest-testing/README.md

@@ -9,5 +9,5 @@ Given a file name, retrives the jest tests and associated results.
 This package is usually installed as part of the @component-controls package, but you can also install it standalone:
 
 ```bash
-$ npm install @component-controls/jest-collector --save-dev
+$ npm install @component-controls/jest-testing --save-dev
 ```

core/test-renderers/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

core/test-renderers/.eslintignore

@@ -0,0 +1,2 @@
+dist
+test/fixtures/

core/test-renderers/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

core/test-renderers/README.md

@@ -0,0 +1,13 @@
+# Table of contents
+
+# Overview
+
+A collection of test renderers for react
+
+# Installation
+
+This package is usually installed as part of the @component-controls package, but you can also install it standalone:
+
+```bash
+$ npm install @component-controls/test-renderers --save-dev
+```

core/test-renderers/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@component-controls/test-renderers",
+  "version": "3.4.5",
+  "description": "React test renderers: rtl, rtr and enzyme",
+  "keywords": [
+    "react",
+    "react-testing-library",
+    "react-test-renderer",
+    "enzyme",
+    "testing"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-md",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest --passWithNoTests"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "core/test-renderers"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/core": "^3.4.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^10.4.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.5.0",
+    "rc-util": "^5.0.7",
+    "react-test-renderer": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-test-renderer": "^16.9.3",
+    "@types/testing-library__jest-dom": "^5.9.2",
+    "jest": "^26.4.2",
+    "react-dom": "^16.13.1",
+    "typescript": "^4.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ],
+  "jest": {
+    "testEnvironment": "node",
+    "preset": "ts-jest",
+    "roots": [
+      "./test"
+    ]
+  },
+  "gitHead": "e30d62f101e104711a16261fce04785d58cac1eb"
+}

core/test-renderers/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: ['./src/index.ts'],
+});

plugins/jest-snapshots/src/renderers.ts → core/test-renderers/src/index.ts

@@ -1,7 +1,9 @@
 import { render as reactTestRenderer } from './renderers/react-test-renderer';
 import { render as enzymeReact16Renderer } from './renderers/enzyme-react-16';
 import { render as rtlRenderer } from './renderers/react-testing-library';
-import { RendererFn } from './index';
+import { RendererFn, RendererFnResult, Json } from './types';
+
+export { RendererFn, RendererFnResult, Json };
 
 export const renderers: Record<string, RendererFn> = {
   react: rtlRenderer,

core/test-renderers/src/renderers/enzyme-react-16.ts

@@ -0,0 +1,22 @@
+import { mount, configure, ReactWrapper } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { RendererFn, RendererFnResult } from '../types';
+
+configure({ adapter: new Adapter() });
+
+export const render: RendererFn = async (
+  { story, doc, config },
+  options?: any,
+): Promise<(RendererFnResult & Partial<ReactWrapper>) | undefined> => {
+  const renderFn = config.renderFn;
+  if (renderFn) {
+    const rendered = renderFn(story, doc, config);
+    const component = mount(rendered, options);
+    return {
+      toJson: () => toJson(component, { mode: 'deep' }),
+      ...component,
+    };
+  }
+  return undefined;
+};

core/test-renderers/src/renderers/react-test-renderer.ts

@@ -0,0 +1,15 @@
+import renderer from 'react-test-renderer';
+import { RendererFn, RendererFnResult, Json } from '../types';
+
+export const render: RendererFn = async (
+  { story, doc, config },
+  options,
+): Promise<(RendererFnResult & renderer.ReactTestRenderer) | undefined> => {
+  const renderFn = config.renderFn;
+  if (renderFn) {
+    const rendered = renderFn(story, doc, config);
+    const component = renderer.create(rendered, options);
+    return { toJson: () => component.toJSON() as Json, ...component };
+  }
+  return undefined;
+};

core/test-renderers/src/renderers/react-testing-library.ts

@@ -0,0 +1,18 @@
+import { render as rtlRender, RenderResult } from '@testing-library/react';
+import { RendererFn, RendererFnResult } from '../types';
+
+export const render: RendererFn = async (
+  { story, doc, config },
+  options?: any,
+): Promise<(RendererFnResult & RenderResult) | undefined> => {
+  const renderFn = config.renderFn;
+  if (renderFn) {
+    const rendered = renderFn(story, doc, config);
+    const results = rtlRender(rendered, options);
+    return {
+      toJson: () => results.asFragment(),
+      ...results,
+    };
+  }
+  return undefined;
+};

core/test-renderers/src/types.ts

@@ -0,0 +1,18 @@
+import { Story, Document, RunConfiguration } from '@component-controls/core';
+
+export type Json =
+  | {
+      type: string;
+      props?: { [key: string]: any };
+      children: Array<Json> | null;
+    }
+  | DocumentFragment;
+
+export type RendererFnResult = {
+  toJson: () => Json | null;
+};
+
+export type RendererFn = (
+  props: { story: Story; doc: Document; config: RunConfiguration },
+  options?: any,
+) => Promise<RendererFnResult | undefined>;

core/test-renderers/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "types": ["node", "jest"],
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**", "test/**"]
+}

examples/stories/src/tutorial/testing/jest-snapshots.mdx

@@ -82,7 +82,7 @@ Using this approach, you will create a custom test file and use directly jest to
 
 ```js:title=stories.test.js
 const path = require('path');
-const { renderers } = require('@component-controls/jest-snapshots/renderers');
+const { renderers } = require('@component-controls/test-renderers');
 const { runJestSnapshots } = require('@component-controls/jest-snapshots');
 
 runJestSnapshots(
@@ -105,7 +105,7 @@ A full list of the [compiler cli parameters](/tutorial/reference/cli#parameters)
 If the output folder is not specified, the bundle is located in the `public` folder
 
 ```js:title=stories.test.js
-const { renderers } = require('@component-controls/jest-snapshots/renderers');
+const { renderers } = require('@component-controls/test-renderers');
 const { runJestSnapshots } = require('@component-controls/jest-snapshots');
 
 runJestSnapshots(renderers.enzyme);

plugins/jest-snapshots/package.json

@@ -17,8 +17,6 @@
     "package.json",
     "args.js",
     "args.d.ts",
-    "renderers.js",
-    "renderers.d.ts",
     "README.md",
     "stories.test.js"
   ],
@@ -45,25 +43,16 @@
     "cc-jest": "./bin/index.js"
   },
   "dependencies": {
+    "@component-controls/test-renderers": "^3.4.5",
     "@component-controls/store": "^3.4.5",
     "@component-controls/webpack-compile": "^3.4.5",
     "@component-controls/webpack-configs": "^3.4.5",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^10.4.9",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.5.0",
     "jest-cli": "^26.4.2",
-    "rc-util": "^5.0.7",
-    "react-test-renderer": "^16.13.1",
     "ts-jest": "^26.4.4"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.10",
     "@types/react-dom": "^16.9.8",
-    "@types/react-test-renderer": "^16.9.3",
-    "@types/testing-library__jest-dom": "^5.9.2",
     "jest": "^26.4.2",
     "react-dom": "^16.13.1",
     "typescript": "^4.0.5"

plugins/jest-snapshots/rollup.config.js

@@ -1,10 +1,5 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: [
-    './src/index.ts',
-    './src/cli.ts',
-    './src/args.ts',
-    './src/renderers.ts',
-  ],
+  input: ['./src/index.ts', './src/cli.ts', './src/args.ts'],
 });

plugins/jest-snapshots/src/args.ts

@@ -1,5 +1,5 @@
 import { ArgOptions } from '@component-controls/webpack-compile/cli';
-import { renderers } from './renderers';
+import { renderers } from '@component-controls/test-renderers';
 
 export const jestCliArgs: ArgOptions = [
   {

plugins/jest-snapshots/src/index.ts

@@ -1,21 +1,16 @@
 import { loadStore } from '@component-controls/store';
+import { RendererFn } from '@component-controls/test-renderers';
 import { getBundleName } from '@component-controls/webpack-compile';
-import { Store } from '@component-controls/core';
 
 export type RendererFnResult = Promise<any> | any;
 
-export type RendererFn = (
-  storyId: string,
-  store: Store,
-  options?: any,
-) => Promise<RendererFnResult>;
-
 export const runJestSnapshots = (
   renderer: RendererFn,
   bundleName?: string,
 ): void => {
   const bundle = bundleName || getBundleName();
   const store = loadStore(require(bundle));
+  const config = store.config;
   Object.keys(store.docs).forEach(docId => {
     const doc = store.docs[docId];
 
@@ -25,8 +20,8 @@ export const runJestSnapshots = (
         stories.forEach(storyId => {
           const story = store.stories[storyId];
           it(story.name, async () => {
-            const tree = await renderer(storyId, store);
-            expect(tree).toMatchSnapshot();
+            const { toJson } = (await renderer({ story, doc, config })) || {};
+            expect(toJson ? toJson() : undefined).toMatchSnapshot();
           });
         });
       });