Jest.fn().mockReturnValue returns 未定义

Question

下面提到的模拟函数在名为 useFirestore 的文件中使用时会出现以下错误：无法读取未定义的属性 'collection' .

firebase.js

import Firebase from 'firebase/app';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/auth';

const config = {'// Firebase config'};

const firebase = !Firebase.apps.length ? Firebase.initializeApp(config) : Firebase.app;

export const { serverTimestamp } = Firebase.firestore.FieldValue;

export default firebase;

setupTests.js

import '@testing-library/jest-dom';


jest.mock('./firebase', () => ({
  storage: jest.fn(),
  firestore: jest.fn().mockReturnedValue({
    collection: jest.fn().mockReturnThis(),
    orderBy: jest.fn().mockReturnThis(),
    onSnapshot: jest.fn().mockReturnThis(),
  }),
}));

自定义挂钩

import firebase from '../firebase';

function useFirestore(collectionName) {
  const [docs, setDocs] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const unsub = firebase
      .firestore() // logs cannot read property collection of undefined
      .collection(collectionName)
      .orderBy('createdAt', 'desc')
      .onSnapshot(
        (snapshot) => {
          setDocs(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
          setLoading(false);
        },
        (err) => {
          console.log(err);
        }
      );
    return unsub;
  }, [collectionName]);

  return {
    docs,
    loading,
  };
}

export default useFirestore;

jest.config.js

module.exports = {
  collectCoverageFrom: [
    'src/**/*.{js,jsx}',
    '!<rootDir>/node_modules/',
    '!<rootDir>/coverage/',
    '!<rootDir>/build/',
  ],
  moduleNameMapper: { '\.(css|scss)$': '<rootDir>/src/utils/__mocks__/stylemock.js' },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
};

上面提到的配置returns未定义。但是，当我将 firestore 的模拟实现更改为以下内容时，它可以正常工作。

jest.mock('./firebase', () => ({
  storage: jest.fn(),
  firestore: () => ({ // not using jest.fn() and mockReturnValue
    collection: jest.fn().mockReturnThis(),
    orderBy: jest.fn().mockReturnThis(),
    onSnapshot: jest.fn().mockReturnThis(),
  }),
}));

如有不妥请指点。谢谢

Answer 1

朋友，打错了！在类型 jest.Mock 上没有 mockReturnedValue 这样的东西，你可能想使用 mockReturnValue.

Jest.fn().mockReturnValue returns 未定义

Jest.fn().mockReturnValue returns undefined

mocking

jestjs

babel-jest