Enzyme：如何测试容器组件的 props 变化？

Question

为了渲染连接到redux store的容器组件，我使用这个函数来渲染组件

function render(Component, props, storeData) {
  const mockStore = configureStore([thunkMiddleware]);
  const store = mockStore(storeData);

  return mount(
    <Provider store={store}>
      <Component {...props} />
    </Provider>
  );
}

现在，我需要测试渲染组件的道具更改，但看起来ReactWrapper.setProps 仅适用于根组件。
MyComponent 是一个容器组件，它使用connect 连接到存储。

describe('MyComponent', () => {
  it('should work at props change', () => {
    const wrapper = render(MyComponent, { value: 1 }, initialStoreValue);

    wrapper.find(MyComponent).setProps({ value: 2});
    
    // then expect something.
  });
});

Answer 1

需要考虑的几件事：

1. redux-mock-store 允许将函数作为状态源传递 - redux-mock-store 每次都会调用该函数
2. 要使用useSelector 或connect() 触发重新渲染组件，我们只需dispatch() 使用任何操作类型即可。从字面上看。
3. 我们需要将更新存储包装到act() 中，否则可能无法正常工作，肯定会向console.error 投诉。

记住这一点，我们可以增强render：

function render(Component, props, initialStoreData) {
  let currentStoreData = initialStoreData;
  const mockStore = configureStore([thunkMiddleware]);
  const store = mockStore(() => currentStoreData);

  const wrapper = mount(
    <Provider store={store}>
      <Component {...props} />
    </Provider>
  );
  const updateStore = (newStoreData) => {
    currentStoreData = newStoreData;
    act(() => {
      store.dispatch({ type: '' }); // just to trigger re-rendering components
    });
  }
  return { wrapper, updateStore };
}

然后在测试中：

describe('MyComponent', () => {
  it('does something when store changes somehow', () => {
    const { wrapper, updateStore } = render(MyComponent, { value: 1 }, initialStoreValue);
    
    updateStore({ someReduxValue: 2});

    // then expect something.
  });
});