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)
归档时间: |
|
查看次数: |
1504 次 |
最近记录: |