Question

我正在尝试适当地模拟一个简单的退出按钮组件的道具。此组件中唯一的道具是firebase道具，它来自名为withFirebase的高阶组件（HOC）。

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

Answer 1

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

import SignOutButtonTest from '../SignOutButton';

您仍在导入HOC版本。

应该是：

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

HOC的模拟道具在快照测试中做出反应

1 个答案: