Test that involve Heading component output console Warning: Failed prop type

[neztEx]

Running tests on Heading component throws the following warning:

Warning: Failed prop type: Text: prop type `boxShadow` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

      14 |       const props = buildProps({ border: true })
      15 |
    > 16 |       render(<EmptyState {...props} />)
         |             ^
      17 |
      18 |       expect(screen.getByTestId('empty-state-container')).toHaveStyle({ borderStyle: 'solid' })
      19 |     })

Another warning from the same test batch, but now the prop type is color. Noting that nothing changed other than a boolean value the same components are still being rendered.

Warning: Failed prop type: Text: prop type `color` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

Removing the heading component Heading from the render clears this issue. Any idea what is going on here?

[TheSisb]

Hi @neztEx,

Can you share the full test code by any chance?

[SiTaggart]

Maybe also what led up to this? Was it a new test, a version upgrade, a dependency around you upgrade? Plus the content of the component you're testing, what props are being set on Heading? etc

[neztEx]

Not a new test, but the example below is and it throws the same errors. No dependencies since its all Paste related.

Version:

"@twilio-paste/core": "19.5.0",

Here is the stripped-down version of the component:

import React from 'react'
import { Box } from '@twilio-paste/core/box'
import { Heading } from '@twilio-paste/core/heading'
import { Paragraph } from '@twilio-paste/core/paragraph'

const EmptyState: React.FC<EmptyStateProps> = props => {
  const {
    border = false,
    description,
    title
  } = props

  return (
    <Box
      borderWidth="borderWidth10"
      borderColor="colorBorderWeaker"
      borderStyle={border ? 'solid' : 'none'}
      borderRadius="borderRadius30"
      data-testid="empty-state-container"
      padding="space60"
      maxWidth="100%"
    >
          <Heading as="h3" variant="heading30">
            {title}
          </Heading>
          {isString(description) ? <Paragraph>{description}</Paragraph> : description}
    </Box>
  )
}

Tests:

  describe('border', () => {
    it("should render with borderStyle 'solid' when true", () => {
      const props = {
        title: 'Some title',
        description: 'Some description block.',
        border: true
      }

      render(<EmptyState {...props} />)

      expect(screen.getByTestId('empty-state-container')).toHaveStyle({ borderStyle: 'solid' })
    })

    it.each([undefined, false])("should render borderStyle 'none' when %p", (border: false | undefined) => {
        const props = {
        title: 'Some title',
        description: 'Some description block.',
        border
      }

      render(<EmptyState {...props} />)

      expect(screen.getByTestId('empty-state-container')).toHaveStyle({ borderStyle: 'none' })
    })
  })

[SiTaggart]

So what prompted you seeing the warning? Was it always there? Is it new?

[neztEx]

It was brought to my attention, so I would assume it has always been there, but I don't know.

[SiTaggart]

OK, well, we're going to be removing all the prop types in the not too distant future. Then these will just go away, whether it's an authoring or implementation issue. Typescript is the source of truth.

Given it's just a warning, I think it's safe to ignore until we rip out all the prop types.