Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
it('does not views alive when using static rendering', () => {
useStaticRendering(true);
let renderCount = 0;
const data = mobx.observable({
z: 'hi'
});
const TestComponent = observer(function testComponent() {
renderCount++;
return <div>{data.z}</div>;
});
render(, container);
expect(renderCount).toBe(1);
expect(container.querySelector('div').textContent).toBe('hi');
data.z = 'hello';
// no re-rendering on static rendering
expect(renderCount).toBe(1);
expect(container.querySelector('div').textContent).toBe('hi');
expect(renderCount).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: () =>
})
it('does not views alive when using static + string rendering', function() {
useStaticRendering(true);
let renderCount = 0;
const data = mobx.observable({
z: 'hi'
});
const TestComponent = observer(function testComponent() {
renderCount++;
return <div>{data.z}</div>;
});
const output = renderToStaticMarkup();
data.z = 'hello';
expect(output).toBe('<div>hi</div>');
expect(renderCount).toBe(1);
expect(getDNode(data, 'z').observers.length).toBe(0);
useStaticRendering(false);
});
});
it('custom shouldComponentUpdate is not respected for observable changes (#50)', done => {
let called = 0;
const x = mobx.observable.box(3);
const C = observer(
createClass({
render: () => (
<div>
value:
{x.get()}
</div>
),
shouldComponentUpdate: () => called++
})
);
render(, container);
expect(container.querySelector('div').textContent).toBe('value:3');
expect(called).toBe(0);
x.set(42);
expect(container.querySelector('div').textContent).toBe('value:42');
expect(called).toBe(0);
it('React.render should respect transaction', () => {
const a = mobx.observable.box(2);
const loaded = mobx.observable.box(false);
const valuesSeen = [];
const Component = observer(() => {
valuesSeen.push(a.get());
if (loaded.get()) return <div>{a.get()}</div>;
else return <div>loading</div>;
});
render(, container);
mobx.runInAction(() => {
a.set(3);
a.set(4);
loaded.set(true);
});
expect(container.textContent.replace(/\s+/g, '')).toBe('4');
expect(valuesSeen).toEqual([2, 4]);
});
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();
});
});
it('124 - react to changes in this.props via computed', function() {
const Comp = observer(
createClass({
componentWillMount() {
mobx.extendObservable(this, {
get computedProp() {
return this.props.x;
}
});
},
render() {
return (
<span>
x:
{this.computedProp}
</span>
);
}
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: () =>
})
);
const A = observer(
createClass({
render: () => (
<section>
<span>{a.get()}</span>,
<b>
</b><b>
</b></section><b>
)
})
);</b>
createClass({
render() {
return (
<div>
value:
{this.props.y}
</div>
);
},
shouldComponentUpdate(nextProps) {
called++;
return nextProps.y !== 42;
}
})
);
const B = observer(
createClass({
render: () => (
<span>
</span>
)
})
);
render(<b>, container);
expect(container.querySelector('div').textContent).toBe('value:5');
expect(called).toBe(0);
y.set(6);
expect(container.querySelector('div').textContent).toBe('value:6');
expect(called).toBe(1);
</b>