fix: change state assigment

src/rsg-components/Preview/Preview.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import noop from 'lodash/noop';
 import { transform } from 'buble';
 import PlaygroundError from 'rsg-components/PlaygroundError';
 import Wrapper from 'rsg-components/Wrapper';
 
 /* eslint-disable react/no-multi-comp */
 
+const noop = () => {};
 const compileCode = (code, config) => transform(code, config).code;
 
 // Wrap everything in a React component to leverage the state management of this component
@@ -23,10 +23,9 @@ class PreviewComponent extends Component {
 		this.setInitialState = this.setInitialState.bind(this);
 	}
 
-	// Synchronously set initial state, so it will be ready before first render
-	// Ignore all consequent calls
+	// Set the initial state, ignore all consequent calls
 	setInitialState(initialState) {
-		Object.assign(this.state, initialState);
+		this.setState(initialState);
 		this.setInitialState = noop;
 	}
 

src/rsg-components/Preview/Preview.spec.js

@@ -4,7 +4,14 @@ import Preview from '../Preview';
 /* eslint-disable no-console */
 
 const evalInContext = a =>
-	new Function('require', 'const React = require("react");' + a).bind(null, require); // eslint-disable-line no-new-func
+	// eslint-disable-next-line no-new-func
+	new Function(
+		'require',
+		'state',
+		'setState',
+		'__setInitialState',
+		'const React = require("react");' + a
+	).bind(null, require);
 const code = '<button>OK</button>';
 const options = {
 	context: {
@@ -65,3 +72,37 @@ it('should clear console on second mount', () => {
 	});
 	expect(console.clear).toHaveBeenCalledTimes(1);
 });
+
+// XXX: “Warning: Cannot update during an existing state transition” doesn’t
+// happend in the browser, only in tests
+it('should set initialState before the first render', () => {
+	const code = `
+initialState = {count:1};
+<span>{state.count}</span>
+	`;
+	const actual = mount(<Preview code={code} evalInContext={evalInContext} />, options);
+	expect(actual.html()).toMatchSnapshot();
+});
+
+it('should update state on setState', done => {
+	const code = `
+initialState = {count:1};
+setTimeout(() => state.count === 1 && setState({count:2}));
+<button>{state.count}</button>
+	`;
+	const actual = mount(<Preview code={code} evalInContext={evalInContext} />, options);
+
+	actual
+		.instance()
+		.mountNode.querySelector('button')
+		.click();
+
+	setTimeout(() => {
+		try {
+			expect(actual.html()).toMatchSnapshot();
+			done();
+		} catch (err) {
+			done.fail(err);
+		}
+	});
+});

src/rsg-components/Preview/__snapshots__/Preview.spec.js.snap

@@ -5,3 +5,27 @@ exports[`should render component renderer 1`] = `
   <div />
 </div>
 `;
+
+exports[`should set initialState before the first render 1`] = `
+
+<div>
+  <div>
+    <span>
+      1
+    </span>
+  </div>
+</div>
+
+`;
+
+exports[`should update state on setState 1`] = `
+
+<div>
+  <div>
+    <button>
+      2
+    </button>
+  </div>
+</div>
+
+`;