esModule-option.test.js

import path from "path";

import MiniCssExtractPlugin from "mini-css-extract-plugin";

import {
  compile,
  getCompiler,
  getErrors,
  getExecutedCode,
  getModuleSource,
  getWarnings,
} from "./helpers/index";

describe('"esModule" option', () => {
  it("should work when not specified", async () => {
    const compiler = getCompiler("./es-module/source.js");
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  it('should work with a value equal to "true"', async () => {
    const compiler = getCompiler("./es-module/source.js", { esModule: true });
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  it('should work with a value equal to "true" and the "mode" value equal to "local"', async () => {
    const compiler = getCompiler("./es-module/source.js", {
      esModule: true,
      modules: "local",
    });
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  it('should work with a value equal to "true" and the "mode" value equal to "global"', async () => {
    const compiler = getCompiler("./es-module/source.js", {
      esModule: true,
      modules: "global",
    });
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  it('should work with a value equal to "true" and the "mode" value equal to "pure"', async () => {
    const compiler = getCompiler("./es-module/source.js", {
      esModule: true,
      modules: "pure",
    });
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  it('should work with a value equal to "false"', async () => {
    const compiler = getCompiler("./es-module/source.js", { esModule: false });
    const stats = await compile(compiler);

    expect(getModuleSource("./es-module/source.css", stats)).toMatchSnapshot(
      "module",
    );
    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
      "result",
    );
    expect(getWarnings(stats)).toMatchSnapshot("warnings");
    expect(getErrors(stats)).toMatchSnapshot("errors");
  });

  const styleLoaderTests = [
    {
      localLoaderMode: "commonjs",
      extractLoaderMode: "commonjs",
    },
    {
      localLoaderMode: "esModule",
      extractLoaderMode: "esModule",
    },
    {
      localLoaderMode: "commonjs",
      extractLoaderMode: "esModule",
    },
    {
      localLoaderMode: "esModule",
      extractLoaderMode: "commonjs",
    },
  ];

  for (const test of styleLoaderTests) {
    it(`should work with ${test.localLoaderMode} css-loader + ${test.extractLoaderMode} style-loader`, async () => {
      const compiler = getCompiler(
        test.localLoaderMode === "commonjs"
          ? "./es-module/template/index-commonjs.js"
          : "./es-module/template/index.js",
        {},
        {
          output: {
            path: path.resolve(__dirname, "./outputs"),
            filename: "[name].bundle.js",
            chunkFilename: "[name].chunk.js",
            publicPath: "/webpack/public/path/",
            libraryTarget: "commonjs2",
          },
          module: {
            rules: [
              {
                test: /\.css$/i,
                use: [
                  {
                    loader: "style-loader",
                    options: {
                      esModule: test.extractLoaderMode === "esModule",
                    },
                  },
                  {
                    loader: path.resolve(__dirname, "../src"),
                    options: {
                      esModule: test.localLoaderMode === "esModule",
                      modules: true,
                    },
                  },
                ],
              },
            ],
          },
        },
      );
      const stats = await compile(compiler);

      expect(getWarnings(stats)).toMatchSnapshot("warnings");
      expect(getErrors(stats)).toMatchSnapshot("errors");
    });
  }

  const miniCssExtractPluginTests = [
    {
      localLoaderMode: "commonjs",
      extractLoaderMode: "commonjs",
    },
    {
      localLoaderMode: "esModule",
      extractLoaderMode: "esModule",
    },
    {
      localLoaderMode: "commonjs",
      extractLoaderMode: "esModule",
    },
    {
      localLoaderMode: "esModule",
      extractLoaderMode: "commonjs",
    },
  ];

  for (const test of miniCssExtractPluginTests) {
    it(`should work with ${test.localLoaderMode} css-loader + ${test.extractLoaderMode} mini-css-extract-plugin`, async () => {
      const compiler = getCompiler(
        test.localLoaderMode === "commonjs"
          ? "./es-module/template/index-commonjs.js"
          : "./es-module/template/index.js",
        {},
        {
          module: {
            rules: [
              {
                test: /\.css$/i,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      esModule: test.extractLoaderMode === "esModule",
                    },
                  },
                  {
                    loader: path.resolve(__dirname, "../src"),
                    options: {
                      esModule: test.localLoaderMode === "esModule",
                      modules: true,
                    },
                  },
                ],
              },
            ],
          },
          plugins: [
            new MiniCssExtractPlugin({
              filename: "[name].css",
              chunkFilename: "[id].css",
            }),
          ],
        },
      );
      const stats = await compile(compiler);

      expect(
        getExecutedCode("main.bundle.js", compiler, stats),
      ).toMatchSnapshot("result");
      expect(getWarnings(stats)).toMatchSnapshot("warnings");
      expect(getErrors(stats)).toMatchSnapshot("errors");
    });
  }
});