Как смоделировать React setState для тестирования API - PullRequest
Новая
       36

Как смоделировать React setState для тестирования API

0 голосов
/ 02 ноября 2019

Я построил api компонента реагирования, который я хотел бы протестировать. API-интерфейс не зависит от хука реакции useState для тестирования. Таким образом, мой API получает состояние и setState из созданного мной пользовательского хука с именем useAPI: 

const useAPI = (api, initialState) => {
    const [state, setState] = useState(initialState)
    return api({ state, setState })
}

, а сокращенный упрощенный пример моего API выглядит следующим образом: 

const anAPI = ({state, setState}) => {
    const name = state.name
    const surname = state.surname

    const updateName = (newValue) => {
        setState(prevState => (
            {...prevState, name: newValue}
        )) 
    }
}

Я бы хотел протестировать этот API без использования хуков. Тем не менее, я не уверен, как смоделировать функцию setState, чтобы я мог передать ее в API и заставить ее работать должным образом. Упрощенный файл теста может выглядеть следующим образом: 

const state = {name: "", surname: ""}

const setState = someFunction...

const api = anAPI({state, setState})

it("updates name", () => {
    api.updateName("john")
    expect(api.name).toEqual("john")
})

Как должен выглядеть setState, чтобы этот тест работал?

1 Ответ

0 голосов
/ 04 ноября 2019

Разобрался: 

const useApiMock = (api, defaultValue) => {
    let state = defaultValue;
    let setState = updater => {
      if (typeof updater === "function") {
        state = updater(state);
      } else {
        state = updater;
      }
      ref.api = api({ state, setState });
    };
    let ref = {
      api: api({ state, setState })
    };
    return ref;
  };

Тогда используйте вот так: 

const mockApi = useApiMock(someApi, someState)

it("updates name", () => {
    mockApi.api.updateName("new name")
    expect(mockApi.api.name).toEqual("new name")
})
...