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

Question

I'm new to react and testing so maybe I'm misunderstanding the docs but I have a function that defines a const variable which is just an array of objects that has a property 'X', we'll call it. I filter this array and take the first object and look for X.

I then import it into my jest test file but it fails when I run the test, saying that Error: Uncaught [TypeError: Cannot read property 'X' of undefined].

I'm unsure as to why, as when I actually run the app it works so I'm assuming some kind of variable mocking needs to happen?

Below is my code. I've stripped out the non important parts. If anyone can guide me in the right direction please.

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

Because you pass props value is "" so options.filter(name => name.uuid === value)[0] is undefined. You can update value to fix

value="foo"