javascript - .getAttribute 不是函数

Question

你好，我是 JS 新手，代码中可能有更多错误。但我不明白为什么 getAttribute 不是一个函数。

测试:

test('TESTING', () => {
    const filterNodes = [
        <div key='1' value='foo' />,
        <div key='2' value='bar' />
    ]
    const filtersKeyValue = {
        key: ['0', '1', '1', '3'],
        value: ['foo', 'bar', 'toto', 'react']
    }

    expect(fillReportSpecFiltersWithValues(filterNodes, filtersKeyValue)).toBe()
})

代码:

export const fillReportSpecFiltersWithValues = (filterNodes, filtersKeyValue = {}) => {
    for (const key in filtersKeyValue) {
        const value = filtersKeyValue[key]
        for (const filterNode of filterNodes) {
            if (filterNode.getAttribute('key') === key) {
                filterNode.setAttribute('value', value)
            }
        }
    }
}

非常感谢任何建议？

Answer 1

听起来您的工作是测试 fillReportSpecFiltersWithValues。

它接受具有 getAttribute 和 setAttribute 属性的对象数组，以及表示键​​/值对的对象。

不要通过创建模拟 DOM 元素来测试它，而是通过创建适当的模拟对象来测试它:

test('fillReportSpecFiltersWithValues', () => {
  const filterNodes = [
    { getAttribute: () => '1', setAttribute: jest.fn() },
    { getAttribute: () => '2', setAttribute: jest.fn() },
    { getAttribute: () => '3', setAttribute: jest.fn() }
  ]
  const filtersKeyValue = {
    '1': 'foo',
    '2': 'bar'
  }

  fillReportSpecFiltersWithValues(filterNodes, filtersKeyValue);

  expect(filterNodes[0].setAttribute).toHaveBeenCalledWith('value', 'foo');  // Success!
  expect(filterNodes[1].setAttribute).toHaveBeenCalledWith('value', 'bar');  // Success!
  expect(filterNodes[2].setAttribute).not.toHaveBeenCalled();  // Success!
});