时间戳

首页 > 解决方案 > 如何在不提供模拟 Redux 存储的情况下测试将 Redux 连接的组件呈现为子组件的 React 组件？

reactjs - 如何在不提供模拟 Redux 存储的情况下测试将 Redux 连接的组件呈现为子组件的 React 组件？

问题描述

我有一个 React 组件，如下所示：

组件1.js

import React from 'react';
import Component2 from './Component2.js';

const Component1 = () => (<div data-test="component1-component"><Component2 /></div>);

组件2.js

import React from 'react';
import { connect } from 'react-redux';

const Component2 = (props) => {
  return(
     <div data-test="component2-component">
       <h1>{`I am Component #2. Key is ${props.key}`}</h1>
     </div>
  );
};

const mapStateToProps = state => ({ key: state.key });

export default connect(mapStateToProps)(Component2);

如您所见，Component1呈现Component2为子组件，并且该子组件连接到 Redux 存储。我想为该测试编写一个 Jest-Enzyme 测试用例Component1，以查看它是否在不连接到 Redux 模拟商店的情况下呈现Component2为其子级。Component2我正在寻找类似以下的内容：

describe('Component1', () => {
  const wrapper = mount(<Component1 />);
  const component1Component = wrapper.find({ "data-test": "component1-component" });
  const component2Component = wrapper.find({ "data-test": "component2-component" });

  it('renders the ~Component2~ as a child component', () => {
    expect(component2Component.exists()).toBeTruthy();
  });
});

目前，我收到一条错误消息，指出商店未提供子组件。我该如何进行测试？

标签： reactjsreduxjestjsenzyme

解决方案

通常你只会浅渲染你的Component1. 这意味着Component1将被“渲染”，但Component1不会渲染的子组件。（浅渲染 api 的文档。）

import { shallow } from 'enzyme';

describe('Component1', () => {
  const wrapper = shallow(<Component1 />);
  ...

在您的示例中，浅渲染将包含一个div和Component2作为该 div 的子级。然而Component2不渲染（它基本上被视为div，无法进一步解析）。因此无需提供任何模拟商店。

请注意，浅渲染Component1将测试限制为Component1,Component2上面的测试根本没有测试，您应该Component2单独测试。（导出未连接的版本Component2并提供所需的道具进行测试。）

完整示例

作为处理连接组件的良好测试的示例，我会推荐react admin的源代码。

例如 SimpleForm 组件（只是随机挑选的）：

旁注： 不要key像普通道具一样使用，因为它有特殊用途来（重新）识别虚拟穹顶中的组件。有关密钥用法的更多信息，请参见此处和此处的文档。像您在示例中所做的那样连接 key prop 将导致 React 为该 prop 的每次更改重新创建组件。

推荐阅读