React Jest 测试类型错误:无法读取未定义的属性(读取“当前”)

Kri*_*eil 5 reactjs jestjs react-typescript

我是一名 C# 开发人员,正在尝试进入前端(React using typescript)。我正在努力让我的笑话测试进行起来。另外,如何自动更新快照?

我的组件;

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;
Run Code Online (Sandbox Code Playgroud)

我的测试代码

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();
  });
});
Run Code Online (Sandbox Code Playgroud)

我收到以下错误任何帮助或方向都会对我有很大帮助,我已经阅读了各种文章并添加了适当的 npm 和设置,但没有运气 在此输入图像描述