.text() returning "<Button />" instead of the button's text

Viewed 46

Basically what's in the title. I have the following code in a component I am writing a test for:

<Button>Edit</Button> // <- Material UI Button component

And this line in my test is failing:

expect(wrapper.find(Button).text()).to.equal("Edit");

with this error:

assert.strictEqual(received, expected)

Expected value to strictly be equal to:
  "Edit"
Received:
  "<Button />"

Message:
  expected '<Button />' to equal 'Edit'

Any idea what might be happening?

1 Answers

I think what you are trying to do is something like this:

import { render, within } from '@testing-library/react';
import {Button} from '../components'

it('renders a button with "Edit" label', () => {
  const { container } = render(<Button />);
  const { getByText } = within(container);
  expect(getByText('Edit')).toBeInTheDocument();
});
Related