0

シンプルなサインアウト ボタン コンポーネントの小道具を適切にモックしようとしています。このコンポーネントの唯一の prop は、firebaseと呼ばれる高次コンポーネント (HOC) からの propwithFirebaseです。

import React from 'react';
import { withFirebase } from '../Firebase';

const SignOutButton = ({ firebase }) => (
  <button type="button" onClick={firebase.doSignOut}>
    Sign Out
  </button>
);

export default withFirebase(SignOutButton);
export { SignOutButton as SignOutButtonTest };

私の考えでは、HOC なしで機能コンポーネントをエクスポートし、firebaseプロップを直接モックして、それをスナップショット テスト用のコンポーネントに渡すことができました。

import React from 'react';
import renderer from 'react-test-renderer';
import SignOutButtonTest from '../SignOutButton';

describe('SignOutButton Tests', () => {
    it('renders with some data', () => {
        const props = {
            firebase: {
                doSignOut: () => {},
            }
        };
        const tree = renderer.create(
            <SignOutButtonTest {...props} />
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });
});

ただし、このテストを実行すると、次の結果が得られますTypeError。firebaseスナップショット テストのためにこのプロップを適切にモックする方法について何か考えはありますか?

  ● SignOutButton Tests › renders with some data

    TypeError: Cannot read property 'doSignOut' of null

      3 | 
      4 | const SignOutButton = ({ firebase }) => (
    > 5 |   <button type="button" onClick={firebase.doSignOut}>
        |                                           ^
      6 |     Sign Out
      7 |   </button>
      8 | );
4

1 に答える 1