https://github.com/eliihen/jest-prop-type-error

Improves prop-types support in Jest by failing tests on prop-type errors instead of ignoring them
https://github.com/eliihen/jest-prop-type-error

jest proptypes react testing

Last synced: 6 months ago
JSON representation

Improves prop-types support in Jest by failing tests on prop-type errors instead of ignoring them

• Host: GitHub
• URL: https://github.com/eliihen/jest-prop-type-error
• Owner: eliihen
• License: mit
• Created: 2018-05-10T15:22:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-01-27T17:25:03.000Z (almost 5 years ago)
• Last Synced: 2025-06-01T01:22:25.034Z (7 months ago)
• Topics: jest, proptypes, react, testing
• Language: JavaScript
• Homepage:
• Size: 95.7 KB
• Stars: 41
• Watchers: 2
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# jest-prop-type-error

> Improves prop-types support in Jest by failing tests on prop-type errors

> instead of ignoring them

[prop-types][pt] is a library from Facebook that makes it easy to verify that

the props passed to a [React][react] component is of the correct type. However,

it only allows us runtime type checking, which means some failures can slip by

into production.

This is possible to solve with [Jest][jest] by making prop-type errors throw

instead of only logging a warning. In this case your tests would run and

whenever a wrong prop is passed to a component, the prop-type validation would

pick this up and fail the test. Then we would be able to verify that the props

that are passed to our components are good compile-time, provided the tests

run when we build our production bundle.

That is what this library does!

[Read this blog][blog] for a more in-depth explanation.

## Before

![The test shows a warning and passes](assets/proptype-test-warning.png)

## After

![The test shows an error and fails](assets/proptype-test-error.png)

# Install

    yarn add -D jest-prop-type-error

# Usage

In order to enable us to detect prop-type errors and fail the test, you need to

add the following to your `package.json`'s jest section.

      "setupFiles": [

        "jest-prop-type-error"

      ]

If there is no jest section in your `package.json`, add one and use that.

Now simply run your tests like usual, and prop-type errors will throw instead

of logging a warning!

# Usage with Create React App

Create React App doesn't allow the use of the `setupFiles` directive. To use with 

create-react-app, simply require 'jest-prop-type-error' in your `setupTests.js` file 

after installing the package:

      import 'jest-prop-type-error'

# Requirements

Requires node 6 or later

# Acknowledgments

Thanks to [Stian Didriksen][stian] for the idea in his talk about Jest at the

ReactJS Oslo Meetup 9th May 2018.

[pt]: https://facebook.github.io/react/docs/typechecking-with-proptypes.html

[blog]: https://medium.com/shark-bytes/type-checking-with-prop-types-in-jest-e0cd0dc92d5

[react]: https://reactjs.org/

[jest]: https://facebook.github.io/jest/

[stian]: https://twitter.com/stipsan