模拟来自 HOC 的道具以响应快照测试

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 的道具以响应快照测试

Mocking props from HOC in react for snapshot tests

javascript

firebase

reactjs

jestjs

react-test-renderer