From 8894ac7d2fbd327ccd23c853c6a4bed6c7061f9a Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 3 Nov 2018 15:42:39 +0200 Subject: [PATCH 1/5] load NODE_PATH from .env file as well --- lib/core/src/server/config/utils.js | 31 +++++++++++++------ .../src/server/config/webpack.config.dev.js | 7 ++--- .../src/server/config/webpack.config.prod.js | 9 +++--- 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js index c04c7b322562..bc91c80b47e7 100644 --- a/lib/core/src/server/config/utils.js +++ b/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, }; } diff --git a/lib/core/src/server/config/webpack.config.dev.js b/lib/core/src/server/config/webpack.config.dev.js index 0bb728d4a17f..0a4d3afade64 100644 --- a/lib/core/src/server/config/webpack.config.dev.js +++ b/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: ['.js', '.jsx', '.json', '.mjs'], // 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(), }, diff --git a/lib/core/src/server/config/webpack.config.prod.js b/lib/core/src/server/config/webpack.config.prod.js index ea0f98f76edc..d5931ca9fad8 100644 --- a/lib/core/src/server/config/webpack.config.prod.js +++ b/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: ['.js', '.jsx', '.json', '.mjs'], // 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(), }, From 58d269e76aa9b6fa308c3a1ed6b0ea48d051dc92 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 6 Nov 2018 20:02:14 +0200 Subject: [PATCH 2/5] Add example of the NODE_PATH to CRA + move CRA out of root to projects --- examples/cra-kitchen-sink/.env | 1 + examples/cra-kitchen-sink/jest.config.js | 7 +++++++ examples/cra-kitchen-sink/src/stories/index.stories.js | 3 ++- jest.config.js | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 examples/cra-kitchen-sink/jest.config.js diff --git a/examples/cra-kitchen-sink/.env b/examples/cra-kitchen-sink/.env index 6f809cc2540d..e70a111949cd 100644 --- a/examples/cra-kitchen-sink/.env +++ b/examples/cra-kitchen-sink/.env @@ -1 +1,2 @@ SKIP_PREFLIGHT_CHECK=true +NODE_PATH=src \ No newline at end of file diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..506790418a7d --- /dev/null +++ b/examples/cra-kitchen-sink/jest.config.js @@ -0,0 +1,7 @@ +const config = require('../../jest.config'); + +module.exports = { + ...config, + roots: ['./'], + moduleDirectories: ['node_modules', 'src'], +}; diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js index 719c97b5810e..361d6aca77fa 100644 --- a/examples/cra-kitchen-sink/src/stories/index.stories.js +++ b/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'; diff --git a/jest.config.js b/jest.config.js index 7df222706fee..09cad8fc8b9b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,11 +11,11 @@ module.exports = { '\\.(md)$': '/__mocks__/htmlMock.js', '^riot$': 'riot/riot', }, + projects: ['', '/examples/cra-kitchen-sink'], roots: [ '/addons', '/app', '/lib', - '/examples/cra-kitchen-sink', '/examples/vue-kitchen-sink', '/examples/svelte-kitchen-sink', '/examples/riot-kitchen-sink', From 2fce397358a9f3d5fb84bb973d402e539bafa017 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 8 Nov 2018 16:12:19 +0200 Subject: [PATCH 3/5] Separate jest configs of all examples into their projects --- examples/angular-cli/jest.addon-config.js | 13 +++++++ examples/angular-cli/jest.config.js | 15 ++++++++ examples/angular-cli/package.json | 23 +----------- examples/cra-kitchen-sink/jest.config.js | 2 +- examples/html-kitchen-sink/jest.config.js | 11 ++++++ examples/riot-kitchen-sink/jest.config.js | 16 +++++++++ examples/svelte-kitchen-sink/jest.config.js | 11 ++++++ examples/vue-kitchen-sink/jest.config.js | 11 ++++++ jest.config.js | 39 ++++++--------------- 9 files changed, 89 insertions(+), 52 deletions(-) create mode 100644 examples/angular-cli/jest.addon-config.js create mode 100644 examples/angular-cli/jest.config.js create mode 100644 examples/html-kitchen-sink/jest.config.js create mode 100644 examples/riot-kitchen-sink/jest.config.js create mode 100644 examples/svelte-kitchen-sink/jest.config.js create mode 100644 examples/vue-kitchen-sink/jest.config.js diff --git a/examples/angular-cli/jest.addon-config.js b/examples/angular-cli/jest.addon-config.js new file mode 100644 index 000000000000..1515858c5387 --- /dev/null +++ b/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: [ + '/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js', + '/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js', + ], + testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'], + transform: { + '^.+\\.(ts|js|html)$': '/../../node_modules/jest-preset-angular/preprocessor.js', + }, +}; diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js new file mode 100644 index 000000000000..41856c987271 --- /dev/null +++ b/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$': '/scripts/jest-ts-babel.js', + '^.+\\.(ts|html)$': '/node_modules/jest-preset-angular/preprocessor.js', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'ts', 'tsx', 'html'], +}; diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 7f3726104224..1bf055909cee 100644 --- a/examples/angular-cli/package.json +++ b/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": [ - "/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js", - "/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js" - ], - "testPathIgnorePatterns": [ - "/node_modules/", - "/storybook-static/", - "angularshots.test.js", - "dist" - ], - "transform": { - "^.+\\.(ts|js|html)$": "/../../node_modules/jest-preset-angular/preprocessor.js" - } - }, "dependencies": { "@angular/common": "^7.0.1", "@angular/compiler": "^7.0.2", diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js index 506790418a7d..04f240e88559 100644 --- a/examples/cra-kitchen-sink/jest.config.js +++ b/examples/cra-kitchen-sink/jest.config.js @@ -2,6 +2,6 @@ const config = require('../../jest.config'); module.exports = { ...config, - roots: ['./'], + roots: [__dirname], moduleDirectories: ['node_modules', 'src'], }; diff --git a/examples/html-kitchen-sink/jest.config.js b/examples/html-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..96bbe6655e13 --- /dev/null +++ b/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)$': '/node_modules/jest-raw-loader', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'html'], +}; diff --git a/examples/riot-kitchen-sink/jest.config.js b/examples/riot-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..6cc92c000721 --- /dev/null +++ b/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)$': '/node_modules/riot-jest-transformer', + '^.+\\.(txt)$': '/node_modules/jest-raw-loader', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'tag'], +}; diff --git a/examples/svelte-kitchen-sink/jest.config.js b/examples/svelte-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..682378fb331d --- /dev/null +++ b/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)$': '/node_modules/svelte-jest', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'svelte'], +}; diff --git a/examples/vue-kitchen-sink/jest.config.js b/examples/vue-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..4a83732dc09d --- /dev/null +++ b/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)$': '/node_modules/jest-vue-preprocessor', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'vue'], +}; diff --git a/jest.config.js b/jest.config.js index 09cad8fc8b9b..81ee52e53b5d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,4 @@ module.exports = { - globals: { - __TRANSFORM_HTML__: true, - }, cacheDirectory: '.cache/jest', clearMocks: true, moduleNameMapper: { @@ -9,30 +6,25 @@ module.exports = { '/__mocks__/fileMock.js', '\\.(css|scss)$': '/__mocks__/styleMock.js', '\\.(md)$': '/__mocks__/htmlMock.js', - '^riot$': 'riot/riot', }, - projects: ['', '/examples/cra-kitchen-sink'], + projects: [ + '', + '/examples/cra-kitchen-sink', + '/examples/html-kitchen-sink', + '/examples/riot-kitchen-sink', + '/examples/svelte-kitchen-sink', + '/examples/vue-kitchen-sink', + '/examples/angular-cli', + ], roots: [ '/addons', '/app', '/lib', - '/examples/vue-kitchen-sink', - '/examples/svelte-kitchen-sink', - '/examples/riot-kitchen-sink', - '/examples/html-kitchen-sink', '/examples/official-storybook', - '/examples/ember-cli', - '/examples/angular-cli', ], snapshotSerializers: ['@emotion/snapshot-serializer'], transform: { '^.+\\.jsx?$': '/scripts/babel-jest.js', - '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '/scripts/jest-ts-babel.js', - '^.+\\.(ts|html)$': '/node_modules/jest-preset-angular/preprocessor.js', - '.*\\.(vue)$': '/node_modules/jest-vue-preprocessor', - '.*\\.(svelte)$': '/node_modules/svelte-jest', - '^.+\\.(tag)$': '/node_modules/riot-jest-transformer', - '^.+\\.(txt)$': '/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'], }; From 2db39425aa798a2746e6b2063bbd60010f1d271a Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 8 Nov 2018 17:20:24 +0200 Subject: [PATCH 4/5] When project is do not use the "--project" cli param --- scripts/test.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/scripts/test.js b/scripts/test.js index 6ade92aea5a7..f042c449cac4 100644 --- a/scripts/test.js +++ b/scripts/test.js @@ -47,7 +47,7 @@ const tasks = { name: `Core & Examples 🎨 ${chalk.gray('(core)')}`, defaultValue: true, option: '--core', - projectLocation: path.join(__dirname, '..'), + projectLocation: '', 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 === '') + ? '' + : `--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}`)); From f094002c1463f7e0f605a21cf45215dc44eb5fd4 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 8 Nov 2018 18:02:40 +0200 Subject: [PATCH 5/5] Use root node_modules --- examples/cra-kitchen-sink/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js index 04f240e88559..50cc5a0e3654 100644 --- a/examples/cra-kitchen-sink/jest.config.js +++ b/examples/cra-kitchen-sink/jest.config.js @@ -3,5 +3,5 @@ const config = require('../../jest.config'); module.exports = { ...config, roots: [__dirname], - moduleDirectories: ['node_modules', 'src'], + moduleDirectories: ['/node_modules', 'src'], };