web Unknown mocha options cause tests to hang

I'm trying to run some code before my tests using the mocha require option, which I thought maybe I could do in the config file as mentioned by https://modern-web.dev/docs/test-runner/test-frameworks/mocha/#configuring-mocha-options.

I've found that when I add a require option, my tests just hang and do not execute, eventually timing out. Similarly, if I add a foo option, I get the same thing, whereas another known option like ui: 'tdd' works just fine.

Apr 25 '21 03:04 IanVS

I've learned that I can't require in this interface. It might be worth pointing out that the config options available are those for the browser version of mocha, as pointed out in https://mochajs.org/#browser-configuration. It would probably also be good to try/catch for errors that mocha throws when configuring with an option it doesn't understand, which seems to be TypeError: self[opt] is not a function, as can be seen in this sandbox: https://codesandbox.io/s/competent-bush-6f7pd?file=/src/App.js

Apr 25 '21 04:04 IanVS

We pass the options to mocha itself, the error is thrown inside mocha. I don't think we can handle the error, and it should be mocha itself that guards against it.

Apr 27 '21 16:04 LarsDenBakker

Mocha does throw an error, but it is swallowed by wtr, which eventually just times out.

Apr 27 '21 17:04 IanVS

I'm also experiencing this.

@IanVS Have you figured out how to add global fixtures? Adding "mocha": { "require": "./fixture.cjs" } to package.json doesn't seem to work.

Apr 30 '21 20:04 DumbledoreD

Yes, I add them to my testRunnerHtml now, which seems to work okay. I added some details of what I'm doing in a comment here: https://github.com/facebook/jest/issues/11065#issuecomment-826254792

Apr 30 '21 20:04 IanVS

Yes, I add them to my testRunnerHtml now, which seems to work okay. I added some details of what I'm doing in a comment here: facebook/jest#11065 (comment)

Thanks a lot! Didn't know there is a testRunnerHtml option. Works like a charm!

Apr 30 '21 20:04 DumbledoreD

@DumbledoreD Could you please share how you configured global fixtures? I see that mocha.setup will not work in browser

May 20 '21 09:05 EvgeniyLoginov

@DumbledoreD Could you please share how you configured global fixtures? I see that mocha.setup will not work in browser

I followed IanVS's solution https://github.com/facebook/jest/issues/11065#issuecomment-826254792. In short, use script tags in testRunnerHtml. Does it not work for your use case?

May 20 '21 18:05 DumbledoreD

@DumbledoreD I've also used testRunnerHtml, I just didn't know how to configure hook inside the script. Eventually I came up with something like

window['__WTR_CONFIG__'].testFrameworkConfig.rootHooks = {
  beforeAll() {
    //setup code here
  },
}

May 21 '21 06:05 EvgeniyLoginov

@EvgeniyLoginov that's cool. I added a script after my script with src="${testFramework}", and at that point it's possible to call beforeAll from mocha. I guess either way will work.

May 21 '21 11:05 IanVS

Oh interesting, I see now why adding rootHooks to the config file doesn't work. The values there are stringified and added to the window (https://github.com/modernweb-dev/web/blob/6c5893cc79c91e82f9aec35d3011c6e33ce878cc/packages/test-runner-core/src/server/plugins/serveTestRunnerHtmlPlugin.ts#L93), so any functions are lost. That's unfortunate, since I like the idea of specifying the rootHooks in the config file much better than either of our other approaches.

In the meantime, I've switched to using your approach, since it seems to be more reliable with safari. I now have this in my web-test-runner.config file:

module.exports = {
  testRunnerHtml: (testFramework) => `<html>
    <body>
    <script type="module" src="/test-setup/globals.js"></script>
    <script type="module" src="/test-setup/mocha-hooks.js"></script>
    <script id='uit' type="module" src="${testFramework}"></script>
    </body>
  </html>`,
  testFramework: {
    config: {
      rootHooks: {
        // We can't actually add them here, since WTR serializes this config to a string.
        // But we can create the structure and then modify it in our mocha-hooks.js file
      },
    },
  },
};

And then in mocha-hooks.js:

// HACK:  WTR serializes the config to a string, so we can't define our hooks in
// web-test-runner.config.cjs.  Instead, we'll modify it from the global window here.
(window as any).__WTR_CONFIG__.testFrameworkConfig.rootHooks = {
  afterEach() {
    cleanup();
  },
};

May 26 '21 21:05 IanVS

@DumbledoreD I've also used testRunnerHtml, I just didn't know how to configure hook inside the script. Eventually I came up with something like
window['__WTR_CONFIG__'].testFrameworkConfig.rootHooks = {
  beforeAll() {
    //setup code here
  },
}

Many thanks - works like a charm and I am even convinced that this is a feature haha

Jan 31 '25 19:01 RobbyRabbitman