@@ -197,223 +197,6 @@ describe('ReactFunctionComponent', () => {
197197 . rejects . toThrowError ( ) ;
198198 } ) ;
199199
200- // @gate !enableRefAsProp || !__DEV__
201- it ( 'should warn when given a string ref' , async ( ) => {
202- function Indirection ( props ) {
203- return < div > { props . children } </ div > ;
204- }
205-
206- class ParentUsingStringRef extends React . Component {
207- render ( ) {
208- return (
209- < Indirection >
210- < FunctionComponent name = "A" ref = "stateless" />
211- </ Indirection >
212- ) ;
213- }
214- }
215-
216- await expect ( async ( ) => {
217- const container = document . createElement ( 'div' ) ;
218- const root = ReactDOMClient . createRoot ( container ) ;
219- await act ( ( ) => {
220- root . render ( < ParentUsingStringRef /> ) ;
221- } ) ;
222- } ) . toErrorDev (
223- 'Function components cannot be given refs. ' +
224- 'Attempts to access this ref will fail. ' +
225- 'Did you mean to use React.forwardRef()?\n\n' +
226- 'Check the render method ' +
227- 'of `ParentUsingStringRef`.\n' +
228- ' in FunctionComponent (at **)\n' +
229- ' in div (at **)\n' +
230- ' in Indirection (at **)\n' +
231- ' in ParentUsingStringRef (at **)' ,
232- ) ;
233-
234- // No additional warnings should be logged
235- const container = document . createElement ( 'div' ) ;
236- const root = ReactDOMClient . createRoot ( container ) ;
237- await act ( ( ) => {
238- root . render ( < ParentUsingStringRef /> ) ;
239- } ) ;
240- } ) ;
241-
242- // @gate !enableRefAsProp || !__DEV__
243- it ( 'should warn when given a function ref' , async ( ) => {
244- function Indirection ( props ) {
245- return < div > { props . children } </ div > ;
246- }
247-
248- const ref = jest . fn ( ) ;
249- class ParentUsingFunctionRef extends React . Component {
250- render ( ) {
251- return (
252- < Indirection >
253- < FunctionComponent name = "A" ref = { ref } />
254- </ Indirection >
255- ) ;
256- }
257- }
258-
259- await expect ( async ( ) => {
260- const container = document . createElement ( 'div' ) ;
261- const root = ReactDOMClient . createRoot ( container ) ;
262- await act ( ( ) => {
263- root . render ( < ParentUsingFunctionRef /> ) ;
264- } ) ;
265- } ) . toErrorDev (
266- 'Function components cannot be given refs. ' +
267- 'Attempts to access this ref will fail. ' +
268- 'Did you mean to use React.forwardRef()?\n\n' +
269- 'Check the render method ' +
270- 'of `ParentUsingFunctionRef`.\n' +
271- ' in FunctionComponent (at **)\n' +
272- ' in div (at **)\n' +
273- ' in Indirection (at **)\n' +
274- ' in ParentUsingFunctionRef (at **)' ,
275- ) ;
276- expect ( ref ) . not . toHaveBeenCalled ( ) ;
277-
278- // No additional warnings should be logged
279- const container = document . createElement ( 'div' ) ;
280- const root = ReactDOMClient . createRoot ( container ) ;
281- await act ( ( ) => {
282- root . render ( < ParentUsingFunctionRef /> ) ;
283- } ) ;
284- } ) ;
285-
286- // @gate !enableRefAsProp || !__DEV__
287- it ( 'deduplicates ref warnings based on element or owner' , async ( ) => {
288- // When owner uses JSX, we can use exact line location to dedupe warnings
289- class AnonymousParentUsingJSX extends React . Component {
290- render ( ) {
291- return < FunctionComponent name = "A" ref = { ( ) => { } } /> ;
292- }
293- }
294-
295- let instance1 ;
296-
297- await expect ( async ( ) => {
298- const container = document . createElement ( 'div' ) ;
299- const root = ReactDOMClient . createRoot ( container ) ;
300-
301- await act ( ( ) => {
302- root . render (
303- < AnonymousParentUsingJSX ref = { current => ( instance1 = current ) } /> ,
304- ) ;
305- } ) ;
306- } ) . toErrorDev ( 'Function components cannot be given refs.' ) ;
307- // Should be deduped (offending element is on the same line):
308- instance1 . forceUpdate ( ) ;
309- // Should also be deduped (offending element is on the same line):
310- let container = document . createElement ( 'div' ) ;
311- let root = ReactDOMClient . createRoot ( container ) ;
312- await act ( ( ) => {
313- root . render ( < AnonymousParentUsingJSX /> ) ;
314- } ) ;
315-
316- // When owner doesn't use JSX, and is anonymous, we warn once per internal instance.
317- class AnonymousParentNotUsingJSX extends React . Component {
318- render ( ) {
319- return React . createElement ( FunctionComponent , {
320- name : 'A' ,
321- ref : ( ) => { } ,
322- } ) ;
323- }
324- }
325-
326- let instance2 ;
327- await expect ( async ( ) => {
328- container = document . createElement ( 'div' ) ;
329- root = ReactDOMClient . createRoot ( container ) ;
330- await act ( ( ) => {
331- root . render (
332- < AnonymousParentNotUsingJSX ref = { current => ( instance2 = current ) } /> ,
333- ) ;
334- } ) ;
335- } ) . toErrorDev ( 'Function components cannot be given refs.' ) ;
336- // Should be deduped (same internal instance, no additional warnings)
337- instance2 . forceUpdate ( ) ;
338- // Could not be differentiated (since owner is anonymous and no source location)
339- container = document . createElement ( 'div' ) ;
340- root = ReactDOMClient . createRoot ( container ) ;
341- await act ( ( ) => {
342- root . render ( < AnonymousParentNotUsingJSX /> ) ;
343- } ) ;
344-
345- // When owner doesn't use JSX, but is named, we warn once per owner name
346- class NamedParentNotUsingJSX extends React . Component {
347- render ( ) {
348- return React . createElement ( FunctionComponent , {
349- name : 'A' ,
350- ref : ( ) => { } ,
351- } ) ;
352- }
353- }
354- let instance3 ;
355- await expect ( async ( ) => {
356- container = document . createElement ( 'div' ) ;
357- root = ReactDOMClient . createRoot ( container ) ;
358- await act ( ( ) => {
359- root . render (
360- < NamedParentNotUsingJSX ref = { current => ( instance3 = current ) } /> ,
361- ) ;
362- } ) ;
363- } ) . toErrorDev ( 'Function components cannot be given refs.' ) ;
364- // Should be deduped (same owner name, no additional warnings):
365- instance3 . forceUpdate ( ) ;
366- // Should also be deduped (same owner name, no additional warnings):
367- container = document . createElement ( 'div' ) ;
368- root = ReactDOMClient . createRoot ( container ) ;
369- await act ( ( ) => {
370- root . render ( < NamedParentNotUsingJSX /> ) ;
371- } ) ;
372- } ) ;
373-
374- // This guards against a regression caused by clearing the current debug fiber.
375- // https://github.com/facebook/react/issues/10831
376- // @gate !disableLegacyContext || !__DEV__
377- // @gate !enableRefAsProp || !__DEV__
378- it ( 'should warn when giving a function ref with context' , async ( ) => {
379- function Child ( ) {
380- return null ;
381- }
382- Child . contextTypes = {
383- foo : PropTypes . string ,
384- } ;
385-
386- class Parent extends React . Component {
387- static childContextTypes = {
388- foo : PropTypes . string ,
389- } ;
390- getChildContext ( ) {
391- return {
392- foo : 'bar' ,
393- } ;
394- }
395- render ( ) {
396- return < Child ref = { function ( ) { } } /> ;
397- }
398- }
399-
400- await expect ( async ( ) => {
401- const container = document . createElement ( 'div' ) ;
402- const root = ReactDOMClient . createRoot ( container ) ;
403- await act ( ( ) => {
404- root . render ( < Parent /> ) ;
405- } ) ;
406- } ) . toErrorDev (
407- 'Function components cannot be given refs. ' +
408- 'Attempts to access this ref will fail. ' +
409- 'Did you mean to use React.forwardRef()?\n\n' +
410- 'Check the render method ' +
411- 'of `Parent`.\n' +
412- ' in Child (at **)\n' +
413- ' in Parent (at **)' ,
414- ) ;
415- } ) ;
416-
417200 it ( 'should use correct name in key warning' , async ( ) => {
418201 function Child ( ) {
419202 return < div > { [ < span /> ] } </ div > ;
0 commit comments