Material-ui: Enzyme Testing material-ui crashes

[morenoh149]

Problem description

given

import test from 'ava';
import React from 'react';
import { mount, shallow } from 'enzyme';
import setup from '../../../setup';

import componentA from 'componentA';
import FlatButton from 'material-ui/FlatButton';
import ListItem from 'material-ui/List/ListItem';
import IconMenu from 'material-ui/IconMenu';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

test('component should display 2 IconMenus', t => {
  const wrapper = mount(
    <componentA />,
    { // Workaround https://github.com/callemall/material-ui/issues/5330
      context: { navigate: () => {}, muiTheme: getMuiTheme() },
      childContextTypes: { muiTheme: React.PropTypes.object.isRequired }
    }
  );
  t.is(wrapper.find('a').children().length, 2);
});

I get the error

    in div (created by componentA)
    in componentA (created by Constructor)
    in Constructor
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by FlatButton)
    in FlatButton (created by componentA)
    in div (created by componentA)
    in div (created by Paper)
    in Paper (created by componentA)
    in RxPatientList (created by Constructor)
    in Constructor
Warning: button: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

<--- Last few GCs --->

   51203 ms: Mark-sweep 1376.5 (1435.1) -> 1376.5 (1435.1) MB, 1113.1 / 0.0 ms [allocation failure] [GC in old space requested].
   52388 ms: Mark-sweep 1376.5 (1435.1) -> 1376.5 (1435.1) MB, 1184.9 / 0.0 ms [allocation failure] [GC in old space requested].
   53518 ms: Mark-sweep 1376.5 (1435.1) -> 1378.8 (1417.1) MB, 1129.7 / 0.0 ms [last resort gc].
   54641 ms: Mark-sweep 1378.8 (1417.1) -> 1381.1 (1417.1) MB, 1122.6 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x19ac928cfb51 <JS Object>
    1: InnerArrayReduce(aka InnerArrayReduce) [native array.js:~1107] [pc=0x341f7e699604] (this=0x19ac92804381 <undefined>,bw=0x1ff27e980b59 <JS Function (SharedFunctionInfo 0x30ab8b5adba9)>,aa=0x1f91681a8699 <an Object with map 0x17288ef63899>,w=0x1f91681a8791 <JS Array[15]>,x=15,bv=2)
    2: reduce [native array.js:~1130] [pc=0x341f7ed742c3] (this=0x1f91681a8791 <JS Array[15]>,bw=0x1ff27e980b...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 5: v8::internal::Factory::NumberToString(v8::internal::Handle<v8::internal::Object>, bool) [/usr/local/bin/node]
 6: v8::internal::Object::ToString(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
 7: v8::internal::Object::ConvertToName(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
 8: v8::internal::Runtime_HasProperty(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
 9: 0x341f7e5092a7
10: 0x341f7e699604
  ✖ test/components/RxPatient/List/index.js exited due to SIGABRT

Versions

• Material-UI: 0.15.0
• React: 15.3.0
• Browser: n/a

Originally I was getting errors regarding prepareStyles, but then I added muiTheme related args to the component's context.
ref https://github.com/callemall/material-ui/issues/5330

[aarondack]

Hey @morenoh149,

A couple things I noticed based on your warnings.

Warning: Unknown proponTouchTapon <button> tag. Remove this prop from the element.

That error is associated with not having the react-tap-event-plugin to listen for touch events on your component. Do you have this in your app? Also because you are testing in isolation you are going to need this within the test file itself.

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

I just fired up your code with a sample component I've been working with and everything works normally, do you think you could share more about <componentA />?

[morenoh149]

Apologies, due to the issues I had trying to test that component I gave up. I may revist this issue in the future if I try again. At that time I could provide more details. _cc_ @sotojuan

[sotojuan]

Hi @adack123! Nice to see you here.

[mbrookes]

@morenoh149 Closing for now. Please reopen if you revisit this in the future.