[Bug Report] Test environment error: Cannot read property 'toLowerCase' of undefined

[huangbuyi]

Mint UI version

2.2.13

OS/Browsers version

Jest

Vue version

2.5.10

Reproduction Link

http://codepen.com/testevironment/don't/use/it

Steps to reproduce

1. Install and config Jest
2. Import components from mint-ui in file need test
3. Import the file in test file

What is Expected?

Test without error

What is actually happening?

Get error: Cannot read property 'toLowerCase' of undefined.

I think the error was product by follow code. In test environment, user agent info, such as document.documentElement.style are empty, so engine would be undefined. And then, undefined engine lead to undefined vendorPrefix, read toLowerCase from it lead to error.

  var docStyle = document.documentElement.style;
  var engine;
  var translate3d = false;

  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
    engine = 'presto';
  } else if ('MozAppearance' in docStyle) {
    engine = 'gecko';
  } else if ('WebkitAppearance' in docStyle) {
    engine = 'webkit';
  } else if (typeof navigator.cpuClass === 'string') {
    engine = 'trident';
  }

  var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];

  var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];

  var helperElem = document.createElement('div');
  var perspectiveProperty = vendorPrefix   'Perspective';
  var transformProperty = vendorPrefix   'Transform';
  var transformStyleName = cssPrefix   'transform';
  var transitionProperty = vendorPrefix   'Transition';
  var transitionStyleName = cssPrefix   'transition';
  var transitionEndProperty = vendorPrefix.toLowerCase()   'TransitionEnd';

[wjsljc]

https://www.cnblogs.com/wangyanhua95/p/7414115.html You need to get this off import Vue from 'vue' import App from './App' import { Button, Indicator } from 'mint-ui' import 'mint-ui/lib/style.css'

Vue.component(Button.name, Button) // Vue.component(Indicator.name, Indicator) dont need

[JerryYuanJ]

I solve this myself by doing this :

if (!('WebkitAppearance' in document.documentElement.style)) { document.documentElement.style['WebkitAppearance'] = '' } put this code in your setup.js file in jest folder and it works.

[dinglittle]

when I use the "@vue/test-utils": "1.0.0-beta.29", run test , failed , show message :

TypeError: Cannot read property 'toLowerCase' of undefined

what can I do , please help

[JerryYuanJ]

@dinglittle You need to find a way to set this undefined field a value, try the way I did above !

[demonskp]

https://www.cnblogs.com/wangyanhua95/p/7414115.html You need to get this off import Vue from 'vue' import App from './App' import { Button, Indicator } from 'mint-ui' import 'mint-ui/lib/style.css'

Vue.component(Button.name, Button) // Vue.component(Indicator.name, Indicator) dont need

This is really useful. This solved my problem.

[cqupt-yifanwu]

I solve this myself by doing this :

if (!('WebkitAppearance' in document.documentElement.style)) { document.documentElement.style['WebkitAppearance'] = '' } put this code in your setup.js file in jest folder and it works.

it is worked 2 me