How to use inferno-create-class - 10 common examples

it('#85 Should handle state changing in constructors', function() {
    const a = mobx.observable.box(2);
    const Child = observer(
      createClass({
        displayName: 'Child',
        getInitialState() {
          a.set(3); // one shouldn't do this!
          return {};
        },
        render: () => (
          <div>
            child:
            {a.get()} -{' '}
          </div>
        )
      })
    );
    const ParentWrapper = observer(function Parent() {
      return (
        <span></span>

b: mobx.observable.box(false),
      c: mobx.computed(function() {
        return foo.b.get();
      })
    };
    function flipStuff() {
      mobx.runInAction(() => {
        foo.a.set(!foo.a.get());
        foo.b.set(!foo.b.get());
      });
    }
    let asText = '';
    let willReactCount = 0;
    mobx.autorun(() => (asText = [foo.a.get(), foo.b.get(), foo.c.get()].join(':')));
    const Test = observer(
      createClass({
        componentWillReact: () => willReactCount++,
        render: () =&gt; <div id="x">{[foo.a.get(), foo.b.get(), foo.c.get()].join(',')}</div>
      })
    );

    render(, container);
    // In 3 seconds, flip a and b. This will change c.
    flipStuff();

    expect(asText).toBe('false:true:true');
    expect(document.getElementById('x').textContent).toBe('false,true,true');
    expect(willReactCount).toBe(1);
  });

it('warning is printed when changing stores', done => {
    let msg;
    const baseWarn = console.error;
    console.error = m => (msg = m);
    const a = mobx.observable.box(3);
    const C = observer(
      ['foo'],
      createClass({
        render() {
          return (
            <div>
              context:
              {this.props.foo}
            </div>
          );
        }
      })
    );
    const B = observer(
      createClass({
        render: () =&gt; 
      })
    );
    const A = observer(

it('warning is not printed when changing stores, but suppressed explicitly', done => {
    let msg = null;
    const baseWarn = console.error;
    console.error = m => (msg = m);
    const a = mobx.observable.box(3);
    const C = observer(
      ['foo'],
      createClass({
        render() {
          return (
            <div>
              context:
              {this.props.foo}
            </div>
          );
        }
      })
    );
    const B = observer(
      createClass({
        render: () =&gt; 
      })
    );
    const A = observer(

it('support static hoisting, wrappedComponent and wrappedInstance', done => {
    const B = createClass({
      render() {
        this.testField = 1;
        return <div>{this.testField}</div>;
      }
    });
    B.bla = 17;
    B.bla2 = {};
    const C = inject('booh')(B);

    expect(C.wrappedComponent).toBe(B);
    expect(B.bla).toBe(17);
    expect(C.bla).toBe(17);

    let c = null;
    render( (c = i)} booh={42} /&gt;, container);
    expect(c.wrappedInstance.testField).toBe(1);

it('should use getChildContext', () => {
    const TestComponent = createClass({
      getChildContext() {
        return { hello: 'world' };
      },
      render() {
        return createElement('a', null, this.context.hello);
      }
    });
    return streamPromise(createElement(TestComponent, null)).then(function(output) {
      expect(output).toBe('<a>world</a>');
    });
  });

it('stateless component with context support', done => {
    const StateLessCompWithContext = (props, context) => createElement('div', {}, 'context: ' + context.testContext);
    const StateLessCompWithContextObserver = observer(StateLessCompWithContext);
    const ContextProvider = createClass({
      getChildContext: () => ({ testContext: 'hello world' }),
      render: () => 
    });
    render(, container);
    expect(container.textContent.replace(/\n/, '')).toBe('context: hello world');
    done();
  });
});

return this.props.x;
            }
          });
        },
        render() {
          return (
            <span>
              x:
              {this.computedProp}
            </span>
          );
        }
      })
    );

    const Parent = createClass({
      getInitialState() {
        return { v: 1 };
      },
      render() {
        return (
          <div> this.setState({ v: 2 })}&gt;
            
          </div>
        );
      }
    });

    render(, container);

    expect(container.querySelector('span').textContent).toBe('x:1');
    container.querySelector('div').click();

const C = inject('foo')(
      observer(
        createClass({
          render() {
            return (
              <div>
                context:
                {this.props.foo}
              </div>
            );
          }
        })
      )
    );
    const B = () =&gt; ;
    const A = createClass({
      render: () =&gt; (
        
          <b>
        </b><b>
      )
    });

    try {
      render(<a>, container);
    } catch (e) {
      expect(e.message).toBe("MobX injector: Store 'foo' is not available! Make sure it is provided by some Provider");
      done();
    }
  });
</a></b>

})(
      observer(
        createClass({
          render() {
            return (
              <div>
                context:
                {this.props.zoom}
                {this.props.baz}
              </div>
            );
          }
        })
      )
    );
    const B = createClass({
      render: () =&gt; 
    });
    const A = () =&gt; (
      
        <b>
      </b><b>
    );
    render(<a>, container);
    expect(container.querySelector('div').textContent).toBe('context:bar84');
    done();
  });
</a></b>