'use strict';
let React;
let ReactNoop;
let act;
describe('ReactIncrementalUpdatesMinimalism', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactNoop = require('react-noop-renderer');
act = require('internal-test-utils').act;
});
it('should render a simple component', async () => {
function Child() {
return <div>Hello World</div>;
}
function Parent() {
return <Child />;
}
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 0,
});
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 1,
});
});
it('should not diff referentially equal host elements', async () => {
function Leaf(props) {
return (
<span>
hello
<b />
{props.name}
</span>
);
}
const constEl = (
<div>
<Leaf name="world" />
</div>
);
function Child() {
return constEl;
}
function Parent() {
return <Child />;
}
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 0,
});
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 0,
});
});
it('should not diff parents of setState targets', async () => {
let childInst;
function Leaf(props) {
return (
<span>
hello
<b />
{props.name}
</span>
);
}
class Child extends React.Component {
state = {name: 'Batman'};
render() {
childInst = this;
return (
<div>
<Leaf name={this.state.name} />
</div>
);
}
}
function Parent() {
return (
<section>
<div>
<Leaf name="world" />
<Child />
<hr />
<Leaf name="world" />
</div>
</section>
);
}
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 0,
});
ReactNoop.startTrackingHostCounters();
await act(() => childInst.setState({name: 'Robin'}));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 4,
});
ReactNoop.startTrackingHostCounters();
await act(() => ReactNoop.render(<Parent />));
expect(ReactNoop.stopTrackingHostCounters()).toEqual({
hostUpdateCounter: 10,
});
});
});