如何测试React钩子状态的变化

Question

这是我的班级Query:

export default class Query {
constructor(env, query, updateQuery) {
this.query = query //
this.env = env
this.updateQuery = updateQuery
}

generateDefault() {
const routers = this.env.routers

return {
ipVersion: constants.SelectorIPVersion.choices[0].id,
network: constants.SelectorNetwork.choices[0].id,
router: routers && routers.length > 0 ? routers[0].id : null,
command: constants.SelectorCommands.choices[0].id,
parameters: {
id: 'myIP',
value: this.env.myIP.ipv4,
isValid: true,
},
}
}

reset() {
this.updateQuery(this.generateDefault())
}
//rest of code
}

export default function LookingGlassPanelContainer(props) {
const { env, isServerDown } = props
const defaultQuery = new Query(env).generateDefault()
const [query, setQuery] = useState(defaultQuery)
let _query = new Query(env, query, setQuery)
//rest of code
} 

› handleReset
TypeError: this.updateQuery is not a function
131 |
132 |   reset() {
> 133 |     this.updateQuery(this.generateDefault())
|          ^
134 |   }
136 |   setRequestTimeout() {
at Query.reset (src/LookingGlass/components/Query/Query.js:133:10)
at Object.<anonymous> (src/LookingGlass/components/Query/Query.test.js:86:24)

我的测试案例:

describe( 
//here i have defined const query and const env
it('handleReset', () => { 
let _query = new Query(env, query) 
console.log(_query.reset()) 
}) 
)

写完Query的测试用例后发现了错误，有人能帮我解释一下这个错误是什么意思吗?我是新手，所以我不知道如何在测试用例中保持状态。我不知道如何在测试用例中通过setQuery，因为setQuery是setter。我不想改变我的代码，我可以改变我的测试用例，但不能改变代码。

Answer 1

您没有将updateQuery参数传递给构造函数。

你的类需要3个参数:

constructor(env, query, updateQuery) {
this.query = query //
this.env = env
this.updateQuery = updateQuery
}

您的reset功能取决于updateQuery是一个功能:

reset() {
this.updateQuery(this.generateDefault())
}

在你的<LookingGlassPanelContainer />组件中，你只传递env:

const defaultQuery = new Query(env).generateDefault()

这意味着updateQuery没有定义，类期望它是一个函数。

无论updateQuery应该是什么，当您初始化它时，您需要将它传递给构造函数:

const defaultQuery = new Query(env, null, () => {}).generateDefault()

…

编辑

您用您的测试用例更新了问题:

引用你的测试:

it('handleReset', () => { let _query = new Query(env, query) 
console.log(_query.reset()) }) )

这里也是同样的问题。您没有将updateQuery函数传递给类。