jest option 'setupFiles' should be added to solve testing problem with react-slick?

[attila123]

Is this a bug report?

yes

Can you also reproduce the problem with npm 4.x?

not relevant

Which terms did you search for in User Guide?

I read the chapter about testing: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests

Environment

1. node -v: v6.9.5
2. npm -v: 5.5.1
3. yarn --version (if you use Yarn): N/A
4. npm ls react-scripts-ts (if you haven’t ejected): 2.8.0

Then, specify:

1. Operating system: Linux
2. Browser and version (if relevant):

Steps to Reproduce

1. One of our components use react-slick
2. Run 'CI=true npm test'
3. I get an error:

> react-scripts-ts test --env=jsdom

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    matchMedia not present, legacy browsers require a polyfill
      
      at new MediaQueryDispatch (node_modules/enquire.js/src/MediaQueryDispatch.js:15:15)
      at Object.<anonymous> (node_modules/enquire.js/src/index.js:2:18)
      at Object.<anonymous> (node_modules/react-slick/lib/slider.js:37:38)
      at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18)
      (rest of call stack shows proprietary code and has been deleted)

4. Try to apply solution from here (https://github.com/akiran/react-slick#test-setup): create test-setup.js as described and set the 'setupFiles' option for jest (as describe)
5. Run 'CI=true npm test'
6. You get an error:

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • setupFiles

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

Expected Behavior

I would expect that 'CI=true npm test' works fine and runs the test.
I would expect that the jest option 'setupFiles' is supported.

Actual Behavior

See above the error messages I got.

Reproducible Demo

Not available at the moment, sorry. I will try to create one soon.
The application just created using the README.md of this project does not reproduce this problem, because it does not use react-slick.

[jakeleboeuf]

I believe CRA will pull in a setupTests.ts file by default.

// src/setupTests.ts
import * as Adapter from 'enzyme-adapter-react-16';
import { configure } from 'enzyme';
configure({ adapter: new Adapter() });

// tslint:disable-next-line:no-any
window.matchMedia = (window.matchMedia as any) || function() {
  return {
    matches: false,
    // tslint:disable-next-line:no-empty
    addListener: function() {},
    // tslint:disable-next-line:no-empty
    removeListener: function() {}
  };
};

[dbenchi]

I have the same issue

[DorianGrey]

The current setup will pick up a setup file in src/setupTests.ts (note the .ts, instead of .js in the base CRA) as described in README (this addresses the usage of enzyme, but the setup file is equivalent.

Just create this file and put whatever additional setup your project requires in it. The mock for window.matchMedia mentioned by @jakeleboeuf should work fine.

[attila123]

Thanks @jakeleboeuf and @DorianGrey for your useful help, it solved that.
I was somehow dumb to find it in the documentation or reading it at all.