W jaki sposób jeden stan dostępu w zagnieżdżonym składniku React owinięty przez HOC?

Question

Używam Enzyme i możemy faktycznie użyć komponentu example podanego w dokumentach jako podstawę dla mojego pytania.

Załóżmy, że ten komponent <Foo /> korzysta z komponentu <Link> z ReactRouter i dlatego musimy go przetestować w postaci <MemoryRouter>.

Tutaj leży problem.

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! 
}) 

Tak, dokładnie nie wiem, jak uzyskać dostęp do lokalnego stanu komponentu przy użyciu <MemoryRouter>.

Być może wykonuję nieświadomy test? Czy próbujesz uzyskać/ustawić zły stan składników w testach? Nie mogę sobie tego wyobrazić, ponieważ Enzym ma metody pobierania/ustawiania stanu komponentu.

Tylko nie wiem, w jaki sposób należy uzyskać dostęp do elementów wewnętrznych komponentu owiniętego w <MemoryRouter>.

Każda pomoc będzie bardzo ceniona!

Answer 1

Wygląda na to, że z latest release Enzymu istnieje potencjalna poprawka dla tego problemu dostępu do stanu na komponencie potomnym.

Powiedzmy mamy <Foo> (uwaga użycie React routera <Link>)

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

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

Uwaga: Poniższy kod jest dostępna tylko w Enzyme v3.

Revisiting kodu testowego, jesteśmy teraz w stanie napisać następujące

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!' 
    }) 
}) 

Korzystanie wrapper.find(Child).instance() jesteśmy w stanie uzyskać dostęp Child jest stan, mimo że jest zagnieżdżony komponent. W poprzednich wersjach Enzymu mogliśmy uzyskać dostęp tylko do katalogu instance. Możesz również wywołać funkcję setState na opakowaniu !

Możemy użyć podobnego wzorca z naszych płytko świadczonych testów

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!' 
    }) 
}) 

Zauważ użycie dive w płytkiej testu, który można uruchomić na jednym, węzeł non-DOM, i powróci do węzła , płytko renderowane.

---

Refs:

• 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