diff --git a/.eslintrc.js b/.eslintrc.js index d152f7b934a..d3ba13c01d6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,17 +1,14 @@ /** @format */ -const baseConfig = require( '@woocommerce/e2e-environment' ).esLintConfig; +const { useE2EEsLintConfig } = require( '@woocommerce/e2e-environment' ); -module.exports = { - ...baseConfig, +module.exports = useE2EEsLintConfig( { root: true, env: { - ...baseConfig.env, browser: true, es6: true, node: true }, globals: { - ...baseConfig.globals, wp: true, wpApiSettings: true, wcSettings: true, @@ -32,4 +29,4 @@ module.exports = { jsx: true } }, -}; +} ); diff --git a/babel.config.js b/babel.config.js index 522ede3fe37..c1958ec2c9d 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ -const e2eBabelConfig = require( '@woocommerce/e2e-environment' ).babelConfig; +const { e2eBabelConfig } = require( '@woocommerce/e2e-environment' ); module.exports = function( api ) { api.cache( true ); diff --git a/tests/e2e/env/README.md b/tests/e2e/env/README.md index 9fd8e07d760..b8866c73091 100644 --- a/tests/e2e/env/README.md +++ b/tests/e2e/env/README.md @@ -18,19 +18,16 @@ The `@woocommerce/e2e-environment` package exports configuration objects that ca Make sure you `npm install @babel/preset-env --save` if you have not already done so. Afterwards, extend your project's `babel.config.js` to contain the expected presets for E2E testing. ```js -const { babelConfig: e2eBabelConfig } = require( '@woocommerce/e2e-environment' ); +const { useE2EBabelConfig } = require( '@woocommerce/e2e-environment' ); module.exports = function( api ) { api.cache( true ); - return { - ...e2eBabelConfig, + return useE2EBabelConfig( { presets: [ - ...e2eBabelConfig.presets, '@wordpress/babel-preset-default', ], - .... - }; + } ); }; ``` @@ -39,34 +36,22 @@ module.exports = function( api ) { The E2E environment uses Puppeteer for headless browser testing, which uses certain globals variables. Avoid ES Lint errors by extending the config. ```js -const { esLintConfig: baseConfig } = require( '@woocommerce/e2e-environment' ); +const { useE2EEsLintConfig } = require( '@woocommerce/e2e-environment' ); -module.exports = { - ...baseConfig, +module.exports = useE2EEsLintConfig( { root: true, - parser: 'babel-eslint', - extends: [ - ...baseConfig.extends, - 'wpcalypso/react', - 'plugin:jsx-a11y/recommended', - ], - plugins: [ - ...baseConfig.plugins, - 'jsx-a11y', - ], env: { - ...baseConfig.env, browser: true, - node: true, + es6: true, + node: true }, globals: { - ...baseConfig.globals, wp: true, wpApiSettings: true, wcSettings: true, + es6: true }, - .... -}; +} ); ``` ### Jest Config diff --git a/tests/e2e/env/config/index.js b/tests/e2e/env/config/index.js index 7aaf062dcbb..b53bdd83640 100644 --- a/tests/e2e/env/config/index.js +++ b/tests/e2e/env/config/index.js @@ -1,10 +1,20 @@ +/** + * Internal dependencies + */ const jestConfig = require( './jest.config' ); const jestPuppeteerConfig = require( './jest-puppeteer.config' ); -const { useE2EJestConfig, useE2EJestPuppeteerConfig } = require( './use-config' ); +const { + useE2EBabelConfig, + useE2EEsLintConfig, + useE2EJestConfig, + useE2EJestPuppeteerConfig +} = require( './use-config' ); module.exports = { jestConfig, jestPuppeteerConfig, + useE2EBabelConfig, + useE2EEsLintConfig, useE2EJestConfig, useE2EJestPuppeteerConfig, }; diff --git a/tests/e2e/env/config/use-config.js b/tests/e2e/env/config/use-config.js index 0516c5c309d..4270c4a1cbb 100644 --- a/tests/e2e/env/config/use-config.js +++ b/tests/e2e/env/config/use-config.js @@ -1,5 +1,64 @@ const jestConfig = require( './jest.config.js' ); const jestPuppeteerConfig = require( './jest-puppeteer.config.js' ); +const babelConfig = require( '../babel.config' ); +const esLintConfig = require( '../.eslintrc.js' ); + +const useE2EBabelConfig = function( customBabelConfig ) { + const combinedBabelConfig = { + ...babelConfig, + ...customBabelConfig, + }; + + // These only need to be merged if both exist. + if ( babelConfig.plugins && customBabelConfig.plugins ) { + combinedBabelConfig.plugins = [ + ...babelConfig.plugins, + ...customBabelConfig.plugins, + ]; + } + if ( babelConfig.presets && customBabelConfig.presets ) { + combinedBabelConfig.presets = [ + ...babelConfig.presets, + ...customBabelConfig.presets, + ]; + } + + return combinedBabelConfig; +}; + +const useE2EEsLintConfig = function( customEsLintConfig ) { + let combinedEsLintConfig = { + ...esLintConfig, + ...customEsLintConfig, + }; + + // These only need to be merged if both exist. + if ( esLintConfig.extends && customEsLintConfig.extends ) { + combinedEsLintConfig.extends = [ + ...esLintConfig.extends, + ...customEsLintConfig.extends, + ]; + } + if ( esLintConfig.env && customEsLintConfig.env ) { + combinedEsLintConfig.env = { + ...esLintConfig.env, + ...customEsLintConfig.env, + }; + } + if ( esLintConfig.globals && customEsLintConfig.globals ) { + combinedEsLintConfig.globals = { + ...esLintConfig.globals, + ...customEsLintConfig.globals, + }; + } + if ( esLintConfig.plugins && customEsLintConfig.plugins ) { + combinedEsLintConfig.plugins = [ + ...esLintConfig.plugins, + ...customEsLintConfig.plugins, + ]; + } + return combinedEsLintConfig; +}; const useE2EJestConfig = function( customConfig ) { const combinedConfig = { @@ -25,4 +84,9 @@ const useE2EJestPuppeteerConfig = function( customPuppeteerConfig ) { return combinedPuppeteerConfig; }; -module.exports = { useE2EJestConfig, useE2EJestPuppeteerConfig }; +module.exports = { + useE2EBabelConfig, + useE2EEsLintConfig, + useE2EJestConfig, + useE2EJestPuppeteerConfig, +}; diff --git a/tests/e2e/env/index.js b/tests/e2e/env/index.js index 005e08a17fb..93af310e696 100644 --- a/tests/e2e/env/index.js +++ b/tests/e2e/env/index.js @@ -1,9 +1,13 @@ -// Internal dependencies +/** + * Internal dependencies + */ const babelConfig = require( './babel.config' ); const esLintConfig = require( './.eslintrc.js' ); const { jestConfig, jestPuppeteerConfig, + useE2EBabelConfig, + useE2EEsLintConfig, useE2EJestConfig, useE2EJestPuppeteerConfig, } = require( './config' ); @@ -15,6 +19,8 @@ module.exports = { esLintConfig, jestConfig, jestPuppeteerConfig, + useE2EBabelConfig, + useE2EEsLintConfig, useE2EJestConfig, useE2EJestPuppeteerConfig, getAppRoot,