Лучший способ написать интеграционные тесты в React с Redux и Enzyme - PullRequest
Новая
       18

Лучший способ написать интеграционные тесты в React с Redux и Enzyme

0 голосов
/ 24 октября 2019

Я пытаюсь написать несколько интеграционных тестов в своем приложении.

У меня есть пара API-вызовов, которые вызываются для componentDidMount и при нажатии кнопки. Ответ API сохраняется в Store, что обновляет представление.

Как проверить эту интеграцию с API?

Это мой код WIP: 

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

Заранее спасибо.

1 Ответ

1 голос
/ 24 октября 2019

Есть несколько ошибок:

  1. redux-mock-store не работает редуктор. Чтобы протестировать реальный редуктор и реальные действия (в противном случае ваш макет axios никогда не будет применен к компоненту), вам нужно вместо этого использовать реальный магазин.
  2. , поскольку ваши axios макеты основаны на Promise, вам нужно либо moxios.wait или setTimeout() / await <anything> перед запуском проверки. В противном случае обещание не будет выполнено к тому времени, когда вы попытаетесь что-то подтвердить.
  3. И вам на самом деле не нужен wrapper.update(), поскольку он будет работать с избыточностью, как только вы обработаете элементы # 1 и # 2

В своем тесте вы должны проверить внешний вид вашего компонентакак ожидается, после успешной загрузки данных. 

// 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
...