From 3e3c7d1b42844e448861fa764ae9bba95e8cc0a0 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sun, 10 Nov 2024 13:54:14 +0100 Subject: [PATCH] Remove component.base --- TODO.md | 1 + compat/src/index.js | 3 +- src/component.js | 4 +- src/diff/index.js | 4 +- src/index.d.ts | 1 - test/browser/components.test.js | 654 +----------------- .../lifecycles/componentDidUpdate.test.js | 2 +- test/browser/lifecycles/lifecycle.test.js | 56 -- test/browser/refs.test.js | 38 +- test/ts/Component-test.tsx | 4 - test/ts/refs.tsx | 8 +- 11 files changed, 24 insertions(+), 751 deletions(-) diff --git a/TODO.md b/TODO.md index 7036b3407c..e7b94d815a 100644 --- a/TODO.md +++ b/TODO.md @@ -4,6 +4,7 @@ - https://github.com/preactjs/preact/pull/4460 - https://github.com/preactjs/preact/pull/4453 - Backing VNodes +- Remove deprecated lifecycle methods - Try to get rid of DOM pointers - Separate mount/update paths - Rethink TypeScript types diff --git a/compat/src/index.js b/compat/src/index.js index fb0afb46f7..8c98713561 100644 --- a/compat/src/index.js +++ b/compat/src/index.js @@ -116,7 +116,8 @@ function unmountComponentAtNode(container) { function findDOMNode(component) { return ( (component && - (component.base || (component.nodeType === 1 && component))) || + ((component._vnode && component._vnode._dom) || + (component.nodeType === 1 && component))) || null ); } diff --git a/src/component.js b/src/component.js index 5bd82fc605..08bac79eaf 100644 --- a/src/component.js +++ b/src/component.js @@ -159,11 +159,11 @@ function renderComponent(component) { */ function updateParentDomPointers(vnode) { if ((vnode = vnode._parent) != null && vnode._component != null) { - vnode._dom = vnode._component.base = null; + vnode._dom = null; for (let i = 0; i < vnode._children.length; i++) { let child = vnode._children[i]; if (child != null && child._dom != null) { - vnode._dom = vnode._component.base = child._dom; + vnode._dom = child._dom; break; } } diff --git a/src/diff/index.js b/src/diff/index.js index caf71d2cda..ef40df77cf 100644 --- a/src/diff/index.js +++ b/src/diff/index.js @@ -273,8 +273,6 @@ export function diff( refQueue ); - c.base = newVNode._dom; - // We successfully rendered this VNode, unset any stored hydration/bailout state: newVNode._flags &= RESET_MODE; @@ -627,7 +625,7 @@ export function unmount(vnode, parentVNode, skipRemove) { } } - r.base = r._parentDom = null; + r._parentDom = null; } if ((r = vnode._children)) { diff --git a/src/index.d.ts b/src/index.d.ts index 279af93ab2..f759b44102 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -159,7 +159,6 @@ export abstract class Component { state: Readonly; props: RenderableProps

; context: any; - base?: Element | Text; // From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402 // // We MUST keep setState() as a unified signature because it allows proper checking of the method return type. diff --git a/test/browser/components.test.js b/test/browser/components.test.js index 44471a2181..e772f8f032 100644 --- a/test/browser/components.test.js +++ b/test/browser/components.test.js @@ -8,7 +8,6 @@ import { serializeHtml, sortAttributes } from '../_util/helpers'; -import { div, span, p } from '../_util/dom'; /** @jsx createElement */ const h = createElement; @@ -1864,24 +1863,24 @@ describe('Components', () => { const getDom = c => ('__v' in c ? c.__v.__e : c._vnode._dom); render(, scratch); - expect(getDom(child)).to.equalNode(child.base); + expect(getDom(child)).to.equalNode(scratch.querySelector('.child')); app.forceUpdate(); - expect(getDom(child)).to.equalNode(child.base); + expect(getDom(child)).to.equalNode(scratch.querySelector('.child')); parent.setState({}); renderChildDiv = true; child.forceUpdate(); - expect(getDom(child)).to.equalNode(child.base); + expect(getDom(child)).to.equalNode(scratch.querySelector('.child')); rerender(); - expect(getDom(child)).to.equalNode(child.base); + expect(getDom(child)).to.equalNode(scratch.querySelector('.child')); renderChildDiv = false; app.setState({}); child.forceUpdate(); rerender(); - expect(getDom(child)).to.equalNode(child.base); + expect(getDom(child)).to.equalNode(scratch.querySelector('.child')); }); // preact/#1323 @@ -1963,649 +1962,6 @@ describe('Components', () => { expect(() => rerender()).not.to.throw(); }); - describe('c.base', () => { - /* eslint-disable lines-around-comment */ - /** @type {import('../../src').Component} */ - let parentDom1; - /** @type {import('../../src').Component} */ - let parent1; - /** @type {import('../../src').Component} */ - let parent2; - /** @type {import('../../src').Component} */ - let maybe; - /** @type {import('../../src').Component} */ - let child; - /** @type {import('../../src').Component} */ - let sibling; - /** @type {import('../../src').Component} */ - let nullInst; - - /** @type {() => void} */ - let toggleMaybeNull; - /** @type {() => void} */ - let swapChildTag; - - function ParentWithDom(props) { - parentDom1 = this; - return

{props.children}
; - } - - class Parent1 extends Component { - render() { - parent1 = this; - return this.props.children; - } - } - - function Parent2(props) { - parent2 = this; - return props.children; - } - - class MaybeNull extends Component { - constructor(props) { - super(props); - maybe = this; - this.state = { active: props.active || false }; - toggleMaybeNull = () => - this.setState(prev => ({ - active: !prev.active - })); - } - render() { - return this.state.active ?
maybe
: null; - } - } - - class Child extends Component { - constructor(props) { - super(props); - child = this; - this.state = { tagName: 'p' }; - swapChildTag = () => - this.setState(prev => ({ - tagName: prev.tagName == 'p' ? 'span' : 'p' - })); - } - render() { - return h(this.state.tagName, null, 'child'); - } - } - - function Sibling(props) { - sibling = this; - return

; - } - - function Null() { - nullInst = this; - return null; - } - - afterEach(() => { - parentDom1 = null; - parent1 = null; - parent2 = null; - child = null; - sibling = null; - }); - - it('should keep c.base up to date if a nested child component changes DOM nodes', () => { - render( - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal('

child

'); - expect(child.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent2.base).to.equalNode(child.base); - expect(parent1.base).to.equalNode(child.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal('
child
'); - expect(child.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent2.base).to.equalNode(child.base); - expect(parent1.base).to.equalNode(child.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - }); - - it('should not update sibling c.base if child component changes DOM nodes', () => { - let s1 = {}, - s2 = {}, - s3 = {}, - s4 = {}; - - render( - - - - - - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal( - '

child

' - ); - expect(child.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent2.base).to.equalNode(child.base); - expect(parent1.base).to.equalNode(child.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - expect(s1.current.base).to.equalNode(scratch.firstChild.childNodes[1]); - expect(s2.current.base).to.equalNode(scratch.firstChild.childNodes[2]); - expect(s3.current.base).to.equalNode(scratch.firstChild.childNodes[3]); - expect(s4.current.base).to.equalNode(scratch.lastChild); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal( - '
child

' - ); - expect(child.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent2.base).to.equalNode(child.base); - expect(parent1.base).to.equalNode(child.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - expect(s1.current.base).to.equalNode(scratch.firstChild.childNodes[1]); - expect(s2.current.base).to.equalNode(scratch.firstChild.childNodes[2]); - expect(s3.current.base).to.equalNode(scratch.firstChild.childNodes[3]); - expect(s4.current.base).to.equalNode(scratch.lastChild); - }); - - it('should not update parent c.base if child component changes DOM nodes and it is not first child component', () => { - render( - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal('

child

'); - expect(child.base).to.equalNode(scratch.lastChild); - expect(sibling.base).to.equalNode(scratch.firstChild); - expect(parent1.base).to.equalNode(sibling.base); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal('

child'); - expect(child.base).to.equalNode(scratch.lastChild); - expect(sibling.base).to.equalNode(scratch.firstChild); - expect(parent1.base).to.equalNode(sibling.base); - }); - - it('should update parent c.base if child component changes DOM nodes and it is first non-null child component', () => { - render( - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal('

child

'); - expect(nullInst.base).to.equalNode(null); - expect(child.base).to.equalNode(scratch.firstChild); - expect(sibling.base).to.equalNode(scratch.lastChild); - expect(parent1.base).to.equalNode(child.base); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal('child

'); - expect(nullInst.base).to.equalNode(null); - expect(child.base).to.equalNode(scratch.firstChild); - expect(sibling.base).to.equalNode(scratch.lastChild); - expect(parent1.base).to.equalNode(child.base); - }); - - it('should not update parent c.base if child component changes DOM nodes and a parent is not first child component', () => { - render( - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal('

child

'); - expect(child.base).to.equalNode(scratch.firstChild.lastChild); - expect(parent2.base).to.equalNode(child.base); - expect(sibling.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent1.base).to.equalNode(sibling.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal( - '

child
' - ); - expect(child.base).to.equalNode(scratch.firstChild.lastChild); - expect(parent2.base).to.equalNode(child.base); - expect(sibling.base).to.equalNode(scratch.firstChild.firstChild); - expect(parent1.base).to.equalNode(sibling.base); - expect(parentDom1.base).to.equalNode(scratch.firstChild); - }); - - it('should update parent c.base if first child becomes null', () => { - render( - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal([div('maybe'), p('child')].join('')); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'initial - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(child.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(maybe.base, 'initial - parent1.base'); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'toggleMaybe - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'toggleMaybe - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'toggleMaybe - parent1.base' - ); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal(span('child')); - expect(maybe.base).to.equalNode(null, 'swapChildTag - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'swapChildTag - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'swapChildTag - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'swapChildTag - parent1.base' - ); - }); - - it('should update parent c.base if first child becomes non-null', () => { - render( - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'initial - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(child.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(child.base, 'initial - parent1.base'); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal(span('child')); - expect(maybe.base).to.equalNode(null, 'swapChildTag - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'swapChildTag - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'swapChildTag - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'swapChildTag - parent1.base' - ); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal( - [div('maybe'), span('child')].join('') - ); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'toggleMaybe - parent2.base' - ); - expect(parent1.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent1.base' - ); - }); - - it('should update parent c.base if first non-null child becomes null with multiple null siblings', () => { - render( - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal([div('maybe'), p('child')].join('')); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'initial - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(maybe.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(maybe.base, 'initial - parent1.base'); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'toggleMaybe - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'toggleMaybe - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'toggleMaybe - parent1.base' - ); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal(span('child')); - expect(maybe.base).to.equalNode(null, 'swapChildTag - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'swapChildTag - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'swapChildTag - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'swapChildTag - parent1.base' - ); - }); - - it('should update parent c.base if a null child returns DOM with multiple null siblings', () => { - render( - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'initial - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(child.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(child.base, 'initial - parent1.base'); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal(span('child')); - expect(maybe.base).to.equalNode(null, 'swapChildTag - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'swapChildTag - child.base' - ); - expect(parent2.base).to.equalNode( - child.base, - 'swapChildTag - parent2.base' - ); - expect(parent1.base).to.equalNode( - child.base, - 'swapChildTag - parent1.base' - ); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal( - [div('maybe'), span('child')].join('') - ); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent2.base' - ); - expect(parent1.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent1.base' - ); - }); - - it('should update parent c.base to null if last child becomes null', () => { - let fragRef = {}; - render( - - - - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal([div('maybe'), p('child')].join('')); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'initial - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(maybe.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(maybe.base, 'initial - parent1.base'); - expect(fragRef.current.base).to.equalNode( - maybe.base, - 'initial - fragRef.current.base' - ); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'toggleMaybe - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent2.base' - ); - expect(parent1.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent1.base' - ); - expect(fragRef.current.base).to.equalNode( - child.base, - 'toggleMaybe - fragRef.current.base' - ); - }); - - it('should update parent c.base if last child returns dom', () => { - let fragRef = {}; - render( - - - - - - - - - - - , - scratch - ); - - expect(scratch.innerHTML).to.equal(p('child')); - expect(maybe.base).to.equalNode(null, 'initial - maybe.base'); - expect(child.base).to.equalNode( - scratch.firstChild, - 'initial - child.base' - ); - expect(parent2.base).to.equalNode(maybe.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode(maybe.base, 'initial - parent1.base'); - expect(fragRef.current.base).to.equalNode( - child.base, - 'initial - fragRef.current.base' - ); - - toggleMaybeNull(); - rerender(); - - expect(scratch.innerHTML).to.equal([div('maybe'), p('child')].join('')); - expect(maybe.base).to.equalNode( - scratch.firstChild, - 'toggleMaybe - maybe.base' - ); - expect(child.base).to.equalNode( - scratch.lastChild, - 'toggleMaybe - child.base' - ); - expect(parent2.base).to.equalNode(maybe.base, 'initial - parent2.base'); - expect(parent1.base).to.equalNode( - maybe.base, - 'toggleMaybe - parent1.base' - ); - expect(fragRef.current.base).to.equalNode( - maybe.base, - 'toggleMaybe - fragRef.current.base' - ); - }); - - it('should not update parent if it is a DOM node', () => { - let divVNode = ( -
- -
- ); - render(divVNode, scratch); - - // TODO: Consider rewriting test to not rely on internal properties - // and instead capture user-facing bug that would occur if this - // behavior were broken - const domProp = '__e' in divVNode ? '__e' : '_dom'; - - expect(scratch.innerHTML).to.equal('

child

'); - expect(divVNode[domProp]).to.equalNode( - scratch.firstChild, - 'initial - divVNode._dom' - ); - expect(child.base).to.equalNode( - scratch.firstChild.firstChild, - 'initial - child.base' - ); - - swapChildTag(); - rerender(); - - expect(scratch.innerHTML).to.equal('
child
'); - expect(divVNode[domProp]).to.equalNode( - scratch.firstChild, - 'swapChildTag - divVNode._dom' - ); - expect(child.base).to.equalNode( - scratch.firstChild.firstChild, - 'swapChildTag - child.base' - ); - }); - }); - describe('setState', () => { it('should not error if called on an unmounted component', () => { /** @type {() => void} */ diff --git a/test/browser/lifecycles/componentDidUpdate.test.js b/test/browser/lifecycles/componentDidUpdate.test.js index 41bae1bf50..3f6658b283 100644 --- a/test/browser/lifecycles/componentDidUpdate.test.js +++ b/test/browser/lifecycles/componentDidUpdate.test.js @@ -310,7 +310,7 @@ describe('Lifecycle methods', () => { // Verify that the component is actually mounted when this // callback is invoked. - expect(scratch.querySelector('#inner')).to.equalNode(this.base); + expect(scratch.querySelector('#inner')).to.not.equal(null); } render() { diff --git a/test/browser/lifecycles/lifecycle.test.js b/test/browser/lifecycles/lifecycle.test.js index a933e25941..2714b4bcfa 100644 --- a/test/browser/lifecycles/lifecycle.test.js +++ b/test/browser/lifecycles/lifecycle.test.js @@ -612,61 +612,5 @@ describe('Lifecycle methods', () => { expect(getDerived).to.have.been.calledWith(error); }); - - it('should remove this.base for HOC', () => { - let createComponent = (name, fn) => { - class C extends Component { - componentWillUnmount() { - expect(this.base, `${name}.componentWillUnmount`).to.exist; - setTimeout(() => { - expect(this.base, `after ${name}.componentWillUnmount`).not.to - .exist; - }, 0); - } - render(props) { - return fn(props); - } - } - sinon.spy(C.prototype, 'componentWillUnmount'); - sinon.spy(C.prototype, 'render'); - return C; - }; - - class Wrapper extends Component { - render({ children }) { - return
{children}
; - } - } - - let One = createComponent('One', () => one); - let Two = createComponent('Two', () => two); - let Three = createComponent('Three', () => three); - - let components = [One, Two, Three]; - - let Selector = createComponent('Selector', ({ page }) => { - let Child = components[page]; - return Child && ; - }); - - let app; - class App extends Component { - constructor() { - super(); - app = this; - } - - render(_, { page }) { - return ; - } - } - - render(, scratch); - - for (let i = 0; i < 20; i++) { - app.setState({ page: i % components.length }); - app.forceUpdate(); - } - }); }); }); diff --git a/test/browser/refs.test.js b/test/browser/refs.test.js index 8c386fb0f9..cc59237975 100644 --- a/test/browser/refs.test.js +++ b/test/browser/refs.test.js @@ -160,7 +160,9 @@ describe('refs', () => { render(, scratch); expect(outer).to.have.been.calledOnce.and.calledWith(inst); - expect(inner).to.have.been.calledOnce.and.calledWith(inst.base); + expect(inner).to.have.been.calledOnce.and.calledWith( + scratch.querySelector(InnermostComponent) + ); outer.resetHistory(); inner.resetHistory(); @@ -178,7 +180,7 @@ describe('refs', () => { expect(inner, 're-render swap'); expect(inner.firstCall, 're-render swap').to.have.been.calledWith(null); expect(inner.secondCall, 're-render swap').to.have.been.calledWith( - inst.base + scratch.querySelector(InnermostComponent) ); InnermostComponent = 'span'; @@ -228,7 +230,9 @@ describe('refs', () => { expect( innermost, 'innerMost initial' - ).to.have.been.calledOnce.and.calledWith(innerInst.base); + ).to.have.been.calledOnce.and.calledWith( + scratch.querySelector(InnermostComponent) + ); outer.resetHistory(); inner.resetHistory(); @@ -246,7 +250,7 @@ describe('refs', () => { expect(innermost, 'innerMost swap'); expect(innermost.firstCall, 'innerMost swap').to.have.been.calledWith(null); expect(innermost.secondCall, 'innerMost swap').to.have.been.calledWith( - innerInst.base + scratch.querySelector(InnermostComponent) ); InnermostComponent = 'span'; @@ -393,32 +397,6 @@ describe('refs', () => { ); }); - it('should add refs to components representing DOM nodes with no attributes if they have been pre-rendered', () => { - // Simulate pre-render - let parent = document.createElement('div'); - let child = document.createElement('div'); - parent.appendChild(child); - scratch.appendChild(parent); // scratch contains:
- - let ref = spy('ref'); - - class Wrapper extends Component { - render() { - return
; - } - } - - render( -
- ref(c.base)} /> -
, - scratch - ); - expect(ref).to.have.been.calledOnce.and.calledWith( - scratch.firstChild.firstChild - ); - }); - // Test for #1177 it('should call ref after children are rendered', done => { /** @type {HTMLInputElement} */ diff --git a/test/ts/Component-test.tsx b/test/ts/Component-test.tsx index ee133c9260..8ec4b9bd51 100644 --- a/test/ts/Component-test.tsx +++ b/test/ts/Component-test.tsx @@ -146,10 +146,6 @@ describe('Component', () => { expect(component.props.initialName).to.eq('da name'); }); - it('has no base when not mounted', () => { - expect(component.base).to.not.exist; - }); - describe('setState', () => { // No need to execute these tests. because we only need to check if // the types are working. Executing them would require the DOM. diff --git a/test/ts/refs.tsx b/test/ts/refs.tsx index 9edb730d8a..935ecf8993 100644 --- a/test/ts/refs.tsx +++ b/test/ts/refs.tsx @@ -25,12 +25,12 @@ class CallbackRef extends Component { }; fooRef: RefCallback = foo => { if (foo !== null) { - console.log(foo.base); + console.log(foo); } }; barRef: RefCallback = bar => { if (bar !== null) { - console.log(bar.base); + console.log(bar); } }; @@ -56,11 +56,11 @@ class CreateRefComponent extends Component { } if (this.fooRef.current != null) { - console.log(this.fooRef.current.base); + console.log(this.fooRef.current); } if (this.barRef.current != null) { - console.log(this.barRef.current.base); + console.log(this.barRef.current); } }