在单元测试中使用 AudioContext

Question

我正在开发一个 JavaScript 库 ( https://github.com/yvesgurcan/web-midi-player ) 以在 Web 应用程序中启用 MIDI 播放。该库依赖于 Web Audio API 来创建一种播放这些 MIDI 文件的方法 ( https://github.com/yvesgurcan/web-midi-player/blob/test/src/MidiPlayer.js#L50 )。但是，我无法使用 Jest ( https://github.com/yvesgurcan/web-midi-player/blob/test/tests/midiPlayer.js )创建有意义的单元测试，因为这些测试无法访问该window对象更特别的是window.AudioContext。因此，运行我依赖的应用程序代码会AudioContext抛出与此对象不存在相关的错误，并且我实际上无法在库中测试很多东西。

我已经尝试了以下软件包来解决我的问题：jsdom, jsdom-global, 以及web-audio-test-api但这些似乎都没有注入AudioContext环境。

我认为这里的解决方案是存根/模拟，AudioContext但这听起来不像是可靠的单元测试的好解决方案。

你们建议如何测试 Web Audio API？存根是这里唯一可行的解​​决方案吗？

Answer 1

我认为这有点取决于您要测试的内容。由于您使用的是 Jest，我想您只是对测试自己代码的正确性感兴趣。在这种情况下，我建议完全模拟 Web Audio API。这不是您的责任的一部分，您可以假设它按应有的方式工作。您唯一需要测试的是您的代码是否进行了预期的调用。

模拟像 AudioContext 构造函数这样的全局可用变量总是有点棘手，但您可以允许将 AudioContextMidiPlayer作为可选参数传递到您的类中。这将使测试更容易一些，并且它还允许您的库的用户带来他们自己的 AudioContext。

我想到了这样的事情：

class MidiPlayer {

    constructor({
        // ... the other options ...
        context = new AudioContext()
    }) {
        // ...
    }

}

在测试中，您可以简单地MidiPlayer使用 fake实例化AudioContext。

const fakeAudioContext = {
    currentTime: 3,
    // ... and all the other things your code uses ...
};
const midiPlayer = new MidiPlayer({ context: fakeAudioContext });

我最近回答了一个与 Tone.js 相关的类似问题，这可能会有所帮助。基本思想是一样的。

如果您想测试您的库是否与浏览器中的 Web Audio API 配合良好，我建议您使用Karma 之类的测试运行器。它在真实浏览器中执行测试，因此可以使用所有浏览器 API。