typescript 如何解决“类型'boolean'的参数不可赋值...”

gojuced7 于 2023-05-30 发布在 TypeScript

关注(0)|答案(2)|浏览(795)

我有一个输入组件，我想为它创建单元测试。我有一些错误，我不能修复它。我已经在一些博客上看到了，但我不知道如何解决它。我正在努力提高我在单元测试方面的知识，但这很复杂。
下面是我放入codesandbox的代码

我不明白为什么我有这个错误，因为我没有任何布尔参数。你能告诉我怎么解决吗？

import React from 'react';
import { render, screen } from '@testing-library/react';
import TextInput from './TextInput';
import { TextInputProps } from 'src/types';

describe('Text Input', function () {
  it('should render default', function () {
    const props: TextInputProps = {
      change(): void {},
      value: '',
      placeholder: 'Full Name',
      variant: 'neutral',
    };

    render(<TextInput {...props} />);
    expect(screen.getByRole('textbox')).toBeInTheDocument();
    expect(screen.getByRole('textbox')).toHaveAttribute(
      'placeholder',
      'Full Name'
    );
    expect(screen.getByRole('textbox')).toHaveAttribute('value', '');
  });
});

import React from 'react';
import { TextInputProps } from 'src/types';
import './index.scss';

const TextInput = ({
  value,
  placeholder,
  type = 'text',
  variant,
  change,
}: TextInputProps) => {
  const inputVariant = `input-field ${
    variant === 'highlight' ? 'highlight' : ''
  }`;

  return (
    <div className="content-input">
      <input
        className={inputVariant}
        value={value}
        placeholder={placeholder}
        type={type}
        onChange={change}
      />
    </div>
  );
};

export default TextInput;

import { ChangeEventHandler } from 'react';

export interface TextInputProps {
  value: string;
  placeholder: string;
  type?: 'text' | 'password' | 'email';
  variant: 'neutral' | 'highlight';
  change: ChangeEventHandler<HTMLInputElement>;
}

typescript

来源：https://stackoverflow.com/questions/76358648/how-to-resolve-argument-of-type-boolean-is-not-assignable

2条答案

按热度按时间

zour9fqk1#

您遇到的错误与TextInput组件中的更改属性有关。更改属性定义为`ChangeEventHandler。但是，在测试代码中，您为change prop提供了一个空函数，它与预期的类型不匹配。
若要解决此错误，可以在测试代码中提供处理更改事件的有效函数。下面是如何修改测试代码的示例：

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; // Import userEvent for simulating user interaction
import TextInput from './TextInput';
import { TextInputProps } from 'src/types';

describe('Text Input', function () {
  it('should render default', function () {
    const props: TextInputProps = {
      change: jest.fn(), // Provide a valid function to handle the change event
      value: '',
      placeholder: 'Full Name',
      variant: 'neutral',
    };

    render(<TextInput {...props} />);
    expect(screen.getByRole('textbox')).toBeInTheDocument();
    expect(screen.getByRole('textbox')).toHaveAttribute(
      'placeholder',
      'Full Name'
    );
    expect(screen.getByRole('textbox')).toHaveAttribute('value', '');
  });

  it('should call the change handler', function () {
    const changeHandler = jest.fn(); // Create a mock function for change handling
    const props: TextInputProps = {
      change: changeHandler,
      value: '',
      placeholder: 'Full Name',
      variant: 'neutral',
    };

    render(<TextInput {...props} />);
    const inputElement = screen.getByRole('textbox');
    userEvent.type(inputElement, 'John Doe'); // Simulate typing in the input field
    expect(changeHandler).toHaveBeenCalledTimes(8); // Assuming 8 characters were typed
  });
});

赞(0）回复(0）举报 2023-05-30

rkkpypqq2#

使用.tsx文件，而不是.ts文件。
在您发送的示例中，我能够重现错误，然后注意到您使用的是.ts文件。将其重命名为.tsx，错误就消失了。

赞(0）回复(0）举报 2023-05-30