React Jest Testing TypeError: Cannot read properties of undefined (reading 'current')

Viewed 978

I am a C# developer venturing into the front-end (React using typescript). I am struggling to get my jest test going. Also, how do I automatically update snapshots?

my Component;

import { forwardRef } from 'react';
import styled from 'styled-components';


interface Props {
  className?: string;
  placeholder?: string;
  onFocus?: Function;
  name?: string;
  onChange?: (event: any | boolean) => void;
  value?: string;
  id?: string;
  disabled?: boolean;
  type?: string;
  onBlur?: (event: any) => void;
}

const TextBox = styled.input`
  padding: 0;
  line-height: 1;
  border: none;
  background: transparent none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: block;
  width: 100%;
  height: 4.4rem;
  padding: 0.5rem 1.5rem;
  font-weight: normal;
  border: 0.1rem solid ;
  border-radius: 0.6rem;
  background-color: #fff;
  outline: 0;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  background-image: none !important;
  `;

  const AppTextBox = forwardRef(
    (
      {
        className = '',
        placeholder,
        onChange,
        onBlur,
        value,
        id,
        name,
        type = 'text',
        disabled = false,
      }: Props,
    ) => (
      <TextBox
        className={className}
        placeholder={placeholder}
        id={id}
        name={name}
        type={type}
        disabled={disabled}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
      />
    ),
  );
  
  AppTextBox.displayName = 'AppTextBox';
  
  export default AppTextBox;

my test code

import React from 'react';
import AppTextBox from '../AppTextBox';
import { create  } from 'react-test-renderer';

describe('App Textbox', () => {
  test('Matches snapshot', () => {
    const tree1 = create(<AppTextBox placeholder="placeholder text" />);
    expect(tree1.toJSON()).toMatchSnapshot();
  });
});

I am getting the following error any help or direction will help me I a lot, I have read various articles and added appropriate npm and setting with no luck enter image description here

0 Answers
Related