jest find的问题

来源:5-5 月份选择器添加测试

李行知

2019-02-28

使用jest的find的时候,经常明明只有一个,但是却找到了多个
也就是说我使用document.getElementsByClassName
也只找到了一个,但是最后却提示我找到了多个
一开始的时候推测是不是因为const wrapoer的问题
后来删除了除这个文件以外的测试代码,依旧提示这个信息
去掉第一个it也是一样
希望老师能分析下问题所在

测试代码如下


import * as React from 'react'
import { mount } from "enzyme";
import MonthPicker, { IMonthPickerProps } from './index'
const MothnPikcerProps: IMonthPickerProps = {
  year: 2019,
  month: 8,
  onchange:jest.fn()
}
describe('test month picker', () => {
  const wrapper = mount(<MonthPicker {...MothnPikcerProps} />)
  const pickerClassName='.picker-button'
  const pickerWrapperClassName='.picker-wrapper'
  it('render the current year and month,show current menu',()=>{
    expect(wrapper.find(pickerClassName).first().text()).toEqual('2019年 / 08月')
    expect(wrapper.find(pickerWrapperClassName).length).toEqual(0)
  })
  it('after pickr',()=>{
    wrapper.find(pickerClassName).first().simulate('click')
    expect(wrapper.find(pickerWrapperClassName).length).toEqual(1) // 这个测试
  })
})
写回答

1回答

张轩

2019-03-01

同学你好 我不知道你代码的具体细节 但是你可以 在测试用例里面调试 看看究竟有为什么有多个 class,比如 将 每个 class 的 html 打印出来 console.log(wrapper.find(pickerWrapperClassName
).at(0).html()) console.log(wrapper.find(pickerWrapperClassName
).at(1).html()) 看看它们究竟输出的是什么?

0
2
李行知
后来在issue里面找到了答案。。。不过我还是不知道为什么我跟老师两个人会有差距。。。 https://github.com/airbnb/enzyme/issues/836 要用hostNodes
2019-03-03
共2条回复

React16组件化+测试+全流程 实战在线账本项目

轻松上手,从设计图到上线,精通组件化思维和组件测试

713 学习 · 177 问题

查看课程