Config options passed like jest describes are not used

[dietergeerts]

If you set options like jest actually documents, and is cleaner for the setup I have, they aren't used.

  transform: {
    '\\.(scss|css)$': [
      require.resolve('jest-css-modules-transform'),
      {
        injectIntoDOM: true,
        sassModuleName: require.resolve('sass'),
        postcssConfig: sharedPostcssConfig(null, { mode: 'none' }),
      },
    ],
  },

It would be great if this is used. I am using a mono-repo, and the config options now available make it hard to set it due to the mono-repo setup. It actually makes it quite impossible for a mono-repo without any hacking.

[sprockow]

@dietergeerts - What types of hacks did you use to get past monorepo issues? I'm running into problems with my yarn workspace set up right now.

[dietergeerts]

@sprockow

I had to add the following file to our package containing our shareable jest config:

(the custom importer is needed because of jest lacking support to test on "issuer" like webpack can do. It's the reason we will move away from jest, because it is impossible to configure it the same way like a webpack config already in the project.)

jest-css-modules-transform-config.js

// This file is needed because of https://github.com/Connormiha/jest-css-modules-transform/issues/37
// Sadly this transformation doesn't work with how config can be setup in jest.
const sharedPostcssConfig = require('@company/tools-config-postcss');
const nodeSassPackageImporter = require('node-sass-package-importer');
const path = require('path');

module.exports = {
  injectIntoDOM: true,
  sassModuleName: require.resolve('sass'),
  sassConfig: { importer: customImporter },
  postcssConfig: sharedPostcssConfig(null, { mode: 'none' }),
};

// https://github.com/maoberlehner/node-sass-magic-importer/issues/232
// Should not be needed, but the importer always checks the root node_modules
// and it can't resolve index.scss files like sass can do by default....
function customImporter(url, issuer) {
  const importer = getImporterFor(issuer);
  return importer(url, issuer) || importer(path.join(url, 'index'), issuer);
}

const importers = {};

function getImporterFor(issuer) {
  const root = /(.+?@company[\\/].+?[\\/])/.exec(issuer)[0];
  if (!(root in importers)) {
    importers[root] = nodeSassPackageImporter({ cwd: root });
  }
  return importers[root];
}

And then in each package, you need to supply the same file like this:

// This file is needed because of https://github.com/Connormiha/jest-css-modules-transform/issues/37
// Sadly this transformation doesn't work with how config can be setup in jest.
const jestCssModulesTransformConfig = require('@company/tools-config-jest/jest-css-modules-transform-config');

module.exports = jestCssModulesTransformConfig;

So the inability of this "plugin" to adhere to the jest standards of passing through config makes it impossible to define the config at 1 place and use it for each package.

[sprockow]

This is an amazing write up. Thank you. I'm going to try taking another pass at this and will post my progress on this thread.

It is a bit unfortunate that we can't reuse webpack or rollup configs. In the meantime, I'm hoping that this plugin can help avoid issues where incorrect classnames are reference by our components.