rn-fetch-blob：如何测试上传图片

Question

如何使用 jestjs 模拟 RNFetchBlob 上传图片？

代码：

await RNFetchBlob.fetch(
  'POST',
  'https://www.example.net/api/v1/upload-image',
  {
    Authorization: 'Bearer token',
    'Content-Type': 'application/octet-stream',
  },
  'base64string',
)
  .then(res => res.json())
  .then(res => {
    setUrl(res.url);
  });

Answer 1

您可以使用 jest.mock(moduleName, factory, options) 模拟 rn-fetch-blob 模块。下面是一个单元测试方案。

例如

index.js:

import RNFetchBlob from 'rn-fetch-blob';
import React, { useState } from 'react';

const UploadComponent = () => {
  const [url, setUrl] = useState('');

  const upload = async () => {
    await RNFetchBlob.fetch(
      'POST',
      'https://www.example.net/api/v1/upload-image',
      {
        Authorization: 'Bearer token',
        'Content-Type': 'application/octet-stream',
      },
      'base64string',
    )
      .then((res) => res.json())
      .then((res) => {
        setUrl(res.url);
      });
  };

  return (
    <div>
      <button onClick={upload}>Upload</button>
      <span>{url}</span>
    </div>
  );
};

export default UploadComponent;

index.test.js:

import UploadComponent from './';
import { shallow } from 'enzyme';
import { act } from 'react-dom/test-utils';
import RNFetchBlob from 'rn-fetch-blob';

jest.mock(
  'rn-fetch-blob',
  () => {
    const mRNFetchBlob = {
      fetch: jest.fn(),
    };
    return mRNFetchBlob;
  },
  { virtual: true },
);

const whenStable = async () =>
  await act(async () => {
    await new Promise((resolve) => setTimeout(resolve, 10));
  });

describe('60116223', () => {
  it('should upload image', async () => {
    const mJSON = { url: 'https://www.example.net/api/v1/upload-image' };
    const mResponse = { json: jest.fn().mockReturnValueOnce(mJSON) };
    RNFetchBlob.fetch.mockResolvedValueOnce(mResponse);
    const wrapper = shallow(<UploadComponent></UploadComponent>);
    expect(wrapper.find('span').text()).toBe('');
    wrapper.find('button').simulate('click');
    await whenStable();
    expect(wrapper.find('span').text()).toBe(mJSON.url);
  });
});

100% 覆盖率的单元测试结果：

 PASS  Whosebug/60116223/index.test.js (6.171s)
  60116223
    ✓ should upload image (27ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 index.js |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.194s

源代码：https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/Whosebug/60116223

rn-fetch-blob：如何测试上传图片

rn-fetch-blob: How to test upload image

binaryfiles

jestjs

react-native

react-native-fetch-blob

rn-fetch-blob