reactjs

Question

当快照测试（玩笑快照）连接到 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 上进行运行ning 快照测试时，我以与在 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。

Answer 2

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

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

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

或 return 一个 HTML 元素：

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

Answer 3

您可以添加 Mock store，然后测试没有 connect 的组件，但有嵌套的 connect 组件 ↓

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

用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

reactjs - 开玩笑快照测试嵌套的 redux "connected" 组件

reactjs - jest snapshot testing nested redux "connected" components

jestjs

redux