如何测试 React Hook 状态变化

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 函数传递给该类。