TypeError: (window.AudioContext || window.webkitAudioContext) is not a constructor about react-mic

[jbschrades]

@hackingbeauty thanks for quick responses - this was pretty new to me.

For anyone coming upon this in the future, here is what I did to fix this.

Per this StackOverflow question - https://stackoverflow.com/questions/47978758/how-to-exclude-node-modules-from-create-react-app-testing - I tried using shallow instead of mount. Didn't work.

So I pulled just AudioContext out of this file - https://github.com/benmurden/Web-Audio-API-Mock/blob/master/AudioContext.mock.js - and added it to __mocks__/react-mic.js per this doc - https://jestjs.io/docs/en/manual-mocks#mocking-node-modules

Tests now pass.

[jbschrades]

(function() {
  'use strict';

  var AudioContext,
    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) { child[key] = parent[key]; } } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    hasProp = {}.hasOwnProperty;

  AudioContext = (function() {
    function AudioContext() {
      this.destination = new AudioDestinationNode();
      this.listener = new AudioListener();
    }

    AudioContext.prototype.activeSourceCount = 0;

    AudioContext.prototype.sampleRate = 44100;

    AudioContext.prototype.currentTime = 0;

    AudioContext.prototype.createBuffer = function(channels, length, rate) {
      return new AudioBuffer(channels, length, rate);
    };

    AudioContext.prototype.decodeAudioData = function() {};

    AudioContext.prototype.createBufferSource = function() {
      return new AudioBufferSourceNode();
    };

    AudioContext.prototype.createMediaElementSource = function(mediaElement) {
      return new MediaElementAudioSourceNode(mediaElement);
    };

    AudioContext.prototype.createMediaStreamSource = function() {
      return new MediaStreamAudioSourceNode();
    };

    AudioContext.prototype.createOscillator = function() {
      return new OscillatorNode();
    };

    AudioContext.prototype.createScriptProcessor = function(bufferSize) {
      return new ScriptProcessorNode(bufferSize);
    };

    AudioContext.prototype.createAnalyser = function() {
      return new AnalyserNode();
    };

    AudioContext.prototype.createGain = function() {
      return new GainNode();
    };

    AudioContext.prototype.createDelay = function() {
      return new DelayNode();
    };

    AudioContext.prototype.createBiquadFilter = function() {
      return new BiquadFilterNode();
    };

    AudioContext.prototype.createWaveShaper = function() {
      return new WaveShaperNode();
    };

    AudioContext.prototype.createPanner = function() {
      return new PannerNode();
    };

    AudioContext.prototype.createConvolver = function() {
      return new ConvolverNode();
    };

    AudioContext.prototype.createChannelSplitter = function() {
      return new ChannelSplitterNode();
    };

    AudioContext.prototype.createChannelMerger = function() {
      return new ChannelMergerNode();
    };

    AudioContext.prototype.createDynamicsCompressor = function() {
      return new DynamicsCompressorNode();
    };

    AudioContext.prototype.createWaveTable = function() {
      throw new Error("createWaveTable is obsolete. Use createPeriodicWave instead.");
    };

    AudioContext.prototype.createPeriodicWave = function() {
      return new PeriodicWave();
    };

    AudioContext.prototype.createJavaScriptNode = function(bufferSize) {
      return new JavaScriptNode(bufferSize);
    };

    AudioContext.prototype.createGainNode = function() {
      return this.createGain();
    };

    AudioContext.prototype.createDelayNode = function() {
      return this.createDelay();
    };

    return AudioContext;

  })();

  window.AudioContext = AudioContext;

})();

[jahirfiquitiva]

Hey @jbschrades where did you exactly put this file? I can't get it to work in my CRA app 😕

[hackingbeauty]

OK, can you fix it and issue a PR? What is your test suite?

[jbschrades]

Using jest with create-react-app. I can't get it to work and what is there looks correct. Maybe the problem is with jest?

[hackingbeauty]

Your tests shouldn’t be testing a third party NPM package...

On Thu, Mar 21, 2019 at 7:24 PM Jeff Schroeder ***@***.***> wrote: Using jest with create-react-app. I can't get it to work and what is there looks correct. Maybe the problem is with jest? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#60 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABOn7Yhn8sXlEgPz3S2hVSBSKVWyR1Dks5vZD7ggaJpZM4cB6Hj> .

-- Mark M. Muskardin

[jbschrades]

It's just a basic integration test to check if the app renders. Failing on the import statement in a component down in the tree.

import { ReactMic } from "react-mic"

I'm not testing it directly.

[hackingbeauty]

You need to mock out the component...

On Thu, Mar 21, 2019 at 7:38 PM Jeff Schroeder ***@***.***> wrote: It's just a basic integration test to check if the app renders. Failing on the import statement. import { ReactMic } from "react-mic" I'm not testing it directly. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#60 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABOn_3TinuzGfJ51sjTWmYU6fzS_jJpks5vZEIWgaJpZM4cB6Hj> .

-- Mark M. Muskardin

[Ashersam]

mocks/react-mic.js

I got stuck with same issue. Can you expose this react-mic.js file? I didn't quite get how you pulled AudioContext out of this file - https://github.com/benmurden/Web-Audio-API-Mock/blob/master/AudioContext.mock.js

[bshahrok]

(function() {
  'use strict';

  var AudioContext,
    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) { child[key] = parent[key]; } } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    hasProp = {}.hasOwnProperty;

  AudioContext = (function() {
    function AudioContext() {
      this.destination = new AudioDestinationNode();
      this.listener = new AudioListener();
    }

    AudioContext.prototype.activeSourceCount = 0;

    AudioContext.prototype.sampleRate = 44100;

    AudioContext.prototype.currentTime = 0;

    AudioContext.prototype.createBuffer = function(channels, length, rate) {
      return new AudioBuffer(channels, length, rate);
    };

    AudioContext.prototype.decodeAudioData = function() {};

    AudioContext.prototype.createBufferSource = function() {
      return new AudioBufferSourceNode();
    };

    AudioContext.prototype.createMediaElementSource = function(mediaElement) {
      return new MediaElementAudioSourceNode(mediaElement);
    };

    AudioContext.prototype.createMediaStreamSource = function() {
      return new MediaStreamAudioSourceNode();
    };

    AudioContext.prototype.createOscillator = function() {
      return new OscillatorNode();
    };

    AudioContext.prototype.createScriptProcessor = function(bufferSize) {
      return new ScriptProcessorNode(bufferSize);
    };

    AudioContext.prototype.createAnalyser = function() {
      return new AnalyserNode();
    };

    AudioContext.prototype.createGain = function() {
      return new GainNode();
    };

    AudioContext.prototype.createDelay = function() {
      return new DelayNode();
    };

    AudioContext.prototype.createBiquadFilter = function() {
      return new BiquadFilterNode();
    };

    AudioContext.prototype.createWaveShaper = function() {
      return new WaveShaperNode();
    };

    AudioContext.prototype.createPanner = function() {
      return new PannerNode();
    };

    AudioContext.prototype.createConvolver = function() {
      return new ConvolverNode();
    };

    AudioContext.prototype.createChannelSplitter = function() {
      return new ChannelSplitterNode();
    };

    AudioContext.prototype.createChannelMerger = function() {
      return new ChannelMergerNode();
    };

    AudioContext.prototype.createDynamicsCompressor = function() {
      return new DynamicsCompressorNode();
    };

    AudioContext.prototype.createWaveTable = function() {
      throw new Error("createWaveTable is obsolete. Use createPeriodicWave instead.");
    };

    AudioContext.prototype.createPeriodicWave = function() {
      return new PeriodicWave();
    };

    AudioContext.prototype.createJavaScriptNode = function(bufferSize) {
      return new JavaScriptNode(bufferSize);
    };

    AudioContext.prototype.createGainNode = function() {
      return this.createGain();
    };

    AudioContext.prototype.createDelayNode = function() {
      return this.createDelay();
    };

    return AudioContext;

  })();

  window.AudioContext = AudioContext;

})();

That did not work for me, I am still getting the same error. What is your Node and npm version?