Merge pull request #4706 from storybooks/node-path-loading-fix

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}`));