携程租车 React Native 单元测试实践

"devDependencies": {       "@testing-library/react-hooks": "^3.2.1",  //React Hooks测试支持，仅支持React 16.9.0以上    "babel-jest": "^24.8.0",    "enzyme": "^3.10.0",    "enzyme-adapter-react-16": "^1.14.0", //依据对应React版本安装，React 15需安装enzyme-adapter-react-15    "jest": "^24.8.0",    "jest-junit": "^7.0.0",    "jest-react-native": "^18.0.0", //RN支持，非RN可以不装     "react-test-renderer": "16.9.0",     "redux-mock-store": "^1.5.3" //Redux测试模拟store}

module.exports = {  preset: 'react-native',  globals: { //模拟的全局变量    _window: {},    __DEV__: true,  },  setupFiles: ['./jest.setup.js'], //运行测试前需运行的初始化文件，例子在下方  moduleNameMapper: { //需要模拟的静态资源    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':    "\\.(css|less|scss)$": "<rootDir>/__mocks__/stylesMock.js"  },  transform: { //转译配置，RN项目配置如下，普通React项目可以使用babel-jest    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',  },  testMatch: ['**/__tests__/**/*.(spec|test).js'],//正则匹配的测试文件  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],  unmockedModulePathPatterns: ['<rootDir>/node_modules/react'],  collectCoverage: true,  collectCoverageFrom: [//生成测试报告时需覆盖测试的文件    'src/**/*.js',  ],  coverageReporters: ['text-summary', 'json-summary', 'lcov', 'html', 'clover'],  testResultsProcessor: './node_modules/jest-junit',  transformIgnorePatterns: ['<rootDir>/node_modules/(?!@ctrip|react-native)'], //transform白名单};

function add(x, y) {    return x + y;}

  test('should return 3', () => {    const x = 1;    const y = 2;    const output = 3;    expect(add(x, y)).toBe(output);  });});

beforeAll(() => {  console.log('所有测试用例测试之前运行');});
afterAll(() => {  console.log('所有测试用例测试完毕后运行');});
beforeEach(() =>{  console.log('每个测试用例测试之前运行');});
afterEach(() => {  console.log('每个测试用例测试完毕后运行');});

jest.useFakeTimers(); //mock时间
jest.mock('./src/commons/CViewPort', () => { //mock一些组件  return props => {    return <View {...props}>{props && props.children}</View>;  };});
jest.mock('./src/commons/CToast', () => {  return {    show: () => {},  };});

const InteractionManager = {  runAfterInteractions: callback => callback(),};
module.exports = InteractionManager;

jest.mock('InteractionManager');

it('render List', () => {  const tree = renderer.create(<List {...props} />).toJSON();  expect(tree).toMatchSnapshot();});

const cityInfo = {    1: '北京',    2: '上海'}
export default function fetch(url, params) {   return new Promise((resolve, reject) => {      if (params.cityId && cityInfo[params.cityId]) {        resolve(cityInfo[params.cityId]);      } else {        reject('city not found');      }    });}

it('test cityInfo', async () => {  expect.assertions(1); //检测用例中有多少个断言被调用  const data = await fetch('/cityInfo', {cityId: 1});  expect(data).toEqual('北京');});

import { mount, shallow, render } from ‘enzyme';

const onClickLabel = jest.fn();const label = shallow(<Label filterData={filterData} onClickLabel={onClickLabel} />);
label.childAt(0).find({ eventName: 'click filterLabel' }).simulate('press');expect(onClickLabel).toBeCalled();

const fliterModal = shallow(<FilterModal {...props} />);const instance = fliterModal.instance(); //获取当前组件实例
//jest.spyOn创建一个mock函数，该mock函数不仅捕获函数的调用情况，还可以正常的执行被spy的函数。jest.spyOn(instance, '_onClear');
instance.forceUpdate();
fliterModal.childAt(0).simulate('press');expect(instance._onClear).toBeCalled();//测试组件实例上的方法是否被调用

import configureMockStore from 'redux-mock-store';import thunk from 'redux-thunk';import { updateList } from '../pages/List/action';
const middlewares = [thunk];//引入redux-mock-store 对store进行mockconst mockStore = configureMockStore(middlewares);
describe('list action test', () => {  it('updateList test', () => {    const store = mockStore({ flist: {} });    const mockData = {      flist: { afitem: 1 }    };
    const expectedActions = { type: 'UPDATE_LIST', flist: { afitem: 1 }};
    expect(store.dispatch(updateList(mockData.flist))).toEqual(expectedActions);  });});

npm install --save-dev @testing-library/react-hooks

// useCityName.jsimport { useState, useCallback } from 'react';export default function useCityName() {  const [cityName, setCityName] = useState('北京');  const format = useCallback(() => setCityName(x => x + '市'), []);  return { cityName, format };}

// useCityName.test.jsdescribe('test useCityName', () => {  it('should use cityname', () => {    const { result } = renderHook(() => useCityName());    expect(result.current.cityName).toBe('北京');    expect(typeof result.current.format).toBe('function');  });
  it('should format cityname', () => {    const { result } = renderHook(() => useCityName());    act(() => {      result.current.format();    });    expect(result.current.cityName).toBe('北京市');  });});

// useCityInfo.jsimport { useEffect } from 'react';
export default function useCityInfo({ cityInfo, id }) {  useEffect(() => {    cityInfo[id] = '北京';    return () => {      cityInfo[id] = '上海';    };  }, [id]);}// useCityInfo.test.jsdescribe('test useCityName', () => {  it('should handle useEffect hook', () => {    const cityInfo = {      1: '北京',      2: '上海',    };
    const { sideEffect, unmount } = renderHook(useCityInfo, { initialProps: { cityInfo, id: 1 } });
    sideEffect({ cityInfo, id: 1 });
    expect(cityInfo[1]).toBe('北京');
    sideEffect({ cityInfo, id: 2 });
    expect(cityInfo[2]).toBe('北京');
    unmount();
    expect(cityInfo[1]).toBe('上海');    expect(cityInfo[2]).toBe('上海');  });});

"scripts": {,    "test": "jest --forceExit --silent"},"devDependencies": {    "husky": "^3.0.9"},"husky": {    "hooks": {        "pre-push": "npm run test"    }},