gpt4 book ai didi

reactjs - componentDidMount 中使用的 setState 值未反射(reflect)在 Enzyme 测试中

转载 作者:行者123 更新时间:2023-12-03 13:16:50 24 4
gpt4 key购买 nike

Component.js

import React from 'react'
import request from 'superagent'

export default React.createClass({
getInitialState() {
return {cats: []}
},

componentDidMount() {
request('/api', (err, res) => {
if (err) return;
this.setState({
cats: res.body.results
})
})
},

render() {
let cats = this.state.cats
let catsList = (
<ul>
{cats.map((c) => <li key={c.id}>cat</li>)}
</ul>
)
return (
<div>
{cats.length ? catsList : null}
</div>
)
}
})

Component.test.js

jest.unmock('../app.js')
jest.unmock('superagent')

import React from 'react'
import {mount} from 'enzyme'
import nock from 'nock'
import App from '../app.js'

describe('App', () => {
let ajaxFn
beforeEach(() => {
ajaxFn = nock('http://localhost')
.get('/api')
.reply(200, {
results: [{id: 1}, {id: 2}, {id: 3}]
})
})

it('renders correct number of cats', () => {
let wrapper = mount(<App />)
expect(wrapper.state('cats').length).toBe(3)
})
})

测试未通过。 wrapper.state('cats').length 始终为 0

据我所知,setState 不能保证立即更新状态,但是,如果我在组件中记录“cats”,我可以看到它正在更新。

最佳答案

如果您最终在 enzyme 不知道的某些上下文中设置了组件的状态,则必须在包装器上手动调用 .update() 才能使其获取渲染树的更新版本。

it('renders correct number of cats', () => {
let wrapper = mount(<App />)
expect(wrapper.update().state('cats').length).toBe(3)
})

关于reactjs - componentDidMount 中使用的 setState 值未反射(reflect)在 Enzyme 测试中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35927687/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com