React Native如何在1個特定測試中模擬PixelRatio

Question

我在測試反應本機中的快照時遇到了問題，更具體地說，它是我遇到的PixelRatio問題。

代碼講話多 - 我已經簡化的代碼並刪除所有的噪音：

組分：

const Slide = (props) => (
    <Image 
    source={props.source} 
     style={PixelRatio.get() === 2 ? 
      { backgroundColor: 'red' } : 
      { backgroundCoor: 'green' }} 
    /> 
); 

快照測試：

import { Platform } from 'react-native'; 
describe('When loading the Slide component',() => { 
    it('should render correctly on ios',() => { 
    Platform.OS = 'ios'; 
    const tree = renderer.create(
     <Provider store={store}> 
     <Slide /> 
     </Provider>, 
    ).toJSON(); 
    expect(tree).toMatchSnapshot(); 
    }); 

    describe('on devices with a pixelRatio of 2',() => { 
    it('it should render correctly',() => { 
     jest.mock('PixelRatio',() => ({ 
     get:() => 2, 
     roundToNearestPixel: jest.fn(), 
     })); 

     const tree = renderer.create(
     <Provider store={store}> 
      <Slide /> 
     </Provider>, 
    ).toJSON(); 
     expect(tree).toMatchSnapshot(); 
    }); 
    }); 
}); 

但這不起作用，經過一番挖掘，我發現一個bug on github這是一個已經解決 - 顯然你需要使用beforeEach。但是，這似乎也沒有工作，或者我做錯了？

與github上的建議的解決方案的快照測試：

import { Platform } from 'react-native'; 
describe('When loading the Slide component',() => { 
    it('should render correctly on ios',() => { 
    Platform.OS = 'ios'; 
    const tree = renderer.create(
     <Provider store={store}> 
     <Slide /> 
     </Provider>, 
    ).toJSON(); 
    expect(tree).toMatchSnapshot(); 
    }); 

    describe('on devices with a pixelRatio of 2',() => { 
    it('it should render correctly',() => { 
     beforeEach(() => { 
     jest.mock(pxlr,() => ({ 
      get:() => 2, 
      roundToNearestPixel: jest.fn(), 
     })); 
     const pxlr = require('react-native').PixelRatio; 
     } 

     const tree = renderer.create(
     <Provider store={store}> 
      <Slide /> 
     </Provider>, 
    ).toJSON(); 
     expect(tree).toMatchSnapshot(); 
    }); 
    }); 
}); 

Answer 1

當你寫jest.mock('my-module',() => {...})你告訴jest嘲笑模塊的'my-module'名稱。然後當你寫const MyModule = require('my-module')時，你會得到一個模擬。如果PixelRatio是一個模塊，但它不是。 PixelRatio是一個全局JS變量（準確地說JS class）。您可以按如下譏笑它的靜態方法：

1）使用jest.spyOn方法：

const mockGet = jest.spyOn(PixelRatio, 'get') 
    .mockImplementation(() => customImplementation) 
const mockRoundToNearestPixel = jest.spyOn(PixelRatio, 'roundToNearestPixel') 
    .mockImplementation(() => customImplementation) 

2）使用jest.fn方法：

PixelRatio.get = jest.fn(() => customImplementation) 
PixelRatio.roundToNearestPixel = jest.fn(() => customImplementation)