Error: Uncaught [TypeError: Cannot read property 'x' of undefined Jest react testing

Question

我是反应和测试的新手，所以也许我误解了文档，但我有一个定义 const 变量 的函数，它只是一个对象数组a 属性 'X'，我们称之为。我过滤这个数组并获取第一个对象并寻找 X.

然后我将它导入到我的 jest 测试文件中，但是当我运行测试时它失败了，说 Error: Uncaught [TypeError: Cannot read 属性'X'未定义].

我不确定为什么，因为当我实际运行应用程序正常工作时，所以我假设需要发生某种变量模拟？

下面是我的代码。我已经删除了不重要的部分。如果有人可以指导我正确的方向。

main.jsx

 export default function main({
    name, value, options, onChange, onBlur, inputRef, error, complete
}) {
  const data = options.filter(name => name.uuid === value)[0].X.slice(8);

   return ( blah blah blah, this works when I actually render it )

test.jsx

import main from './main';

test('Renders', () => {

const options = [
  { 
    uuid: 'foo', 
    X: ['a', 'b'] 
  }
]

  const { getByText } = render(
    <main
      name="test"
      value=""
      options={options}
      onChange={() => {}}
      onBlur={() => {}}
    />
  );
});

Answer 1

因为你传递的道具 value 是 "" 所以 options.filter(name => name.uuid === value)[0] 是未定义的。您可以更新 value 以修复

value="foo"

Answer 2

您正在发送一个空值，因此 filter 方法会抛出一个空数组，当您尝试访问它的第一个元素时，您会得到未定义的结果。

这就是错误 Cannot read property 'X' of undefined

的原因

Answer 3

.filter() returns 已通过回调中指定条件的已过滤元素数组。

要么更改您的筛选条件，要么将 foo 作为值传入：

<main
      name="test"
      value="foo"
      options={options}
      onChange={() => {}}
      onBlur={() => {}}
/>

否则，您正在检查空数组的第 0 个元素，它是未定义的。

Error: Uncaught [TypeError: Cannot read property 'x' of undefined Jest react testing

Error: Uncaught [TypeError: Cannot read property 'x' of undefined Jest react testing

javascript

reactjs

ts-jest