Overriding Mochas behavior

[tomitrescak]

Hi, I wrote a package that allows snapshot testing within mocha. This package overrides the describe and it functionality to remember the current test path. This path is then stored in a global variable, where it is picked up by my package and used to find a current snapshot.

Yet, I cannot make this work in Wallaby at all, no matter what I tried, the describe and it functions are always used from mocha. Would you have any advice on how can I approach this? Thanks!

[ArtemGovorov]

Sounds awesome. I'm not sure why it doesn't work, but I'm happy to have a look and help out, if you share a sample with one test that is using your package where mocha is working and wallaby is not working.

[tomitrescak]

@ArtemGovorov thanks for the rapid answer. What needs to be achieved is following (wallaby config):

module.exports = function (wallaby) {
  return {
    files: [
      "src/client/**/*.ts*",
    ],
    tests: [
      "src/**/*.test.ts*"
    ],
    compilers: {
      '**/*.ts?(x)': wallaby.compilers.typeScript({ jsx: 'react', module: 'commonjs' })
    },
    env: {
      type: "node",
      runner: "node"
    },
    workers: {
       initial: 1,
       regular: 1
     },
    delays: {
      run: 300
    },
    testFramework: "mocha",
    setup: function (wallaby) {
      testName = [];
      const origDescribe = global.describe; // origDescribe is null ;(
  global.describe = (name, impl) => {
    testName.push(name);
    try {
      origDescribe(name, impl);
    } catch (ex) {
      throw ex;
    } finally {
      testName.pop();
    }
  };
  const origIt = global.it;
  global.it = (name, impl) => {
    testName.push(name);
    try {
      origIt(name, impl);
    } catch (ex) {
      throw ex;
    } finally {
      testName.pop();
    }
  };
    }
  };
};

What was more shocking for me that calling function replaceTestHelpers() within the test file still would not override helper functions

testName = [];
function replaceTestHelpers() {
 const origDescribe = global.describe; // origDescribe is null ;(
  global.describe = (name, impl) => {
    testName.push(name);
    try {
      origDescribe(name, impl);
    } catch (ex) {
      throw ex;
    } finally {
      testName.pop();
    }
  };
  const origIt = global.it;
  global.it = (name, impl) => {
    testName.push(name);
    try {
      origIt(name, impl);
    } catch (ex) {
      throw ex;
    } finally {
      testName.pop();
    }
}

[ArtemGovorov]

Does this approach work in plain mocha (without wallaby)? I was under impression that it doesn't. Mocha provides the pre-require hook to change the context (including it/describe):

    setup: (wallaby) => {
      var mocha = wallaby.testFramework;

      mocha.suite.on('pre-require', function (context) {
        var originalIt = context.it;
        context.it = function (name) {
          console.log(name); // or whatever you need to do here
          return originalIt.apply(this, arguments);
        };
      });
    }

It may be better if you first get the working solution for plain mocha (without wallaby), it should be pretty straightforward to make it work for wallaby after that.

[tomitrescak]

Artem, thanks for your help, that solved it. I had my version working in broswer, there the overrides were easier.

One last thing before I can publish this package. I would like to display nice diff in color between two snapshots. But no matter what I do, the results are coming always in white in VC Code console. I am using 'chalk'. What do I have to do to have it in color?

Very simplified version is here (it is an extension of jest matcher that returns 'message' in string):

const chalk = require('chalk')
if (expected != ser) {
        const diff = DiffViewSimple.compare(expected, ser);
        return {
          message: chalk.red(`Snapshots do not match (${expected.length}/${ser.length}) : ` + diff),
          pass: false
        }
      }

[ArtemGovorov]

The chalk module creates ANSI colour sequences and VS Code output doesn't support it.

Having said that, wallaby is following mocha/chai conventions to automatically display the nicely coloured diffs. If your module throws an error with the showDiff, actual and expected properties, then wallaby automatically shows the nice diff and you don't need to use anything else. For example, if I just throw an error from the test with the properties set, see what happens:

[ArtemGovorov]

BTW, have you seen the https://github.com/suchipi/chai-jest-snapshot module? It works with wallaby/mocha, displays the nice diffs and everything.

[tomitrescak]

Thanks! Got it all working now! Yes I know of other solutions as well, but all others are either no compatible with jest, or need extra parameters. I wanted something that works back and forth with jest as that's what I'm using with CI, and others. SO I'm using jest matcher, jest cli, jest mocks, jest snapshots ... I grew tired of using all the different technologies, having just one global package feel good.

I am using mocha only because it runs like lighting in wallaby, while jest is paaaaainfully slow (in comparison).

Once again, big thanks!