测试从 useTranslation 返回的对象

Question

我的元素中有以下代码：

ItemComponent

  const { t } = useTranslation('myjson')
  const myobject = t('myobject', { returnObjects: true })
  const renderContent = () => {
    return myobject.map(item => {
        return (<Item key={item} onClick={() => props.handleClick(item.name)}> <Icon type={item.iconType} />{item.name}</Item>)
      }
    })
  }

ItemComponent.test.js


it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render(<ItemComponent></ItemComponent>,div);
})

myjson

{
 "myobject":[
      
        {
          "name": "Name1",
          "iconType": "Icon1"
        },
        {
          "name": "Name2",
          "iconType": "Icon2"
        }
      ]
}

和一个简单的渲染测试但是当我运行测试时我收到错误 myobject.map is not a function 有没有办法正确测试这个？不确定为什么会出现此错误，所以我不知道要研究或尝试什么

我试过 let entries = Object.keys(myobject).map((key)=>[Number(key), mybject[key]]) 然后 console.log("entries",typeof entries);

这还是returns一个对象

Answer 1

问题似乎是在变量 records 为 null 的情况下，您的渲染函数仍然尝试访问您的 records 变量的 map 函数，这当然以 'TypeError: myobject.map is not a function' 错误结束。

试试这个

myobject && myobject.map(item => {.....})

或在状态中添加数组，然后从状态中使用它

Answer 2

由于在代码中我返回了对象，我需要在使用翻译的同时模拟该对象：

const mock = {
 "myobject":[
      
        {
          "name": "Name1",
          "iconType": "Icon1"
        },
        {
          "name": "Name2",
          "iconType": "Icon2"
        }
      ]
}

jest.mock('react-i18next', ()=>({
   useTranslation: () => {
   return {
      t:(str)=>mock,
      i18:{
         changeLanguage: () => new Promise(()=>mock.myobject)
      }
    }
 }
})

测试从 useTranslation 返回的对象

testing object returned from useTranslation

reactjs

jestjs

react-i18next