Cannot read property trim of undefined

[Nxt3]

This happens if I don't import NoopAnimationsModule into the spec file.

ERROR { TypeError: Cannot read property 'trim' of undefined
          at applyKeyframeAnimation (/Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:4063:46)
          at ElementAnimationStyleHandler.Object.<anonymous>.ElementAnimationStyleHandler.apply (/Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:4022:9)
          at CssKeyframesPlayer.Object.<anonymous>.CssKeyframesPlayer.init (/Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:4193:22)
          at CssKeyframesPlayer.Object.<anonymous>.CssKeyframesPlayer.play (/Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:4199:14)
          at TransitionAnimationPlayer.Object.<anonymous>.TransitionAnimationPlayer.play (/Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:3710:91)
          at /Users/nxt3/code/my_app/node_modules/@angular/animations/bundles/animations-browser.umd.js:3490:20
          at Array.forEach (<anonymous>)

How do I globally mock this so I don't have to import NoopAnimationsModule every time?

This is the culprit function:

function applyKeyframeAnimation(element, value) {
    var anim = getAnimationStyle(element, '').trim(); //right here
    var index = 0;
    if (anim.length) {
        index = countChars(anim, ',') + 1;
        value = anim + ", " + value;
    }
    setAnimationStyle(element, '', value);
    return index;
}

[devakone]

Running into the same issue. Isn't it best practices to use the NoopAnimationsModule?

[jsonberry]

Same issue here, and unfortunately importing NoopAnimationsModule isn't doing the trick.

No repo available to upload for this one.

The error:

    TypeError: Cannot read property 'trim' of undefined

      at applyKeyframeAnimation (../../packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts:79:46)
      at ElementAnimationStyleHandler.Object.<anonymous>.ElementAnimationStyleHandler.apply (../../packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts:29:5)
      at CssKeyframesPlayer.Object.<anonymous>.CssKeyframesPlayer.init (../../packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts:92:18)
      at CssKeyframesPlayer.Object.<anonymous>.CssKeyframesPlayer.play (../../packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts:99:10)
      at TransitionAnimationPlayer.Object.<anonymous>.TransitionAnimationPlayer.play (../../packages/animations/browser/src/render/transition_animation_engine.ts:1494:47)
      at ../../packages/animations/browser/src/render/transition_animation_engine.ts:1245:14
          at Array.forEach (<anonymous>)
      at TransitionAnimationEngine.Object.<anonymous>.TransitionAnimationEngine._flushAnimations (../../packages/animations/browser/src/render/transition_animation_engine.ts:1237:17)
      at TransitionAnimationEngine.Object.<anonymous>.TransitionAnimationEngine.flush (../../packages/animations/browser/src/render/transition_animation_engine.ts:836:24)
      at InjectableAnimationEngine.Object.<anonymous>.AnimationEngine.flush (../../packages/animations/browser/src/render/animation_engine_next.ts:98:66)
      at ../../packages/platform-browser/animations/src/animation_renderer.ts:107:21

The component (component A) throwing the error has a component (component B) that is using the animation framework.

The module for component B is not importing BrowserAnimationModule
The module for component A is not importing BrowserAnimationModule

component A is also using a component C, that also is using the animation framework, but the module for component C does import the BrowserAnimationModule (BrowserAnimationModule is imported at a higher app level, probably shouldn't be in module B, but it is...)

component C came first, component A specs did not throw errors until component B was added

Things tried so far:
Importing NoopAnimationModule into component A spec
Importing BrowserAnimationModule into component A spec
Importing a beer into my face hole
Importing BrowserAnimationModule into component B module
Removing BrowserAnimationModule from component C module

[splincode]

add current code to jestGlobalMocks.ts

/**
  * ISSUE: https://github.com/thymikee/jest-preset-angular/issues/170
  * Workaround: https://github.com/angular/angular/issues/24094
  */
 if (document.body.style.animation === undefined && CSSStyleDeclaration) {
   CSSStyleDeclaration.prototype.animation = '';
 }

 if (document.body.style['animation-name'] === undefined && CSSStyleDeclaration) {
   CSSStyleDeclaration.prototype['animation-name'] = '';
   CSSStyleDeclaration.prototype['animationName'] = '';
 }

 if (document.body.style['animation-duration'] === undefined && CSSStyleDeclaration) {
   CSSStyleDeclaration.prototype['animation-duration'] = '';
   CSSStyleDeclaration.prototype['animationDuration'] = '';
 }

 if (document.body.style['animation-play-state'] === undefined && CSSStyleDeclaration) {
   CSSStyleDeclaration.prototype['animation-play-state'] = '';
   CSSStyleDeclaration.prototype['animationPlayState'] = '';
 }

[wtho]

Solved by #229 (available in v7)