Fix NODE_PATH is not being loaded from .env

examples/angular-cli/jest.addon-config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  coveragePathIgnorePatterns: ['/jest-config/', '/node_modules/'],
+  preset: 'jest-preset-angular',
+  setupTestFrameworkScriptFile: './jest-config/setup.ts',
+  snapshotSerializers: [
+    '<rootDir>/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js',
+    '<rootDir>/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js',
+  ],
+  testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'],
+  transform: {
+    '^.+\\.(ts|js|html)$': '<rootDir>/../../node_modules/jest-preset-angular/preprocessor.js',
+  },
+};

examples/angular-cli/jest.config.js

@@ -0,0 +1,15 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'ts', 'tsx', 'html'],
+};

examples/angular-cli/package.json

@@ -13,30 +13,9 @@
     "storybook:prebuild": "npm run test:generate-output",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:generate-output": "jest --json --outputFile=addon-jest.testresults.json || true",
+    "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
     "test:watch": "jest --watch"
   },
-  "jest": {
-    "coveragePathIgnorePatterns": [
-      "/jest-config/",
-      "/node_modules/"
-    ],
-    "preset": "jest-preset-angular",
-    "setupTestFrameworkScriptFile": "./jest-config/setup.ts",
-    "snapshotSerializers": [
-      "<rootDir>/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js",
-      "<rootDir>/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/storybook-static/",
-      "angularshots.test.js",
-      "dist"
-    ],
-    "transform": {
-      "^.+\\.(ts|js|html)$": "<rootDir>/../../node_modules/jest-preset-angular/preprocessor.js"
-    }
-  },
   "dependencies": {
     "@angular/common": "^7.0.1",
     "@angular/compiler": "^7.0.2",

examples/cra-kitchen-sink/.env

@@ -1 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
+NODE_PATH=src

examples/cra-kitchen-sink/jest.config.js

@@ -0,0 +1,7 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  moduleDirectories: ['<rootDir>/node_modules', 'src'],
+};

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -8,7 +8,8 @@ import centered from '@storybook/addon-centered';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-import App from '../App';
+// eslint-disable-next-line import/extensions,import/no-unresolved
+import App from 'App';
 import Container from './Container';
 import LifecycleLogger from '../components/LifecycleLogger';
 

examples/html-kitchen-sink/jest.config.js

@@ -0,0 +1,11 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '.*\\.(html)$': '<rootDir>/node_modules/jest-raw-loader',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'html'],
+};

examples/riot-kitchen-sink/jest.config.js

@@ -0,0 +1,16 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  moduleNameMapper: {
+    ...config.moduleNameMapper,
+    '^riot$': 'riot/riot',
+  },
+  transform: {
+    ...config.transform,
+    '^.+\\.(tag)$': '<rootDir>/node_modules/riot-jest-transformer',
+    '^.+\\.(txt)$': '<rootDir>/node_modules/jest-raw-loader',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'tag'],
+};

examples/svelte-kitchen-sink/jest.config.js

@@ -0,0 +1,11 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '.*\\.(svelte)$': '<rootDir>/node_modules/svelte-jest',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'svelte'],
+};

examples/vue-kitchen-sink/jest.config.js

@@ -0,0 +1,11 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'vue'],
+};

jest.config.js

@@ -1,38 +1,30 @@
 module.exports = {
-  globals: {
-    __TRANSFORM_HTML__: true,
-  },
   cacheDirectory: '.cache/jest',
   clearMocks: true,
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
     '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
-    '^riot$': 'riot/riot',
   },
+  projects: [
+    '<rootDir>',
+    '<rootDir>/examples/cra-kitchen-sink',
+    '<rootDir>/examples/html-kitchen-sink',
+    '<rootDir>/examples/riot-kitchen-sink',
+    '<rootDir>/examples/svelte-kitchen-sink',
+    '<rootDir>/examples/vue-kitchen-sink',
+    '<rootDir>/examples/angular-cli',
+  ],
   roots: [
     '<rootDir>/addons',
     '<rootDir>/app',
     '<rootDir>/lib',
-    '<rootDir>/examples/cra-kitchen-sink',
-    '<rootDir>/examples/vue-kitchen-sink',
-    '<rootDir>/examples/svelte-kitchen-sink',
-    '<rootDir>/examples/riot-kitchen-sink',
-    '<rootDir>/examples/html-kitchen-sink',
     '<rootDir>/examples/official-storybook',
-    '<rootDir>/examples/ember-cli',
-    '<rootDir>/examples/angular-cli',
   ],
   snapshotSerializers: ['@emotion/snapshot-serializer'],
   transform: {
     '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
-    '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
-    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
-    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
-    '.*\\.(svelte)$': '<rootDir>/node_modules/svelte-jest',
-    '^.+\\.(tag)$': '<rootDir>/node_modules/riot-jest-transformer',
-    '^.+\\.(txt)$': '<rootDir>/node_modules/jest-raw-loader',
   },
   testPathIgnorePatterns: ['/node_modules/', '/dist/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -50,16 +42,5 @@ module.exports = {
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
   modulePathIgnorePatterns: ['/dist/.*/__mocks__/'],
-  moduleFileExtensions: [
-    'ts',
-    'tsx',
-    'js',
-    'jsx',
-    'json',
-    'node',
-    '.html',
-    '.svelte',
-    'vue',
-    'tag',
-  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
 };

lib/core/src/server/config/utils.js

@@ -7,33 +7,46 @@ export const excludePaths = [path.resolve('node_modules')];
 
 export const nodeModulesPaths = path.resolve('./node_modules');
 
-export const nodePaths = (process.env.NODE_PATH || '')
-  .split(process.platform === 'win32' ? ';' : ':')
-  .filter(Boolean)
-  .map(p => path.resolve('./', p));
+const nodePathsToArray = nodePath =>
+  nodePath
+    .split(process.platform === 'win32' ? ';' : ':')
+    .filter(Boolean)
+    .map(p => path.resolve('./', p));
 
 // Load environment variables starts with STORYBOOK_ to the client side.
 export function loadEnv(options = {}) {
   const defaultNodeEnv = options.production ? 'production' : 'development';
+
   const env = {
-    NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
+    NODE_ENV: process.env.NODE_ENV || defaultNodeEnv,
+    NODE_PATH: process.env.NODE_PATH || '',
     // This is to support CRA's public folder feature.
     // In production we set this to dot(.) to allow the browser to access these assests
     // even when deployed inside a subpath. (like in GitHub pages)
     // In development this is just empty as we always serves from the root.
-    PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
+    PUBLIC_URL: options.production ? '.' : '',
   };
 
   Object.keys(process.env)
     .filter(name => /^STORYBOOK_/.test(name))
     .forEach(name => {
-      env[name] = JSON.stringify(process.env[name]);
+      env[name] = process.env[name];
     });
 
-  const { stringified } = getEnvironment({ nodeEnv: JSON.parse(env.NODE_ENV) });
+  const base = Object.entries(env).reduce(
+    (acc, [k, v]) => Object.assign(acc, { [k]: JSON.stringify(v) }),
+    {}
+  );
+
+  const { stringified, raw } = getEnvironment({ nodeEnv: env.NODE_ENV });
+
+  const fullRaw = Object.assign({}, env, raw);
+
+  fullRaw.NODE_PATH = nodePathsToArray(fullRaw.NODE_PATH || '');
 
   return {
-    'process.env': Object.assign({}, env, stringified),
+    stringified: Object.assign({}, base, stringified),
+    raw: fullRaw,
   };
 }
 

lib/core/src/server/config/webpack.config.dev.js

@@ -10,14 +10,13 @@ import {
   excludePaths,
   nodeModulesPaths,
   loadEnv,
-  nodePaths,
   getBabelRuntimePath,
 } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
 import { version } from '../../../package.json';
 
 export default ({ configDir, quiet, babelOptions, entries }) => {
-  const environment = loadEnv();
+  const { raw, stringified } = loadEnv();
   const entriesMeta = {
     iframe: {
       headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
@@ -61,7 +60,7 @@ export default ({ configDir, quiet, babelOptions, entries }) => {
             template: require.resolve(`../templates/index.ejs`),
           })
       ),
-      new webpack.DefinePlugin(environment),
+      new webpack.DefinePlugin({ 'process.env': stringified }),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),
@@ -97,7 +96,7 @@ export default ({ configDir, quiet, babelOptions, entries }) => {
       extensions: ['.mjs', '.js', '.jsx', '.json'],
       // Add support to NODE_PATH. With this we could avoid relative path imports.
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
-      modules: ['node_modules'].concat(nodePaths),
+      modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
         '@babel/runtime': getBabelRuntimePath(),
       },

lib/core/src/server/config/webpack.config.prod.js

@@ -3,11 +3,12 @@ import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import { version } from '../../../package.json';
-import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils';
+import { includePaths, excludePaths, loadEnv, getBabelRuntimePath } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
 
 export default ({ configDir, babelOptions, entries }) => {
-  const environment = loadEnv({ production: true });
+  const { stringified, raw } = loadEnv({ production: true });
+
   const entriesMeta = {
     iframe: {
       headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
@@ -51,7 +52,7 @@ export default ({ configDir, babelOptions, entries }) => {
             template: require.resolve(`../templates/index.ejs`),
           })
       ),
-      new webpack.DefinePlugin(environment),
+      new webpack.DefinePlugin({ 'process.env': stringified }),
       new Dotenv({ silent: true }),
     ],
     module: {
@@ -83,7 +84,7 @@ export default ({ configDir, babelOptions, entries }) => {
       extensions: ['.mjs', '.js', '.jsx', '.json'],
       // Add support to NODE_PATH. With this we could avoid relative path imports.
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
-      modules: ['node_modules'].concat(nodePaths),
+      modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
         '@babel/runtime': getBabelRuntimePath(),
       },

scripts/test.js

@@ -47,7 +47,7 @@ const tasks = {
     name: `Core & Examples 🎨 ${chalk.gray('(core)')}`,
     defaultValue: true,
     option: '--core',
-    projectLocation: path.join(__dirname, '..'),
+    projectLocation: '<all>',
     isJest: true,
   }),
   image: createProject({
@@ -170,12 +170,19 @@ selection
       const jestProjects = projects.filter(key => key.isJest).map(key => key.projectLocation);
       const nonJestProjects = projects.filter(key => !key.isJest);
       const extraParams = getExtraParams(list).join(' ');
+
       if (jestProjects.length > 0) {
-        spawn(`jest --projects ${jestProjects.join(' ')} ${extraParams}`);
+        const projectsParam = jestProjects.some(project => project === '<all>')
+          ? ''
+          : `--projects ${jestProjects.join(' ')}`;
+
+        spawn(`jest ${projectsParam} ${extraParams}`);
       }
+
       nonJestProjects.forEach(key =>
         spawn(`npm --prefix ${key.projectLocation} test -- ${extraParams}`)
       );
+
       const scripts = getScripts(list);
       scripts.forEach(key => spawn(`${key.script} -- ${extraParams}`));