expect(Button).not.tobeDisabled() Test is failing even tho in my page the button isn't disabled

Question

it('Button should be eneabled after input and textArea got values', () => {
  render(
    <CreatePostElmnts
      createPost={''}
      setTitle={mockedFunction}
      setPostText={mockedFunction}
    />
  );
  const Button = screen.getByRole('button', { name: /Submit Post/i });
  const inputElement = screen.getByPlaceholderText('Title..');
  fireEvent.change(inputElement, { target: { value: 'Testing Text' } });
  const TextAreaElement = screen.getByPlaceholderText('Post...');
  fireEvent.change(TextAreaElement, { target: { value: 'Testing Text' } });
  expect(Button).not.toBeDisabled();
});

and code for my component is as below

function CreatePostElmnts({createPost, setTitle, setPostText, postText, title}) {
    return (
        <div className="createPostPage">
            <div className="cpContainer">
            <h1>Create A Post</h1>
            <div className="inputGp">
                <label>Title:</label>
                <input placeholder="Title.."  onChange={(event) => setTitle(event.target.value)}/>
            </div>
            <div className="inputGp">
                <label>Post:</label>
                <textarea placeholder="Post..." onChange={(event) => setPostText(event.target.value)} />
            </div>
            <button disabled={!title || !postText}  onClick={createPost}>Submit Post</button>
            </div>
        </div>
    )
}

export default CreatePostElmnts

When I type stuff and make title and posText get values my button is not disabled anymore in my WebPage but still in my test it's failing. What could be the reason?

Answer 1

Your actual component is doing more than the piece that you are showing.

In the main page, I think there is some container component which is managing what happens when the title or postText is changed via setTitle & setPostText . And then the title & postText are being sent back to the component.

However, in your unit test, you are mocking those two callbacks with mockedFunction , which would just be called. But then you are trying to test the outcome of change events, which will only work if the callback is again passing the new values back to the component and it re renders.

I feel you need to rethink the component OR change the unit test in this way.

Test Case 1: Pass non empty and valid strings for the title and postText and verify that the button is not disabled.

Test Case 2: Do not pass the title and subtitle/pass empty strings and verify that the button is disabled.

Test Case 3: Verify callbacks. You can assert that the mockedFuncion is called with required value, when you trigger fire event.

These should be sufficient to assert the behavior of the component.

Right now they way you have it, its always going to have disabled ON, since the title & postText and never being sent to the component.