Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.

[lc3t35]

After spending a bunch of time solving the initial setup with addons.js, webpack.config.js in .storybook, json in package.json so enzyme would work ...
Here is the index.js in stories/ i've built to use specs for testing react-kronos :

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { specs, describe, it } from 'storybook-addon-specifications'

import {mount} from 'enzyme';
import expect from 'expect';

import KronosDateTime from '../component/Kronos';

const onButtonPress = action('Button has been pressed!');

storiesOf('Kronos', module)
 .add('Date and Time', function() {
   const story =
       <KronosDateTime
             initDateTime={ new Date() }
             onChange={ onButtonPress }
       />;

   specs(() => describe('Date and Time', function () {
       it('Should have the current date and time', function () {
         // Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.
         let output = mount(story);
         // works fine without the previous line
         const foo = 'foo';
         expect(foo).toEqual('foo');
       });
     }));

   return story;
 });

It generates the following error in SPECIFICATIONS and console

"Date and Time - Should have the current date and time : 
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. 
You might be adding a ref to a component that was not created inside a component's `render` method, 
or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)."

Any idea ?

[lc3t35]

Work in progress here : https://github.com/lc3t35/react-kronos/tree/storybook

npm install; npm run storybook

[mthuret]

Hi @lc3t35, did you try to run the same test but without the specs addon?

I mean using only jest and enzyme for example? Did you have the same error?

[lc3t35]

I don't know how to do that.
If I remove the line "let output = mount(story);" test pass, that's all I can do.
Would try to clone my repo and give it a try ?
(Bonjour de Rennes en passant mais continuons en anglais pour nos amis étrangers ;)

[mthuret]

Bonjour de Paris :)

I'll will give it a try as soon as I can but I suspect this is more an issue between Enzyme and the < KronosDateTime/> component that you are trying to mount.

I'll have a look. In the mean time you can also try to mount the component using the Test Utilities https://facebook.github.io/react/docs/test-utils.html from facebook.