원주민 반작용 : requestAnimationFrame가 노드에

Question

구성 요소 지원되지 않습니다

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { StyleSheet, ListView } from 'react-native'; 
import Card from './card'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
}); 

export default class PhotoList extends React.Component { 
    static propTypes = { 
    feeds: PropTypes.arrayOf(PropTypes.object), 
    }; 

    static defaultProps = { 
    feeds: [], 
    }; 

    constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.feeds), 
    }; 
    } 

    render() { 
    return (
     <ListView 
     enableEmptySections 
     style={ styles.container } 
     dataSource={ this.state.dataSource } 
     renderRow={ feedItem => <Card feed={ feedItem } /> } 
     /> 
    ); 
    } 
} 

__mocks __/react.js을

const react = require('react'); 
// Resolution for requestAnimationFrame not supported in jest error : 
// https://github.com/facebook/react/issues/9102#issuecomment-283873039 
global.window = global; 
window.addEventListener =() => {}; 
window.requestAnimationFrame =() => { 
    throw new Error('requestAnimationFrame is not supported in Node'); 
}; 

module.exports = react; 

사진 list.test.js

import React from 'react'; 
import { ListView } from 'react-native'; 
import renderer from 'react-test-renderer'; 
import { shallow } from 'enzyme'; 
import PhotoList from './photo-list'; 

const feed = { 
    url: 'http://placehold.it/600x600', 
    title: 'Some title for the card', 
}; 

describe('<PhotoList />',() => { 
    it('should render without throwing an error',() => { 
    const component = renderer.create(
     <PhotoList feed={ feed } />, 
    ).toJSON(); 
    expect(component).toMatchSnapshot(); 
    }); 

    it('should contain a ListView',() => { 
    const wrapper = shallow(<PhotoList feed={ feed } />); 
    expect(wrapper.find(ListView).length).toBe(1); 
    }); 
}); 

오류 :

FAIL src/components/photo-list.test.js 
    ● Console 

    console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:71 
     React caught an error thrown by ListView. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior. 

     Error: requestAnimationFrame is not supported in Node 

     The error is located at: 
      in ListView (created by PhotoList) 
      in PhotoList 

     The error was thrown at: 
      at Object.<anonymous>.window.requestAnimationFrame (/Users/rahulshetty/localshiva/test-rn-apps/__mocks__/react.js:7:7), 
      at Component.requestAnimationFrame (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-timer-mixin/TimerMixin.js:16:14), 
      at Component.componentDidMount (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js:365:6), 
      at commitLifeCycles (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactFiberCommitWork.js:421:24), 
      at commitAllLifeCycles (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactFiberScheduler.js:349:9), 
      at invokeGuardedCallback (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactErrorUtils.js:21:10), 
      at invokeGuardedCallback (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactErrorUtils.js:91:34), 
      at commitAllWork (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactFiberScheduler.js:468:19), 
      at completeUnitOfWork (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactFiberScheduler.js:614:11), 
      at performUnitOfWork (/Users/rahulshetty/localshiva/test-rn-apps/node_modules/react-test-renderer/lib/ReactFiberScheduler.js:641:14) 
    console.warn node_modules/react-native/Libraries/Core/ExceptionsManager.js:40 
     Unable to symbolicate stack trace: this.dispatchEvent is not a function 

    ● <PhotoList /> › should render without throwing an error 

    requestAnimationFrame is not supported in Node 

     at Object.<anonymous>.window.requestAnimationFrame (__mocks__/react.js:7:7) 
     at Component.requestAnimationFrame (node_modules/react-timer-mixin/TimerMixin.js:16:14) 
     at Component.componentDidMount (node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js:365:6) 
     at commitLifeCycles (node_modules/react-test-renderer/lib/ReactFiberCommitWork.js:421:24) 
     at commitAllLifeCycles (node_modules/react-test-renderer/lib/ReactFiberScheduler.js:349:9) 
     at invokeGuardedCallback (node_modules/react-test-renderer/lib/ReactErrorUtils.js:21:10) 
     at invokeGuardedCallback (node_modules/react-test-renderer/lib/ReactErrorUtils.js:91:34) 
     at commitAllWork (node_modules/react-test-renderer/lib/ReactFiberScheduler.js:468:19) 
     at completeUnitOfWork (node_modules/react-test-renderer/lib/ReactFiberScheduler.js:614:11) 
     at performUnitOfWork (node_modules/react-test-renderer/lib/ReactFiberScheduler.js:641:14) 

문제 :

내가 테스트에 새로 온 사람과 내가 설정 한 단위 테스트를 이해하는 기본 앱 반응 만들기 사용하여 기본 프로젝트를 반응한다. 이 오류의 원인을 잘 모르겠습니다. 내 구성 요소에 ListView이 있는지 테스트하고 싶습니다. requestAnimationFrame에 대한 지원을 추가하려면 어떻게해야합니까?

Answer 1

당신은 넣을 수 :

if (!window.requestAnimationFrame) { 
    let targetTime = 0 
    window.requestAnimationFrame = function (callbackFun) { 
    const currentTime = +new Date() 
    const timeoutCb = function() { callbackFun(+new Date()) } 
    return window.setTimeout(timeoutCb, Math.max(targetTime + 16, currentTime) - currentTime) 
    } 
} 

을 코드에 노드 requestAnimationFrame을 polifill 할 수 있습니다. 나는 당신이 이미 창을 가지고 있으므로 jsdom을 사용하고 있다고 가정하고 있습니다. 비헤이비어를 시뮬레이션하고 싶지 않고 테스트 외부에서 코드를 추출하여 코드를 명확하게 만들려면 Ofc 코드가 더 간단 할 수 있습니다.