Reactjs - Jest 快照测试嵌套 redux "connected"组件

Question

当快照测试( Jest 快照)连接到 redux 存储的组件时，除了连接的组件之外，我还可以导出实际组件

// User.js

/* ... */

export class User extends React.Component {/* ... */}

/* ... */

export default connect(mapStateToProps)(User);

在测试文件中，我可以导入实际组件(而不是连接的版本)并对其进行快照测试。

// User.spec.js

import { User } from './User';

/* ... toMatchSnapshot() testing */

但是当连接的组件嵌套在另一个连接的组件内时，我遇到了问题。例如，假设 User 组件嵌套在另一个连接的组件内 -

// Wrapper.js

import User from './User'; // importing the connected version

/* ... */

export class Wrapper extends React.Component {

  /* ... */

  render() {
    return (
      <div>
        /* ... */
        <User />
      </div>
    );
  }
}

export default connect(mapStateToProps)(Wrapper);

当在 Wrapper 上运行快照测试时，与在 User 上运行的方式相同，出现以下错误:

Invariant Violation: Could not find "store" in either the context or props of "Connect(User)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(User)".`

快照时有什么办法浅渲染吗？还是我做错了什么？

Answer 1

在这种情况下，最好的方法是通过模拟 User 来单独测试 Wrapper

import Wrapper from './Wrapper'

jest.mock('./User', () => 'User') // note that the path to user is relative the test file not to  the Wrapper.js file.

这将用名为 User 的简单组件替换 User。