Allow initializing plugin/loader tests

[bebraw]

To make it easier to develop plugins/loaders against webpack-defaults, there should be some way to generate initial tests as a starting point.

[joshwiens]

I could have sworn @michael-ciniawsky already did that.

It started with something to the effect of ..

import { name as PROJECT_NAME } from '../package.json';
import loader from '../src';

describe(PROJECT_NAME, () => {
  test('should export the loader', (done) => {
    expect(loader).toBeInstanceOf(Function);
    done();
  });
});

[bebraw]

Ok, cool. So maybe it's more about making this more apparent.

[michael-ciniawsky]

I try to get the 'experiments' I did together in a terse manner for discussion and open a PR with MVP capabilities. There will be still work required I guess :)

|– test
| |– __snapshots__ (or expect, if snapshots aren't the right thing)
| |– fixtures
| |– ...
| |– option1.test.js (Option 1)
| |– index.test.js (Basic)
| |– webpack.js (Compiler/Runner Helper)
|– src
|– ...

webpack.js

import path from 'path';

import webpack from 'webpack';
// import memoryFS  from 'memory-fs';

export function compiler (fixture, options) {
  const config = {
    target: 'node',
    devtool: 'sourcemap',
    context: path.resolve(__dirname),
    resolve: { extensions: ['.js'] },
    entry: `./${fixture}`,
    output: {
      path: path.resolve(__dirname, 'expect'),
      filename: `${path.basename(file)}.bundle.js`,
    },
    module: {
      rules: [
        {
          test: options.test,
          use: [
            {
              loader: path.resolve('dist', 'cjs.js'),
              options: options.loader || {}
            }
          ]
        }
      ]
    },
    plugins: options.plugins || []
  }

  if (!options.type) options.type = 'loader'

  return new Promise((resolve, reject) => {
    return webpack(config, (err, stats) => {
      if (err) reject(err);

      const result = options.type === 'loader'
        ? {
          err: stats.compilation.errors[0],
          src: stats.compilation.modules[0]._source._value,
          map: stats.compilation.modules[0]._source._sourceMap
        }
        : stats.compilation;

      resolve(result);
    });
  });
}

TODO

• Base webpack.config.js
• MemoryFS Intregration
• Better Stats Parsing
• Snapshots Integration

⚠️ Code Coverage

[x].test.js

import fixture from './fixtures/[name].[ext]'
import { compiler } from './webpack'

import loader from '..src/'

test('Loader - Basic', () => {
   expect(loader).toBeInstanceOf(Function)

   // Loader Options etc.
   const config = { 
     test: /\.ext$/,
     loader: { options: {...} }
     plugins: [] // if plugins are needed to be tested e.g with ETWP/UglifyJSPlugin
   }

   compiler(fixture, config)
     .then((result) => {
         expect(result.map).toContain(/\/* #sourceMappingURL=... *\//)
         expect(result.map).toMatchSnapshot()

         expect(result.src.toEqual(42)   
         expect(result.src).toMatchSnapshot()
     })
     .catch((err) => {
        expect(err).toThrow(/message/)
        expect(err).toThrowErrorMatchingSnapshot()
     })
})

[joshwiens]

@TheLarkInn Setup a example loader & @michael-ciniawsky has already done quite a bit of work on the testing boilerplate in the past.

Perhaps we can find a happy medium between the above & https://github.com/TheLarkInn/example-webpack-loader

[michael-ciniawsky]

I have a test-loader && test-webpack-plugin repo locally based on defaults and an iteration of the code posted above, but it lacks docs for structuring and general how-to's for errors, warnings, assets, loader<err, result, map, meta> testing (no big deal though). I can refine and push these later today and try to integrate the initial setup into defaults for discussion. A few things will need triage e.g (test/stats-helpers) into their own lib e.g (test-utils, stats-utils) ? The reason here is, that the compilation {Object} is likely subject to change over time and the helpers maybe better version controlled then. I will also take a look at https://github.com/TheLarkInn/example-webpack-loader and cherrypick eventual gems from there 😛