开发者问题收集

错误：未捕获 [TypeError：无法读取未定义的 Jest 反应测试的属性‘x’

2021-07-10
10542
javascript reactjs ts-jest

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

然后我将它导入到我的 jest 测试文件中，但在运行测试时失败，显示 Error: Uncaught [TypeError: Cannot read property 'X' of undefined] 。

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

下面是我的代码。我去掉了不重要的部分。如果有人可以指导我正确的方向，请。

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={() => {}}
    />
  );
});
3个回答

由于您传递的 props value 为“”，因此 options.filter(name => name.uuid === value)[0] 未定义。您可以更新 value 来修复 

value="foo"
Viet
2021-07-10

您发送了一个空值，因此过滤器方法会抛出一个空数组，当您尝试访问其第一个元素时，您会得到未定义的结果。

这就是为什么会出现错误 无法读取未定义的属性“X”

Vijay Thomas
2021-07-10

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

更改过滤条件或传入 foo 作为值： 

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

否则，您将检查空数组的第 0 个元素，该元素未定义。

Tushar Shahi
2021-07-10