Using Wallaby in a Nrwl monorepo with Angular CLI and Pug

[madve2]

Issue description or question

We are using Angular CLI in an Nrwl monorepo with https://github.com/danguilherme/ng-cli-pug-loader.

Wallaby works with most of our libraries in automatic configuration mode (if we set "Root path" to the library root and manually add module.exports.setupFilesAfterEnv = ['./src/test-setup.ts']; to the jest.config.js file for the library, because Nrwl sadly omits that), except for the ones containing components, because for those, Wallaby is unable to find (or process) the pug files.

I tried creating a Wallaby config in various ways (e.g. using the autoDetect: true and trying to add pug loading below it, creating a wholly new config from scratch, etc.), but all my attempts failed for different reasons. The diagnostic report below came from the automatic configuration mode.

I think at the core of my issue might be the fact that Wallaby ignores / misunderstands this line in the jest config:

  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
    '^.+\\.(pug)$': `${__dirname}/tools/pug-jest`,
  },

But maybe it's a completely different thing. Can you please help me with that?

Wallaby diagnostics report

{
  editorVersion: 'WebStorm 2020.1.1',
  pluginVersion: '1.0.173',
  editorType: 'IntelliJ',
  osVersion: 'win32 10.0.18363',
  nodeVersion: 'v12.13.1',
  coreVersion: '1.0.891',
  config: {
    diagnostics: {},
    testFramework: { version: 'jest@24.8.0', configurator: 'jest@24.8.0', reporter: 'jest@24.8.0', starter: 'jest@24.8.0', autoDetected: true },
    filesWithCoverageCalculated: [],
    micromatch: true,
    files: [
      { pattern: '\\\\node_modules\\\\', regexp: /\\node_modules\\/, ignore: true, trigger: true, load: true },
      {
        pattern: 'dist\\\\|build\\\\|coverage\\\\|\\\\\\.cache\\\\|\\\\\\.idea\\\\|\\\\\\.vscode\\\\|\\\\\\.git\\\\|\\\\\\.gitlab\\\\',
        regexp: /dist\\|build\\|coverage\\|\\\.cache\\|\\\.idea\\|\\\.vscode\\|\\\.git\\|\\\.gitlab\\/,
        ignore: true,
        trigger: true,
        load: true
      },
      { pattern: '**/**', ignore: false, trigger: true, load: true, order: 1 },
      { pattern: '**/+(*.)+(spec).+(ts|js)?(x)', ignore: true, trigger: true, load: true }
    ],
    tests: [
      { pattern: '\\\\node_modules\\\\', regexp: /\\node_modules\\/, ignore: true, trigger: true, load: true, test: true },
      {
        pattern: 'dist\\\\|build\\\\|coverage\\\\|\\\\\\.cache\\\\|\\\\\\.idea\\\\|\\\\\\.vscode\\\\|\\\\\\.git\\\\|\\\\\\.gitlab\\\\',
        regexp: /dist\\|build\\|coverage\\|\\\.cache\\|\\\.idea\\|\\\.vscode\\|\\\.git\\|\\\.gitlab\\/,
        ignore: true,
        trigger: true,
        load: true,
        test: true
      },
      { pattern: '**/+(*.)+(spec).+(ts|js)?(x)', ignore: false, trigger: true, load: true, test: true, order: 2 }
    ],
    filesWithNoCoverageCalculated: [],
    runAllTestsInAffectedTestFile: false,
    updateNoMoreThanOneSnapshotPerTestFileRun: false,
    compilers: {},
    preprocessors: {},
    maxConsoleMessagesPerTest: 100,
    autoConsoleLog: true,
    delays: { run: 0, edit: 100, update: 0 },
    workers: { initial: 0, regular: 0, recycle: false },
    teardown: undefined,
    hints: {
      ignoreCoverage: '__REGEXP /ignore coverage|istanbul ignore/',
      ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
      commentAutoLog: '?',
      testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' }
    },
    automaticTestFileSelection: true,
    runSelectedTestsOnly: false,
    extensions: {},
    env: { type: 'node', params: {}, runner: 'C:\\Program Files\\nodejs\\node.exe', viewportSize: { width: 800, height: 600 }, options: { width: 800, height: 600 }, bundle: true },
    reportUnhandledPromises: true,
    slowTestThreshold: 75,
    lowCoverageThreshold: 80,
    loose: true,
    configCode: 'auto.detect#860565771'
  },
  fs: { numberOfFiles: 34 },
  debug: [
    '2020-05-12T10:54:54.521Z config Detected Jest.\n',
    '2020-05-12T10:54:54.528Z config Detected Angular CLI.\n',
    '2020-05-12T10:54:54.529Z config Configured Jest.\n',
    '2020-05-12T10:54:54.530Z project Wallaby Node version: v12.13.1\n',
    '2020-05-12T10:54:54.530Z project Wallaby config: D:\\git\\ng-viabill\\libs\\checkout\\liberty-steps\\card\\auto.detect\n',
    '2020-05-12T10:54:55.527Z project File cache: C:\\Users\\kis-n\\AppData\\Local\\JetBrains\\WebStorm2020.1\\wallaby\\projects\\f17f9285884e0c93\n',
    '2020-05-12T10:54:55.615Z uiService Listening port 51235\n',
    '2020-05-12T10:54:55.641Z project package.json file change detected, invalidating local cache\n',
    '2020-05-12T10:54:55.654Z workers Parallelism for initial run: 2, for regular run: 2\n',
    '2020-05-12T10:54:55.654Z workers Starting run worker instance #0\n',
    '2020-05-12T10:54:55.654Z workers Starting run worker instance #1\n',
    '2020-05-12T10:54:55.656Z workers Web server is listening at 51291\n',
    '2020-05-12T10:54:55.656Z project File cache requires some updates, waiting required files from IDE\n',
    '2020-05-12T10:54:55.706Z project Stopping process pool\n',
    '2020-05-12T10:54:55.712Z project Test run started; run priority: 3\n',
    '2020-05-12T10:54:55.713Z project Running all tests\n',
    '2020-05-12T10:54:55.715Z workers Starting test run, priority: 3\n',
    '2020-05-12T10:54:55.715Z workers Distributing tests between 2 workers\n',
    '2020-05-12T10:54:55.715Z workers Running tests in parallel\n',
    '2020-05-12T10:54:55.716Z nodeRunner Starting sandbox [worker #0, session #zozgp]\n',
    '2020-05-12T10:54:55.716Z nodeRunner Starting sandbox [worker #1, session #xt11y]\n',
    '2020-05-12T10:54:55.716Z nodeRunner Preparing sandbox [worker #0, session #zozgp]\n',
    '2020-05-12T10:54:55.716Z nodeRunner Preparing sandbox [worker #1, session #xt11y]\n',
    '2020-05-12T10:54:55.847Z workers Started run worker instance (delayed) #1\n',
    '2020-05-12T10:54:55.847Z nodeRunner Prepared sandbox [worker #1, session #xt11y]\n',
    '2020-05-12T10:54:55.847Z workers [worker #1, session #xt11y] Running tests in sandbox\n',
    '2020-05-12T10:54:55.848Z workers Started run worker instance (delayed) #0\n',
    '2020-05-12T10:54:55.849Z nodeRunner Prepared sandbox [worker #0, session #zozgp]\n',
    '2020-05-12T10:54:55.849Z workers [worker #0, session #zozgp] Running tests in sandbox\n',
    '2020-05-12T10:55:03.645Z workers [xt11y] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:03.645Z workers [xt11y] Test executed: should handle client secret\n',
    '2020-05-12T10:55:03.647Z workers [xt11y] Test executed: should return the initial state\n',
    '2020-05-12T10:55:03.659Z workers [xt11y] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:04.263Z workers [zozgp] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:04.263Z workers [zozgp] Test executed: `init` should set `loading` flag to true\n',
    '2020-05-12T10:55:04.264Z workers [zozgp] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:04.265Z workers [zozgp] Test executed: should return the correct values\n',
    '2020-05-12T10:55:04.267Z workers [zozgp] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:05.991Z workers [xt11y] Test executed: should create\n',
    '2020-05-12T10:55:05.992Z workers Failed to map the stack to user code, entry message: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug, stack: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:832:39)\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:784:21)\n' +
      '    at D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:894:21\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:421:35)\n' +
      '    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\async-test.js:86:33)\n' +
      '    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\proxy.js:145:43)\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:420:40)\n' +
      '    at Zone.Object.<anonymous>.Zone.runTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:188:51)\n' +
      '    at drainMicroTaskQueue (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:601:39)\n' +
      '    at \n',
    '2020-05-12T10:55:06.000Z workers [xt11y] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:06.827Z workers [zozgp] Test executed: should create\n',
    '2020-05-12T10:55:06.827Z workers Failed to map the stack to user code, entry message: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug, stack: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:832:39)\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:784:21)\n' +
      '    at D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:894:21\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:421:35)\n' +
      '    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\async-test.js:86:33)\n' +
      '    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\proxy.js:145:43)\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:420:40)\n' +
      '    at Zone.Object.<anonymous>.Zone.runTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:188:51)\n' +
      '    at drainMicroTaskQueue (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:601:39)\n' +
      '    at \n',
    '2020-05-12T10:55:06.836Z workers [zozgp] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:08.855Z workers [zozgp] Test executed: should create\n',
    '2020-05-12T10:55:08.855Z workers Failed to map the stack to user code, entry message: Error: Uncaught (in promise): Failed to load checkout-installments.component.pug, stack: Error: Uncaught (in promise): Failed to load checkout-installments.component.pug\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:832:39)\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:784:21)\n' +
      '    at D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:894:21\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:421:35)\n' +
      '    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\async-test.js:86:33)\n' +
      '    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\proxy.js:145:43)\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:420:40)\n' +
      '    at Zone.Object.<anonymous>.Zone.runTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:188:51)\n' +
      '    at drainMicroTaskQueue (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:601:39)\n' +
      '\n',
    '2020-05-12T10:55:08.865Z workers [zozgp] Run 4 test(s), skipped 0 test(s)\n',
    '2020-05-12T10:55:08.866Z workers [zozgp] Sandbox is responsive, closing it\n',
    '2020-05-12T10:55:09.582Z workers [xt11y] Test executed: should create\n',
    '2020-05-12T10:55:09.582Z workers Failed to map the stack to user code, entry message: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug, stack: Error: Uncaught (in promise): Failed to load confirm-stripe.component.pug\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:832:39)\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:784:21)\n' +
      '    at D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:894:21\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:421:35)\n' +
      '    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\async-test.js:86:33)\n' +
      '    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\proxy.js:145:43)\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:420:40)\n' +
      '    at Zone.Object.<anonymous>.Zone.runTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:188:51)\n' +
      '    at drainMicroTaskQueue (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:601:39)\n' +
      '    at \n',
    '2020-05-12T10:55:09.735Z workers [xt11y] Loaded unknown number of test(s)\n',
    '2020-05-12T10:55:09.736Z workers [xt11y] Test executed: should be able to proceed with Stripe\n',
    '2020-05-12T10:55:11.772Z workers [xt11y] Test executed: should raise an init event when Bambora EU does so\n',
    '2020-05-12T10:55:11.772Z workers Failed to map the stack to user code, entry message: Error: Uncaught (in promise): Failed to load amount-currency.component.pug, stack: Error: Uncaught (in promise): Failed to load amount-currency.component.pug\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:832:39)\n' +
      '    at resolvePromise (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:784:21)\n' +
      '    at D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:894:21\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:421:35)\n' +
      '    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\async-test.js:86:33)\n' +
      '    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\proxy.js:145:43)\n' +
      '    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:420:40)\n' +
      '    at Zone.Object.<anonymous>.Zone.runTask (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:188:51)\n' +
      '    at drainMicroTaskQueue (D:\\git\\ng-viabill\\node_modules\\zone.js\\dist\\zone.js:601:39)\n' +
      '    at\n',
    '2020-05-12T10:55:11.774Z workers [xt11y] Test executed: should be able to proceed with Bambora EU\n',
    '2020-05-12T10:55:11.782Z workers [xt11y] Run 7 test(s), skipped 0 test(s)\n',
    '2020-05-12T10:55:11.784Z workers [xt11y] Sandbox is responsive, closing it\n',
    '2020-05-12T10:55:11.785Z workers Merging parallel test run results\n',
    '2020-05-12T10:55:11.785Z project Test run finished\n',
    '2020-05-12T10:55:11.786Z project Processed console.log entries\n',
    '2020-05-12T10:55:11.786Z project Processed loading sequences\n',
    '2020-05-12T10:55:11.787Z project Processed executed tests\n',
    '2020-05-12T10:55:11.788Z project Processed code coverage\n',
    '2020-05-12T10:55:11.811Z project Test run result processed and sent to IDE\n'
  ]
}

[smcenlly]

Can you confirm whether npx jest works for you when you run it from the directory you have selected as your automatic configuration root (i.e. either <project directory>, or the <custom directory> you selected)?

If npx jest does not work from the command line, then Wallaby automatic configuration will not work either. For Nx/Nrwl mono-repos, if you are using the default Jest runner, then the best first step is to ensure that npx jest is working from the command-line in order to use Wallaby automatic configuration.

We tried to create an Angular Nx workspace that uses https://github.com/danguilherme/ng-cli-pug-loader but couldn't find instructions to configure and weren't sure how you then went on to configure jest.

Can you please provide us with instructions to create a similar workspace to yours or else provide us with a sample repo so we can see how everything is configured outside of Wallaby?

[madve2]

Thanks for the pointer. Indeed, while my tests work with ng test library-name from the monorepo root, running npx jest from the library folder fails. I'll try to fix that then, first, or create a sample repo with a minimal repro in case I get stuck.

[smcenlly]

I'll close this issue for now. If you have trouble or need assistance, you may respond to this issue and we can re-open, or else please create a new issue.

[madve2]

Hello again,

I got a bit stuck with this, unfortunately, so I have created a sample repo: https://github.com/madve2/nrwl-ng-pug

• It is a minimal Nrwl workspace with an Angular app and a lib, with Pug added to the mix. (You can ignore the app, only the lib is relevant in this case.)
• After cloning it, run yarn install (on Windows, probably you should run this and the following commands from WSL)
• The library contains a component, which calls Stripe (I wasn't sure if Stripe specifically is important, probably not, but I needed a test case anyway and it was a good one).
• npx ng test ng-pug-sample-lib works (from the repo root)
• Running npx jest from the library root (/libs/ng-pug-sample-lib) fails, seemingly because of the Pug setup (which is referenced in the root jest.config.js file and the postinstall script in package.json)

I know this isn't fully Wallaby-specific at this point (other than the fact that I wouldn't mind npx jest not working if I could make Wallaby somehow do what ng test does :) ), but if you could help me find out what's wrong I'd greatly appreciate it. Thanks!

[smcenlly]

Thanks for the sample repo. We created a pull request to update your jest configuration to support running npx jest and Wallaby from the project root.

Unfortunately there's still something wrong with the configuration that won't allow you to run Wallaby on a specific folder. We figured running on the project root would be OK but if you need it to run only on a specific lib/app, let us know and we'll take another look.

In terms of what we did to get everything working, we first applied the suggestion from our docs for how to run Wallaby on your entire Nx/Nrwl monorepo. After that, we still had some problems and had to update the jest configuration (which was pretty straight forward). The final challenge that we had was that Jest was now working from the command-line but ng test no longer worked. We had to remove parts of the config by trial and error until we discovered what wasn't working and you will see in the base jest.config.js in your repo root that we detect whether the configuration is being run from ng or not.

[madve2]

Thanks for the PR, I'll try to apply it to our "main" project and get back to you 👍

[madve2]

Sorry I haven't been able to answer sooner, we have a huge workspace with a lot of projects, but during the past few days I was able to slowly update our configs and so far everything works well with your suggestions applied. I have also found that if I really want Wallaby to run only on a specific library/app, I can use the projects key in the root jest.config to specify which projects I want to test, and then run Wallaby from the project root.

Thanks again for your help with this, I'm so glad we were able to get it working in the end!