get state from redux react component in test jednostkowy - reactjs, unit-testing, redux, jestjs

Wygląda na to, że nie możesz sprawdzić stanu w reakcjikomponenty po utworzeniu ich połączonych komponentów. Czy ktoś wie dlaczego? Aby zilustrować tę kwestię, mam test na element reagujący, który przechodzi bez redux i kończy się niepowodzeniem, gdy tylko go połączysz.

// MyComponent.jsx
import React from "react"

class MyComponent extends React.Component {
constructor(props) {
super(props);

this.state = {
foo: "bar"
};
}

render() {
return <div></div>
}
}

export default MyComponent

Oto pozytywny test:

// MyComponent.test.js
import React from "react"
import MyComponent from "../src/components/MyComponent"
import { mount } from "enzyme"

describe("MyComponent", () => {
describe("interactions", () => {
let wrapper
beforeEach(() => {
wrapper = shallow(<MyComponent />)
})

it("foo to equal bar", () => {
expect(wrapper.state().foo).toEqual("bar")
})
})
})

Teraz wprowadzam Redux i łączę komponent:

// MyComponent.jsx

...

export default connect(function (state){
return {
currentUser: state.currentUser
}
})(MyComponent);

A oto zaktualizowany test:

// MyComponent.test.js
import React from "react"
import MyComponent from "../src/components/MyComponent"
import { mount } from "enzyme"

import configureStore from "redux-mock-store"

describe("MyComponent", () => {
const state = {}
const mockStore = configureStore()

describe("interactions", () => {
let wrapper
beforeEach(() => {
wrapper = mount(<MyComponent store={ mockStore(state) } />)
})

it("foo to equal bar", () => {
expect(wrapper.state().foo).toEqual("bar")
})
})
})

Odpowiedzi:

Polecam po prostu eksportowanie obu connect() (domyślny eksport) i sam komponent.

W ten sposób możesz przetestować komponent osobno poza podłączoną wersją komponentu.

class MyComponent extends React.Component {
constructor(props) {
super(props);

this.state = {
foo: "bar"
};
}

render() {
return <div></div>
}
}

export MyComponent

export default connect(function (state){
return {
currentUser: state.currentUser
}
})(MyComponent);

a następnie test:

import { MyComponent } from "../src/components/MyComponent"
import { mount } from "enzyme"

describe("MyComponent", () => {
describe("interactions", () => {
let wrapper
beforeEach(() => {
wrapper = shallow(<MyComponent />)
})

it("foo to equal bar", () => {
expect(wrapper.state().foo).toEqual("bar")
})
})
})

To jest ponieważ connect() generuje składnik opakowania, który zarządza procesem interakcji ze sklepem. W drugim fragmencie <MyComponent> jest teraz składnikiem generowanym przez connect(), nie twój oryginalny komponent. Będziesz musiał wykopać kolejny poziom zagnieżdżenia głębiej w hierarchii renderowania, aby sprawdzić zawartość stanu rzeczywistego komponentu.