karma-webpack does not support DefinePlugin constants

[philippefutureboy]

I'm submitting a bug report

Webpack version:
3.5.2

Webpack Karma version:
2.0.9

Karma version:
2.0.0

Please tell us about your environment:
OSX 10.13.3

Browser:
Electron 1.7.5 (Chromium 58.0.3029.110)

Current behavior:
Global constants defined using webpack.DefinePlugin are undefined during the test.
I've tried to define the constants straight in the karma.conf.js file (in case it would override the webpackConfig variable, but to no avail.
I've looked up on SO for potential answers, but nothing came up.
I've updated all the karma, webpack and al. deps to their latest.
I've cloned your repository and all tests run fine.
Bug is also present with the following versions:

     "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.1",
     "karma-electron": "^5.1.1",
     "karma-mocha": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",
     "karma-webpack": "^2.0.1"

Expected/desired behavior:
Global constant defined using webpack.DefinePlugin are defined during the test :P

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

See the following gist. The package.json is only the dependencies.

If you want I can do a public fork of my private repository from the current commit (essentially SimulatedGREG/electron-vue boilerplate with a few minor changes to accommodate my dev stack). From there on, all you'd need to do is create three files and run yarn && yarn run unit to reproduce.

[DevFacts]

Hi, i also facing the issue that webpack constants are not using on karma test.
when i run the test it get fails because the variable not defined.
my webpack variables

new webpack.ProvidePlugin({
lHas: ['lodash', 'has'],
lForEach: ['lodash', 'forEach'],
lFilter: ['lodash', 'filter'],
lFind: ['lodash', 'find']
})

Error on test
ReferenceError: lHas is not defined
at

some one has solved this issue?

[JRSoftware92]

I'm encountering the exact same problem. Any intentions to fix this?

[LarsDenBakker]

Any update on this?

[johnjago]

A temporary solution that worked for me is to use the window object to mock the values that are set using DefinePlugin. I omitted irrelevant parts of the code in the snippets below. Also, it works when I initialize build in ngOnInit but does not work if I initialize build right away.

app.component.ts

declare const BUILD: string;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Build number to help us identify the deployed version
  build: string;

  ngOnInit() {
    this.build = BUILD;
  }
...

app.component.spec.ts

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(() => {
    ...

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;

    // Mock global constant defined using webpack's DefinePlugin
    window['BUILD'] = '2020.01.01.ffffffff';
  });
...

[omeryousaf]

Not sure if this helps but i was able to make a globally defined var ENV in my typings file (named custom-typings.d.ts in my project)

/custom-typings.d.ts
declare var ENV: string;

accessible to (i-e get updated by) DefinePlugin during karma execution by including the typings file path in the tsconfig's files property.

/tsconfig.json

"files": [
    "src/custom-typings.d.ts"
  ]

[codymikol]

As karma is now deprecated and coming up on EOL, we are no longer planning on any significant enhancements to this project and are instead going to focus on security updates, stability, and a migration path forward as karma's lifecycle comes to an end.

Thank you for supporting and using this project!