Bug running Jest with ScrollView dependant components #13034
Comments
|
Yea looks like the issue is that the ScrollView mock doesn't have any of the methods ScrollView has. Maybe we could use const ScrollViewComponent = jest.genMockFromModule('ScrollView');
class ScrollViewMock extends ScrollViewComponent {
render() {
...
}
}Not sure if that would work but if it does it would be nice to avoid having to fix the mock if we add other methods to ScrollView. If it doesn't work we could also just add empty methods for each one in ScrollView. |
|
PR would be nice, let me know if you need any help. |
janicduplessis
added
Good first issue
|
Hi @janicduplessis! Thanks for your support, here's the PR #13048 Your suggested change worked perfectly, however when testing this specific case with the There's also a flow warning for using |
Added lint rule to avoid unresolved identifier error
|
I ran into this issue and was able to mock this simply: jest.mock('ScrollView', () => jest.genMockFromModule('ScrollView'));Also, I'm mocking the jest.mock('Linking', () => ({
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
openURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
canOpenURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
getInitialURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
}))Note, I've configured this to be run as part of Jests |
|
@janicduplessis Was this completed/should be closed? Is |
|
This PR it's on development? I'm with the same issue so, if I can help it, would be nicely. |
|
This solution jest.mock('ScrollView', () => jest.genMockFromModule('ScrollView'));works well but it also removes ScrollView content from snapshots, which reduces the test coverage. Here is what I'm using: jest.mock('ScrollView', () => {
const RealComponent = require.requireActual('ScrollView');
const React = require('React');
class ScrollView extends React.Component {
scrollTo() {
}
render() {
return React.createElement('ScrollView', this.props, this.props.children);
}
}
ScrollView.propTypes = RealComponent.propTypes;
return ScrollView;
}); |
|
@minhhai2209 Great solution! One small improvement, your code broke all my existing snapshot tests, because the ScrollView mock shipped with react-native renders slightly differently. This worked for me: jest.mock('ScrollView', () => {
const MockScrollView = require.requireMock('ScrollViewMock');
const React = require('React');
const RealScrollView = require.requireActual('ScrollView');
class ScrollView extends React.Component {
scrollTo() {
}
render() {
return (
<MockScrollView {...this.props} />
);
}
}
ScrollView.propTypes = RealScrollView.propTypes;
return ScrollView;
}); |
Summary: Solves facebook#13034 Now the `ScrollView` mock has all the methods available. React Native tests pass. To test this specific part of the code, ```sh $ react-native init Test $ cd Test/ $ yarn add react-navigation ``` Then, add a simple project that uses `react-navigation`: ```js import React from 'react'; import { Text } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { return <Text>Hello, Navigation!</Text>; } } const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); export default SimpleApp ``` Run the default render tests: ```js $ npm run test ``` Closes facebook#13048 Differential Revision: D4746028 Pulled By: shergin fbshipit-source-id: cb1791978d15be7f5d14b7b22979388066ad6caa
Summary: Solves facebook#13034 Now the `ScrollView` mock has all the methods available. React Native tests pass. To test this specific part of the code, ```sh $ react-native init Test $ cd Test/ $ yarn add react-navigation ``` Then, add a simple project that uses `react-navigation`: ```js import React from 'react'; import { Text } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { return <Text>Hello, Navigation!</Text>; } } const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); export default SimpleApp ``` Run the default render tests: ```js $ npm run test ``` Closes facebook#13048 Differential Revision: D4746028 Pulled By: shergin fbshipit-source-id: cb1791978d15be7f5d14b7b22979388066ad6caa
Description
When running
npm run test, the default testsindex.ios.jsandindex.android.jsfail due to the following error:Reproduction
Solution
I'm open to send a PR with a fix if somebody can guide me through this. Could be here https://github.com/facebook/react-native/blob/dbe555ba78d7b0f79e482c62787db2fc3d897848/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js?
Additional Information
The text was updated successfully, but these errors were encountered: