test: add tests for enforce esm feature

Author: vankop

package-lock.json

@@ -75,6 +75,7 @@
     "prettier": "^1.19.1",
     "standard-version": "^7.0.1",
     "webpack": "^4.41.4",
+    "webpack-5": "npm:[email protected]",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"
   },

package.json

@@ -3,11 +3,8 @@ import NativeModule from 'module';
 import path from 'path';
 
 import loaderUtils from 'loader-utils';
-import NodeTemplatePlugin from 'webpack/lib/node/NodeTemplatePlugin';
+import webpack from 'webpack';
 import NodeTargetPlugin from 'webpack/lib/node/NodeTargetPlugin';
-import LibraryTemplatePlugin from 'webpack/lib/LibraryTemplatePlugin';
-import SingleEntryPlugin from 'webpack/lib/SingleEntryPlugin';
-import LimitChunkCountPlugin from 'webpack/lib/optimize/LimitChunkCountPlugin';
 import validateOptions from 'schema-utils';
 
 import CssDependency from './CssDependency';
@@ -84,13 +81,15 @@ export function pitch(request) {
     outputOptions
   );
 
-  new NodeTemplatePlugin(outputOptions).apply(childCompiler);
-  new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
+  new webpack.node.NodeTemplatePlugin(outputOptions).apply(childCompiler);
+  new webpack.LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
   new NodeTargetPlugin().apply(childCompiler);
-  new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply(
+  new webpack.SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply(
+    childCompiler
+  );
+  new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }).apply(
     childCompiler
   );
-  new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler);
 
   childCompiler.hooks.thisCompilation.tap(
     `${pluginName} loader`,
@@ -210,7 +209,7 @@ export function pitch(request) {
           locals
         )};`
       : esModule
-      ? `export {};`
+      ? `\nexport {};`
       : '';
 
     let resultSource = `// extracted by ${pluginName}`;

src/loader.js

@@ -0,0 +1,3 @@
+import webpack from 'webpack-5';
+
+export default webpack;

test/__mocks__/webpack.js

@@ -0,0 +1,3 @@
+import NodeTargetPlugin from 'webpack-5/lib/node/NodeTargetPlugin';
+
+export default NodeTargetPlugin;

test/__mocks__/webpack/lib/node/NodeTargetPlugin.js

@@ -0,0 +1,48 @@
+import { getCompiler, compile } from './helpers';
+
+jest.mock('webpack');
+jest.mock('webpack/lib/node/NodeTargetPlugin');
+
+it('should enforce esm for empty module with options.esModule', async (done) => {
+  const compiler = getCompiler(
+    './esm.js',
+    { esModule: true },
+    {
+      mode: 'production',
+      optimization: { minimize: false },
+    }
+  );
+  const stats = await compile(compiler);
+  expect(stats.hasErrors()).toBe(false);
+
+  const { chunks } = stats.toJson();
+  const [chunk] = chunks;
+
+  expect(JSON.stringify(chunk.sizes)).toMatchInlineSnapshot(
+    // javascript size is mostly a webpack info comments
+    `"{\\"javascript\\":73,\\"unknown\\":23,\\"runtime\\":0}"`
+  );
+  done();
+});
+
+it('should keep module without options.esModule', async (done) => {
+  const compiler = getCompiler(
+    './esm.js',
+    {},
+    {
+      mode: 'production',
+      optimization: { minimize: false },
+    }
+  );
+  const stats = await compile(compiler);
+  expect(stats.hasErrors()).toBe(false);
+
+  const { chunks } = stats.toJson();
+  const [chunk] = chunks;
+
+  expect(JSON.stringify(chunk.sizes)).toMatchInlineSnapshot(
+    // javascript size is mostly a webpack info comments
+    `"{\\"javascript\\":62,\\"unknown\\":23,\\"runtime\\":657}"`
+  );
+  done();
+});

test/enforce-esm.test.js

@@ -0,0 +1 @@
+import "./simple.css";

test/fixtures/esm.js

@@ -6,9 +6,11 @@ import { createFsFromVolume, Volume } from 'memfs';
 import MiniCssExtractPlugin from '../../src';
 
 export default (fixture, loaderOptions = {}, config = {}) => {
+  const { outputFileSystem, ...cnfg } = config;
+
   const fullConfig = {
     mode: 'development',
-    devtool: config.devtool || false,
+    devtool: cnfg.devtool || false,
     context: path.resolve(__dirname, '../fixtures'),
     entry: path.resolve(__dirname, '../fixtures', fixture),
     output: {
@@ -40,16 +42,18 @@ export default (fixture, loaderOptions = {}, config = {}) => {
         chunkFilename: '[id].css',
       }),
     ],
-    ...config,
+    ...cnfg,
   };
 
   const compiler = webpack(fullConfig);
 
-  if (!config.outputFileSystem) {
-    const outputFileSystem = createFsFromVolume(new Volume());
+  if (!outputFileSystem) {
+    const outputFS = createFsFromVolume(new Volume());
     // Todo remove when we drop webpack@4 support
-    outputFileSystem.join = path.join.bind(path);
+    outputFS.join = path.join.bind(path);
 
+    compiler.outputFileSystem = outputFS;
+  } else {
     compiler.outputFileSystem = outputFileSystem;
   }