jest testing is not using config/polyfills.js

[cyyyu]

Hi, here I encountered a issue which is about testing.

Briefly: in a ejected project, jest is not using config/polyfills.js as its setupFiles, even it has been specified in package.json.

Steps to Reproduce

1. generate a new project with create-react-app-typescript
2. do yarn eject
3. add window.anything = 'test' to config/polyfills.js
4. add expect(window.anything).toBe('test') to src/App.test.tsx
5. run test

Then it failed. See outputs below.

 FAIL  src/App.test.tsx
  ● renders without crashing

    expect(received).toBe(expected)

    Expected value to be (using ===):
      "string"
    Received:
      undefined

    Difference:

      Comparing two different types of values. Expected string but received undefined.

      at Object.<anonymous> (src/App.test.tsx:9:27)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>

  ✕ renders without crashing (306ms)

I could only reproduce it in a create-react-app-typescript project, while create-react-app projects worked fine.
I also did the same in a create-react-app project, and I got the expected outputs.

 PASS  src/App.test.js
  ✓ renders without crashing (19ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.163s
Ran all test suites related to changed files.

Please advise. thanks in advance.

[timswalling]

I was having the same problem in my ejected app. It was caused by thetransformIgnorePatterns in the Jest config: it's [/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$ when it should be [/\\\\]node_modules[/\\\\].+\\.(js|jsx)$.

[EDIT]: that didn't actually fix the problem.

I'll see if I can work out what's causing this.

[cyyyu]

@timswalling thanks, but i tried as what you said and it still failed

[timswalling]

@cyyyu I just realised it's still a problem in my setup too - my tests were passing because of an unrelated change, but the problem remained.

I've retested using your exact steps above, and including plain JavaScript in the TypeScript transform does seem to work:

    "transform": {
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^.+\\.(j|t)sx?$": "<rootDir>/config/jest/typescriptTransform.js",
      "^(?!.*\\.(css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },

This isn't the configuration specified in the ts-jest docs (and it seems somewhat counterintuitive), so I think this change is a workaround rather than a proper fix.

I'll keep looking...

[timswalling]

I've looked into this a bit more, and there are actually two issues in play:

1. .js and .jsx files aren't being transpiled from ES6+, and so might not work properly with Jest
2. The transform from fileTransform.js is being applied to anything that isn't CSS/JSON and doesn't match either of the first two transforms, so the contents of any .js and .jsx files are being replaced with empty exports. This is what's causing the issue @cyyyu describes, and it doesn't happen until you eject because the files are in node_modules until then and are excluded from transformation.

The changes I've posted above do fix the problem, but it's not particularly idiomatic. The following code would be closer to the original create-react-app config:

    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/config/jest/typescriptTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },

I'll create a PR to update createJestConfig.js to generate the required config.

[cyyyu]

@timswalling Thank you for investigating. Though I don't actually understand the root cause clearly, hopefully it can be fixed soon.

[timswalling]

@cyyyu I've opened a PR that will fix the issue for apps that haven't been ejected. If you've already ejected your app you'll need to replace the jest.transform section of your project's package.json with the code from my last comment.

[cyyyu]

@timswalling It works! you do save my life. thanks!