酶shallowWrapper.setState不适用于redux连接的组件

Question

在将其标记为重复之前，请先阅读

因此，我浏览了所有建议的问题，并做了近 2 天的研究来找出问题背后的原因。

这是我所拥有的 -

1.一个名为 SignIn 的组件，具有连接到 redux 存储的某些本地状态。

class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: false };
  }
  render () {
    isLoading
    ? <SomeLoadingComponent />
    : <MainSigninComponent />
  }
}
export default ConnectedSignIn = connect(mapStateToProps)(SignIn);

现在，您可以看到 SignIn 的渲染输出随着本地状态的变化而变化，我打算对这两个输出进行快照测试。

所以我写了两个测试用例。

// This one is alright as it test on the default state and renders the actual SigninComponent.
test(`it renders correctly`, () => {
  const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});

  // .dive() because I intend to snapshot my actual SignIn component and not the connect wrapper.
  expect(wrapper.dive()).toMatchSnapshot();
});

现在，当我打算将状态更改为{ isLoading: true }时，我会在第二个测试中像这样触发对 setState 的调用。

test(`it renders the loading view on setting isLoading state to true`, () => {
  const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});

  console.log(wrapper.dive().state()) // returns { isLoading: false }

  // Again .dive because I want to call setState on my SignIn component

  wrapper.dive().setState({ isLoading: true });
  console.log(wrapper.dive().state()) // still returns { isLoading: false }

  // Tried the callback method to ensure async op completion
  wrapper.dive().setState({ isLoading: true }, () => {
    console.log(wrapper.dive().state()) // still returns { isLoading: false }
  });
});

因此，根据上面的代码和输出，我推断浅层包装器的 setState 无法正常工作，因为实际上没有更新组件的状态。

只是提一下，

1.我还尝试使用wrapper.dive().instance().setState()，因为我在一些问题中读到要更新实例的状态，这种方式会更好。不工作。

2.我还尝试使用wrapper.update()和wrapper.dive().update()强制更新浅层组件。这个也没有成功。

我的依赖版本

“反应”：“16.0.0”，

“反应本机”：“0.50.0”，

"react-redux": "^5.0.6",

"酶": "^3.3.0",

"enzyme-adapter-react-16": "^1.1.1",

“笑话”：“21.2.1”，

“反应-dom”：“^16.2.0”

我已经阅读了有关通过将组件与 redux 分离来单独测试组件的指南。我这样做了，我的测试用例运行得很好，但我想知道这种行为是正常的还是错误，如果有人成功地测试了状态更改以及 redux 连接组件的渲染更改，请让我知道您的方法。

Answer 1

每次使用dive()它时都会创建一个新的包装器，因此您的所有调用都引用一个新的包装器而不是您更新的包装器。相反，你可以尝试这个：

test(`it renders the loading view on setting isLoading state to true, () => {
  const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});
  const component = wrapper.dive()

  component.setState({ isLoading: true });
  console.log(component.state()) // should be {isLoading: true}
});

作为参考，请参阅Jordan Harband对这个 Enzyme 问题的回答。