Напишите test для проверки локального вызова setState с помощью jest и testing-реагировать-библиотекой - PullRequest
0 голосов
/ 14 ноября 2018

В настоящее время я использую реагирующую библиотеку и не могу понять, как проверить setState для компонентов.

В следующем примере я пытаюсь проверить правильность количества загруженных элементов на основе данных из API. Позже расширим это, чтобы проверить такие вещи, как взаимодействие между предметами.

Компонент:

...

componentDidMount() {
    this.getModules();
}

getModules () {
    fetch('http://localhost:4000/api/query')
    .then(res => res.json())
    .then(res => this.setState({data : res.data}))
    .catch(err => console.error(err))
}

...

render() {
  return(
      <div data-testid="list">
          this.state.data.map((item) => {
              return <Item key={item.id} data={item}/>
          })
      </div>
  )
}

Тест:

...

function renderWithRouter(
    ui,
    {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},) {
    return {
        ...render(<Router history={history}>{ui}</Router>),
        history,
    }
}

...

test('<ListModule> check list items', () => {
     const data = [ ... ]
     //not sure what to do here, or after this
     const { getByTestId } = renderWithRouter(<ListModule />)

     ...

     //test the items loaded
     expect(getByTestId('list').children.length).toBe(data.length)

     //then will continue testing functionality

})

Я понимаю, что это связано с шутливыми макетными функциями, но не понимаю, как заставить их работать с настройкой состояний или с имитацией API.

Пример реализации (работает!)

С большей практикой и изучением того, как сделать компоненты тестируемыми, я смог заставить это работать. Вот полный пример для справки: https://gist.github.com/alfonsomunozpomer/de992a9710724eb248be3842029801c8

const data = [...]

fetchMock.restore().getOnce('http://localhost:4000/api/query', JSON.stringify(data));

const { getByText } = renderWithRouter(<ListModule />)

const listItem = await waitForElement(() => getByText('Sample Test Data Title'))

1 Ответ

0 голосов
/ 14 ноября 2018

Вам следует избегать непосредственного тестирования setState, так как это деталь реализации компонента. Вы находитесь на правильном пути к проверке правильного числа элементов. Вы можете смоделировать функцию fetch, заменив window.fetch на функцию Jest mock или воспользовавшись библиотекой fetch-mock , чтобы справиться с тяжелой работой.

// Note that this method does not build the full response object like status codes, headers, etc.
window.fetch = jest.fn(() => {
  return Promise.resolve({
    json: () => Promise.resolve(fakeData),
  });
});

OR

import fetchMock from "fetch-mock";
fetchMock.get(url, fakeData);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...