HOC包装的嵌套React组件上的一种访问状态如何? [英] How does one access state on a nested React component wrapped by an HOC?

问题描述

我正在使用酶，我们实际上可以使用

I'm using Enzyme, and we can actually use the example component given in the docs as a foundation for my question.

假设此<Foo />组件使用ReactRouter中的<Link>组件，因此我们需要将其包装在<MemoryRouter>中进行测试.

Let's assume this <Foo /> component uses a <Link> component from ReactRouter and thus we need to wrap it in a <MemoryRouter> for testing.

问题出在这里.

it('puts the lotion in the basket', () => {
  const wrapper = mount(
    <MemoryRouter>
      <Foo />
    </MemoryRouter>
  )

  wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want!
  wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root!
})

因此，不确定使用<MemoryRouter>时如何访问本地组件状态.

So, not exactly sure how to access local component state when using <MemoryRouter>.

也许我正在执行无知的测试?是否试图在测试中获取/设置组件状态错误做法?我无法想象是这样，因为酶具有获取/设置组件状态的方法.

Perhaps I'm performing an ignorant test? Is trying to get/set component state bad practice in testing? I can't imagine it is, as Enzyme has methods for getting/setting component state.

只是不确定应该如何访问包装在<MemoryRouter>中的组件的内部.

Just not sure how one is supposed to access the internals of a component wrapped in <MemoryRouter>.

任何帮助将不胜感激！

推荐答案

所以最新版本的酶，此问题可能会解决在子组件上访问状态的问题.

So it seems with the latest release of Enzyme there is a potential fix for this issue of accessing state on a child component.

假设我们有<Foo>(请注意使用React Router的<Link>)

Let's say we have <Foo> (note the use of React Router's <Link>)

class Foo extends Component {
  state = {
    bar: 'here is the state!'
  }

  render () {
    return (
      <Link to='/'>Here is a link</Link>
    )
  }
}

注意:以下代码仅在Enzyme v3中可用.

Note: The following code is only available in Enzyme v3.

重新访问测试代码，我们现在可以编写以下内容

Revisiting the test code, we are now able to write the following

it('puts the lotion in the basket', () => {
  const wrapper = mount(
    <MemoryRouter>
      <Foo />
    </MemoryRouter>
  )

  expect(wrapper.find(Foo).instance().state).toEqual({
    bar: 'here is the state!'
  })
})

使用wrapper.find(Child).instance()，即使它是嵌套组件，我们也可以访问Child的状态.在以前的酶版本中，我们只能在根目录上访问instance.您还可以在Child包装器上调用setState函数！

Using wrapper.find(Child).instance() we are able to access Child's state even though it is a nested component. In previous Enzyme versions we could only access instance on the root. You can also call the setState function on the Child wrapper as well!

我们可以在浅层测试中使用类似的模式

We can use a similar pattern with our shallowly rendered tests

it('puts the lotion in the basket shallowly', () => {
  const wrapper = shallow(
    <MemoryRouter>
      <Foo />
    </MemoryRouter>
  )

  expect(wrapper.find(Foo).dive().instance().state).toEqual({
    bar: 'here is the state!'
  })
})

请注意在浅层测试中使用 dive ，可以在单个非DOM节点上运行，并且将返回浅层渲染的节点.

Note the use of dive in the shallow test, which can be run on a single, non-DOM node, and will return the node, shallow-rendered.

参考:

• https://github.com/airbnb/enzyme/issues/361
• https://github.com/airbnb/enzyme/issues/1289
• https://github.com. com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3

• https://github.com/airbnb/enzyme/issues/361
• https://github.com/airbnb/enzyme/issues/1289
• https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3

这篇关于HOC包装的嵌套React组件上的一种访问状态如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！