oddbird / true

Sass unit tests
http://oddbird.net/true/
BSD 3-Clause "New" or "Revised" License
683 stars 46 forks source link

Provide a way to register with require.extensions #224

Open romaricpascal opened 2 years ago

romaricpascal commented 2 years ago

It's be great if the sass-true package was providing a way to register the .scss into Node's require.exensions. It'd allow test tools like Mocha (Jasmine too) to require scss files directly, compiling them on the fly into a bit of JavaScript running sass-true.

This is what I have working for sass-true 6.1, but looking at the current main branch, I believe it'll need some adjustments:

/**
 * Creates a test script that runs sass-true
 * on the given file.
 * @param {string} filename
 * @returns string
 */
function toTestScript(filename) {
  return `
  const runner = require('${__filename}').runner
  runner('${filename}',{describe, it})
  `
}

const { runSass } = require('sass-true')
const fs = require('fs')
const path = require('path')

/**
 * Runs sass-true on the given SCSS file, automatically importing it
 * and configuring a non-verbose terminal output
 * @param {String} filename
 * @param {Function} options.describe
 */
function runner(filename, { describe, it }) {
  const data = fs.readFileSync(filename, { encoding: 'utf8' })
  const TRUE_SETUP = '$true-terminal-output: false; @import \'true\';'

  runSass({
    data: TRUE_SETUP + data,
    includePaths: [path.dirname(filename)]
  }, { describe, it })
}

module.exports = {
  runner,
  transform: toTestScript
}

require.extensions['.scss'] = function (module, filename) {
  return module._compile(toTestScript(filename), filename)
}

Then the following .mocharc.js file allows Mocha to load the SCSS files:

module.exports = {
  // Make Mocha look for `.test.scss` files
  'spec': "scss/**/*.{test,spec}.scss",
  // Compile them into JS scripts running `sass-true`
  require: 'sass-true/register',
  // Watch any changes in the scss folder so the tests
  // run again when saving any scss file (test or actual code)
  'watch-files': "scss/**/*",
}

It'd work for Jasmine too with:

const path = require('path')

module.exports = {
  spec_dir: 'scss', /* eslint-disable-line camelcase */

  // Make Mocha look for `.test.scss` files
  spec_files: ['**/*.{test,spec}.scss'], /* eslint-disable-line camelcase */

  // Compile them into JS scripts running `sass-true`
  requires: ['sass-true/register'],

  // Ensure we use `require` so that the require.extensions works
  // as `import` completely bypasses it
  jsLoader: 'require'
}

And I think the toTestScript function could be used for making a Jest transform.

The runner function is only necessary for two things: importing true in the files automatically and configuring the terminal output. My example is obviously opinionated, but if sass-true were to provide these as options for runSass that'd save the need for that runner function altogether.

It'd be great if the register file was provided directly by the sass-true package (a la @babel/register), but maybe documentation may be enough too.

jgerigmeyer commented 2 years ago

@romaricpascal Interesting idea! While I'm a bit hesitant seeing that node's require.extensions is officially deprecated, it does seem like this would be useful -- and other projects are still using similar workarounds. I might lean toward using something like pirates instead of the require.extensions API directly.

I probably won't get to this for awhile, but I'd be open to reviewing a PR that adds this functionality to True. Feel free to base it off of the v6.1.0 release.

@mirisuzanne What do you think of this idea?

mirisuzanne commented 2 years ago

@jgerigmeyer This is outside my expertise, so I'm not sure what the tradeoffs are. Feel free to handle the JS API in whatever ways make sense to you. :)