Question

it('render list',() => {
    const handleClick = jest.fn()
    const mockList = [{id:1011322,name:"Druig"},{id:1009284,name:"Dum Dum Dugan"},{id:101078,name:"Eddie Brock"}] 
    const div = document.createElement('div');
    ReactDOM.render(<AutoComplete match={mockList} className={"autocomplete-items"} onClick={handleClick}/>, div);
    debugger;
    expect(document.querySelectorAll(".autocomplete-items li").length).toBe(3);
    ReactDOM.unmountComponentAtNode(div);
  })

无法选择带有 document.querySelectorAll(".autocomplete-items li") 当我调试document.querySelectorAll(".autocomplete-items li")时，它返回一个奇怪的对象。我在这里想念东西吗？

Answer 1

您应该使用组件呈现的容器元素，而不是div的{{1}}元素。

document：

index.jsx

import React, { Component } from 'react'; class AutoComplete extends Component<any> { render() { return ( <div> <ul className={this.props.className} onClick={this.props.onClick}> {this.props.match.map(item => { return <li key={item.id}>{item.name}</li>; })} </ul> </div> ); } } export default AutoComplete;：

index.spec.jsx

单元测试结果：

import React from 'react';
import ReactDOM from 'react-dom';
import AutoComplete from './index';

describe('AutoComplete', () => {
  it('render list', () => {
    const handleClick = jest.fn();
    const mockList = [
      { id: 1011322, name: 'Druig' },
      { id: 1009284, name: 'Dum Dum Dugan' },
      { id: 101078, name: 'Eddie Brock' }
    ];
    const div = document.createElement('div');
    ReactDOM.render(<AutoComplete match={mockList} className={'autocomplete-items'} onClick={handleClick} />, div);
    expect(div.querySelectorAll('.autocomplete-items li').length).toBe(3);
    ReactDOM.unmountComponentAtNode(div);
  });
});

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58820204

用笑话测试时如何选择dom

1 个答案: