检查是否用 jest/enzyme 检查了复选框答案

【问题标题】：Check if checkbox is checked with jest/enzyme检查是否用 jest/enzyme 检查了复选框
【发布时间】：2020-04-23 22:17:39
【问题描述】：

如何测试是否选中了多个复选框？

render()
    ...
        <React.Fragment>
              <div
                className='foo'>
                <label>
                  <input
                    className='checkbox'
                    name='bar'
                    type='checkbox'
                    checked={this.props.checked}
                    onChange={() => { } }
                  />
                </label>
              </div>
        </React.Fragment>
    ...

我试过了

it('checks all checkboxes', () => {
    const component = shallow(
        <Foo
            ... />
    )

    expect(component
        .find('input[type="checkbox"][checked="checked"]'))
        .toHaveLength(content.length);
});

和

component
    .find({ type: 'checkbox' })
    .forEach(node => {
        expect(node
            .props
            .checked)
            .toEqual(true);
    });

或

component
    .find('input')
    .forEach(node => {
        expect(node
            .props
            .checked)
            .toEqual(true);
    });

和

component
    .find('.checkbox')
    .forEach(node => {
        expect(node
            .props
            .checked)
            .toEqual(true);
    });

最后三个给我undefined，而第一个返回一个巨大的物体（{Symbol(enzyme.__root__): {Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <Foo....

【问题讨论】：

标签： javascript jestjs enzyme

【解决方案1】：

您只是错过了props 是一个返回道具（而不是直接访问道具）的函数，因此您必须调用它：

component
    .find('input')
    .forEach(node => {
        expect(node
            .props()
            .checked)
            .toEqual(true);
    });

【讨论】：

【解决方案2】：

使用jest-dom，您可以使用expect(node).toBeChecked();

【讨论】：