使用 Redux 和 Enzyme 在 React 中编写集成测试的最佳方法

Question

I'm trying to write some integrations tests in my application.

I have a couple API calls, that's called on componentDidMount and on button click. The API response it's saved on Store, which update the view.

How can I test this integration with the API?

This is my WIP code:

    let wrapped

    const options = {
        disableLifecycleMethods: true 
    }

    const mockPlanet = {
        name: "Yavin IV",
        climate: "temperate, tropical",
        terrain: "jungle, rainforests",
        population: "1000",
        films: ["A New Hope"],
        url: "https://swapi.co/api/planets/3/"
    }

    const initialPlanet = {
        name: "Alderaan",
        climate: "temperate",
        terrain: "grasslands, mountains",
        population: "2000000000",
        films: ["A New Hope", "Revenge of the Sith"],
        url: "https://swapi.co/api/planets/2/"
    }

    const mockStore = configureMockStore([thunk])

    const store = mockStore({
        planets:{    
            planetCount: 1,
            activePlanet: initialPlanet,
            planetCache: [],
            loading: false,
            error: null
        }        
    })

    const address = /https:\/\/swapi.co\/api\/planets/[0-9]/

    beforeEach(()=>{
        moxios.install()
        moxios.stubRequest(
            address,
            {
                status: 200,
                response: mockPlanet
            }
        )
    })

    afterEach(()=>{
        moxios.uninstall()
    })

    it('Fetch planet on click',()=>{

        wrapped = mount(
            <Provider store={store}>
                <App/>
            </Provider>, options
        ) 

        wrapped.find('.button-get-planet').first().simulate('click')
        wrapped.update()

       // What should I test here?
   })

Thanks in advance.

Answer 1

There are few gotchas there:

1. redux-mock-store does not run reducer. To test real reducer and real actions(otherwise your axios 's mock will never be applied to component) you need using real store instead.
2. since your axios mocks are Promise-based you need either moxios.wait or setTimeout() / await <anything> before running check. Otherwise Promise will not be fullfilled by time you try to validate something.
3. And you actually don't need wrapper.update() since it will run by redux once you handle items #1 and #2

In your test you have to verify your component looks like expected after data is loaded successfully.

// simulate click
// check some "Loader" is displayed if expected
await Promise.resolve(); // just to flush microtasks queue - or use moxios.wait()
// check real data is rendered accordingly