reactjs - jest 快照测试嵌套的 redux “连接”组件答案

【问题标题】：reactjs - jest snapshot testing nested redux "connected" componentsreactjs - jest 快照测试嵌套的 redux “连接”组件
【发布时间】：2017-05-21 21:01:51
【问题描述】：

当快照测试（开玩笑快照）连接到 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)".`

快照时有什么方法可以进行浅渲染吗？还是我做错了什么？

【问题讨论】：

标签： reactjs redux jestjs

【解决方案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 的简单组件。

【讨论】：

您好，更改后我仍然面临同样的错误
Error console.error node_modules/fbjs/lib/warning.js:33 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

【解决方案2】：

对@andreas-köberle 提供的答案稍作调整，因为它可能会产生错误：using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

要解决这个问题，如果你想模拟一个组件，它应该返回一个 fn。示例体现多词命名：

jest.mock('./User', () => () => 'UserThingStuff')

或者返回一个 HTML 元素：

jest.mock('./User', () => 'user-thing-stuff')

【讨论】：

【解决方案3】：

您可以添加 Mock 存储然后在没有连接的情况下测试组件，但使用嵌套的连接组件↓

组件无需连接，但包括嵌套的连接元素 ->

使用 mocking store 进行测试，可以配置哪个状态。↓ 测试前： npm install redux-mock-store --save-dev

test.js ↓

import configureStore from "redux-mock-store";
import {Provider} from "react-redux";

//create mockStore
let mockStore;
//create Obj for config store
const mockStoreConf = configureStore([]);
//configure store (add states)
mockStore = mockStoreConf({
    someStateInMockStore: `SomeValueFromMockKetInMockStore`,
       });
const tree = renderer.create(
      <Provider store={mockStore}>
        <Component />
      </Provider>
    );
expect(tree).toMatchSnapshot();

现在您的组件的嵌套连接子项从您的 mockStore 获取状态。只需在配置步骤中添加所需的状态（//配置存储（添加状态））。

来自https://www.robinwieruch.de/react-connected-component-test的信息

【讨论】：