javascript - 来自 HOC 的模拟道具对快照测试做出反应

Question

我正在尝试适当地模拟一个简单的退出按钮组件的道具。该组件中唯一的firebase道具是来自名为withFirebase.

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直接模拟 prop 并将其传递给组件以进行快照测试。

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 | );

Answer 1

使用命名导出而不是默认导出。这里：

import SignOutButtonTest from '../SignOutButton';

您仍在导入 HOC 版本。

它应该是：

import { SignOutButtonTest } from '../SignOutButton';