reactjs-jest快照测试嵌套redux“；“已连接”；组件

当快照测试（jest快照）连接到redux store的组件时，除了连接的组件外，我还可以导出实际组件

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

---

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

在这种情况下，最好的方法是通过模仿

用户自己测试
包装器

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
这只是对@andreas-köberle提供的答案的一个小调整，因为它可能会产生错误：
使用不正确的大小写。使用PascalCase表示React组件，或使用小写表示HTML元素

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

jest.mock（'./User'，（）=>（）=>'UserThingStuff'）

或返回HTML元素：

jest.mock（'./User'，（）=>'User thing stuff'）
您可以添加模拟存储，然后使用嵌套的连接组件来测试没有连接的组件↓

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

使用模拟存储进行测试，可以配置哪个状态。↓
测试前：npm安装redux模拟存储——保存开发

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

从“redux模拟存储”导入configureStore；
从“react redux”导入{Provider}；
//创建模拟商店
让我们来储存；
//为配置存储创建Obj
const mockStoreConf=configureStore（[]）；
//配置存储（添加状态）
mockStore=mockStoreConf({
someStateInMockStore:`SomeValueFromMockKetInMockStore`，
});
const tree=renderer.create(
);
expect（tree.toMatchSnapshot（）；

现在，组件的嵌套连接子级从mockStore获取状态。
只需在配置步骤（//配置存储（添加状态））上添加所需的状态即可

来自
Hi的信息进行更改后，我仍然面临相同的错误错误错误控制台。错误节点_modules/fbjs/lib/warning.js:33 warning:React.createElement:type无效--应为字符串（用于内置组件）或类/函数（用于复合组件），但未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
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();