急~~老师为何我这个checked元素拿到它的状态

来源：5-3 React 测试工具 - react-testing-library

Lee_Zf

2021-03-22

图片描述

下面是jest代码

    it('if checked, all other options are checked', () => {
      const onChangeMock = jest.fn();
      const wrapper = render(<MultiCheck options={options} values={[]} onChange={onChangeMock}/>);
      const selectAllElement = wrapper.queryByTestId('0_0') as HTMLInputElement;
      fireEvent.click(selectAllElement);
      expect(selectAllElement.checked).toEqual(true);
      expect(onChangeMock).toHaveBeenCalledWith(options);
    });

下面这是控制台报错
图片描述

写回答

3回答

张轩

2021-03-24

已采纳

同学你好你的测试用例和你在 App 中的实现是有出入的，因为你在测试用例中，

// 你在这里点击任何选项，组件并没有更新，只是发送出来了 onChange 事件
const wrapper = render(<MultiCheck options={options} values={[]} onChange={onChangeMock}/>)
// 所以自然你的 checkbox 并没有任何的修改

而你在 App 当中你用一个另外的状态包裹了，对应的组件

const [selectedValues, setSelectedValues] = useState<string[]>(defaultValues);

function onSelectedOptionsChange(options: Option[]): void {
    setSelectedValues(options.map(it => it.value))
}

<MultiCheck label='my-multi-check' options={options}
    onChange={onSelectedOptionsChange}
    values={selectedValues}
    columns={4}
/>
// 在这里你每次 onChange 以后，setSelectedValues 被调用，组件被更新。

//所以解决方案就是，你需要将 测试用例中 包裹对应的内容。或者 你的 case 就不测试界面是否更新，
而只测试点击的时候，onChange 是否被正确的触发

Lee_Zf

谢谢老师 , 茅塞顿开. 非常感谢

2021-03-24

共1条回复