Question 177834 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to resolve "argument of type 'boolean' is not assignable…"

I’ve an input component and I’d like to create unit tests for it. I’m having few errors and I can’t fix it. I already see in few blogs but I don’t understand how to resolve it. I’m trying to improve my knowledge in unit tests, but it’s complicated.

Here’s my code I put into codesandbox

enter image description here

I don’t understand why I’ve this error, because I don’t have any boolean parameter. Can u tell me how to resolve it?

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>;
}
Tags:

2

Answers


  1. 0

    The error you’re encountering is related to the change prop in your TextInput component. The change prop is defined as a `ChangeEventHandler. However, in your test code, you’re providing an empty function for the change prop, which doesn’t match the expected type.

    To resolve this error, you can provide a valid function that handles the change event in your test code. Here’s an example of how you can modify your test code:

    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
  });
});
    Login or Signup to reply.
  2. 0

    Use a .tsx file, not a .ts one.

    On the example you sent, I was able to reproduce the error, then noticed you were using a .ts file. Rename it to .tsx and the error is gone.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search