Я не могу проверить асинхронный componentDidMount, который изменяет состояние с шуткой и энзимом

Question

Все, что я делаю в своем коде, выполняется при запуске componentDidMount, я делаю запрос axios get на Github и возвращаю некоторые данные обратно в состояние, однако, когда я запускаю тест, он все еще говорит, что состояние является пустым массивом, вот мой компонент ниже:

export default class HelloWorld extends Component {
constructor(props) {
    super(props)
    this.state = {
        goodbye: false,
        data: []
    }

}

async componentDidMount() {
    await this.func()
}

func = async () => {
    let data = await axios.get('https://api.github.com/gists')
    this.setState({data: data.data})
    console.log(this.state)
}

goodbye = () => {
    this.setState((state, currentProps) => ({...state, goodbye: !state.goodbye}))
}

render() {
    return (
        <Fragment>
            <h1>
                Hello World
            </h1>
            <button id="test-button" onClick={this.goodbye}>Say Goodbye</button>
            {
                !this.state.goodbye ? null :
                <h1 className="goodbye">GOODBYE WORLD</h1>
            }
        </Fragment>
    )
}

}

и вот мой тест:

it('there is data being returned', async () => { 
    const component =  await mount(<HelloWorld />)       

    component.update()

    expect(component.state('data')).toHaveLength(30)

})

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

Answer 1

Прежде всего вам нужно смоделировать await axios.get ('https://api.github.com/gists') как-то.

Им, вероятно, вам нужно будет сделать что-то вроде this после компонента.update () для «ожидания».