Create-react-app: Jest does not support typeahead (`p` and `t` in watch mode)

[kumar303]

Is this a bug report?

Yes

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

"testing"

I read through https://facebook.github.io/create-react-app/docs/running-tests

Environment

npx: installed 63 in 3.718s

Environment Info:

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Safari: 12.0.2
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

1. Create a new app in a directory with npx create-react-app .
2. Type yarn test
3. At the prompt, type p to filter by a filename regex pattern
4. Start typing App

Expected Behavior

Jest should show App.test.js as a match to what you just typed.

Actual Behavior

Here's the first thing you see when you type yarn test:

Here's the second thing you see when you type p and try to filter tests by the string App

There are no visual results. If you press enter, jest will run App.test.js but this autocomplete is not very helpful -- you can't see the results. For any large test suite, it defeats the purpose.

Reproducible Demo

Here is an app I created with npx create-react-app .:
jest-no-typeahead.zip

1. Unzip it
2. cd into the directory and type yarn to install the dependencies
3. You can now reproduce it with the steps above

The fix

This is just a simple configuration problem in Jest. Here's how to fix it:

• First, run yarn add --dev jest-watch-typeahead
• Next, add this to package.json in the jest section:

    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]

However, one must eject to do this because watchPlugins cannot be modified. Ejecting seems seems unnecessary for this simple feature.

Here is a working example app where I ran yarn eject and then applied the fixes mentioned above:
jest-typeahead.zip

Instructions:

• Unzip it
• cd in and run yarn to install deps
• run yarn test, type p, and follow the steps to reproduce up above

As you can see, typing the string App now shows visual results:

[mrmckeb]

Hi @kumar303, thanks for raising this. Would you like to raise a PR to fix? If not, I'll open this to the community.

[Timer]

https://github.com/facebook/create-react-app/pull/5213

[Timer]

Waiting on https://github.com/jest-community/jest-watch-typeahead/issues/20

[rudyhuynh]

Waiting on https://github.com/jest-community/jest-watch-typeahead/pull/21 to be merged