Upgrade jest from 26.6.0 to 27.0.0-next.6 #10748

ankurkaushal · 2021-03-25T20:08:17Z

facebook-github-bot · 2021-03-25T20:08:21Z

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

ankurkaushal · 2021-03-25T20:23:12Z

Looking into the CI failures. 👀

facebook-github-bot · 2021-03-25T20:30:27Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

packages/react-scripts/package.json

renatoalencar · 2021-03-25T22:11:52Z

I guess the tests are failing because of this file https://github.com/facebook/create-react-app/blob/master/packages/react-error-overlay/src/utils/getSourceMap.js#L117 accessing the window object which doesn't exist on the node environment.

I could add the code below to this file https://github.com/facebook/create-react-app/blob/master/packages/react-error-overlay/src/__tests__/get-source-map.js in order to properly setup the correct environment.

/**
 * @jest-environment jsdom
 */

ankurkaushal · 2021-03-25T22:16:37Z

@renatoalencar Hmm, now it worked & the test in question is passing 🤔

Looks like I was missing the upgrade in rest of the packages in 3f03a63

ankurkaushal · 2021-03-25T22:22:03Z

@SimenB: Seeing a different error now:

TypeError: babelJest.createTransformer is not a function

  24 | })();
  25 |
> 26 | module.exports = babelJest.createTransformer({
     |                            ^
  27 |   presets: [
  28 |     [
  29 |       require.resolve('babel-preset-react-app'),

  at Object.<anonymous> (../../react-scripts/config/jest/babelTransform.js:26:28)
  at ../../../node_modules/@jest/transform/build/ScriptTransformer.js:379:73
      at Array.map (<anonymous>)

renatoalencar · 2021-03-25T22:25:23Z

@SimenB: Seeing a different error now:

TypeError: babelJest.createTransformer is not a function

  24 | })();
  25 |
> 26 | module.exports = babelJest.createTransformer({
     |                            ^
  27 |   presets: [
  28 |     [
  29 |       require.resolve('babel-preset-react-app'),

  at Object.<anonymous> (../../react-scripts/config/jest/babelTransform.js:26:28)
  at ../../../node_modules/@jest/transform/build/ScriptTransformer.js:379:73
      at Array.map (<anonymous>)

If we're seen errors we are having some progress. Now it looks like this file https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/babelTransform.js is doing a require on an ES module, which export things on a default property.

renatoalencar · 2021-03-25T22:27:57Z

This is the import

const babelJest = require('babel-jest');

This is what is being exported

export default transformer;

If you put a default property at the end of the require call it should probably work. Like this

const babelJest = require('babel-jest').default;

ankurkaushal · 2021-03-25T22:29:55Z

@renatoalencar That worked! Thank you catching that :)

gaearon · 2021-03-25T22:30:40Z

@ankurkaushal Btw thank you for quickly jumping on this, it's really appreciated.

ankurkaushal · 2021-03-25T22:56:17Z

@gaearon: My pleasure, always happy to help & I didn't want to miss an opportunity to collaborate with you!

I see a lot of checks are still failing, looks like something to do with fixtures? Would re-running jest with -u be okay?

gaearon · 2021-03-25T22:58:54Z

What is the error?

gaearon · 2021-03-25T22:59:17Z

Is this what you're seeing too?

$ react-scripts start --smoke-test
/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:20934
    throw firstError;
    ^

Error: Package "postcss-browser-comments@3.0.0" (via "/home/vsts/work/1/yarn-cache/v6/npm-postcss-browser-comments-3.0.0-1248d2d935fb72053c8e1f61a84a57292d9f65e9-integrity/node_modules/postcss-browser-comments/index.cjs.js") is trying to require the package "browserslist" (via "browserslist") without it being listed in its dependencies (postcss, postcss-browser-comments)
    at makeError (/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:55:17)
    at Object.resolveToUnqualified (/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:20672:17)
    at Object.resolveRequest (/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:20743:31)
    at Function.Module._resolveFilename (/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:20925:30)
    at Function.Module._load (/home/vsts/work/_temp/tmp.1yGbnJ8HsL/test-app-pnp/.pnp.js:20841:31)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/vsts/work/1/yarn-cache/v6/npm-postcss-browser-comments-3.0.0-1248d2d935fb72053c8e1f61a84a57292d9f65e9-integrity/node_modules/postcss-browser-comments/index.cjs.js:3:36)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) {
  code: 'UNDECLARED_DEPENDENCY',
  data: {
    request: 'browserslist',
    issuer: '/home/vsts/work/1/yarn-cache/v6/npm-postcss-browser-comments-3.0.0-1248d2d935fb72053c8e1f61a84a57292d9f65e9-integrity/node_modules/postcss-browser-comments/index.cjs.js',
    issuerLocator: { name: 'postcss-browser-comments', reference: '3.0.0' },
    dependencyName: 'browserslist',
    candidates: [ 'postcss', 'postcss-browser-comments' ]
  }
}

ankurkaushal · 2021-03-25T23:02:04Z

@gaearon:

No actually, I ran that & it just ran the server & quit.

I was referring to https://dev.azure.com/facebook/create-react-app/_build/results?buildId=2441&view=logs&jobId=8999f565-280a-527f-721e-375d49cc4cd5&j=8999f565-280a-527f-721e-375d49cc4cd5&t=7980f6bf-f3f8-5575-47e3-a23aae330cb3

renatoalencar · 2021-03-25T23:13:17Z

@gaearon:

No actually, I ran that & it just ran the server & quit.

I was referring to https://dev.azure.com/facebook/create-react-app/_build/results?buildId=2441&view=logs&jobId=8999f565-280a-527f-721e-375d49cc4cd5&j=8999f565-280a-527f-721e-375d49cc4cd5&t=7980f6bf-f3f8-5575-47e3-a23aae330cb3

Since some of those tests are testing the testing environment (this sound funny), I think you should probably change those to match the requirements of this new version of Jest. Since this is a breaking change in Jest, it would make sense to break something like this. What do you think @gaearon?

Can you run e2e tests locally @ankurkaushal?

ankurkaushal · 2021-03-25T23:19:27Z

@renatoalencar: Yep I can run it via yarn e2e:docker. Will check there as well.

renatoalencar · 2021-03-25T23:22:31Z

@renatoalencar: Yep I can run it via yarn e2e:docker. Will check there as well.

I'll run it here too and see what I find.

ankurkaushal · 2021-03-25T23:29:32Z

@renatoalencar: Only error I see is this:

lerna ERR! EPUBLISHCONFLICT Cannot publish confusing-browser-globals@undefined over existing version.
e2e-kitchensink.sh: ERROR! An error was encountered executing line 88.

What about you?

renatoalencar · 2021-03-25T23:37:47Z

@renatoalencar: Only error I see is this:

lerna ERR! EPUBLISHCONFLICT Cannot publish confusing-browser-globals@undefined over existing version.
e2e-kitchensink.sh: ERROR! An error was encountered executing line 88.

What about you?

Yeah, same thing here 😞. Let's check for behavior first, then all the cases.

packages/react-scripts/package.json

packages/react-error-overlay/src/__tests__/get-source-map.js

renatoalencar · 2021-03-26T13:16:31Z

@SimenB there's a lot of timeouts on the CI logs, do you have any idea why?

SimenB · 2021-03-26T13:41:36Z

Nope, I have no idea what the tests are doing

renatoalencar · 2021-03-26T13:52:53Z

Nope, I have no idea what the tests are doing

This specific test case is timing out, but there's beforeEach call on this file. Which is imported in the test file, but it looks like it's not working.

I'm trying increasing directly on the file, let's see if that works.

ankurkaushal · 2021-05-26T22:50:29Z

Updated to new version of jest. yarn build & yarn start works, most of the tests pass but not the ones testing jsx stuff.

For example, I get this error in packages/cra-template/template/src/App.test.js:

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

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    SyntaxError: /Users/ankurkaushal/projects/create-react-app/packages/cra-template/template/src/App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (5:10):

      3 |
      4 | test('renders learn react link', () => {
    > 5 |   render(<App />);
        |          ^
      6 |   const linkElement = screen.getByText(/learn react/i);
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });

    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

      at Parser._raise (../../node_modules/@babel/parser/src/parser/error.js:134:45)
      at Parser.raiseWithData (../../node_modules/@babel/parser/src/parser/error.js:129:17)
      at Parser.expectOnePlugin (../../node_modules/@babel/parser/src/parser/util.js:191:18)
      at Parser.parseExprAtom (../../node_modules/@babel/parser/src/parser/expression.js:1212:18)
      at Parser.parseExprSubscripts (../../node_modules/@babel/parser/src/parser/expression.js:616:23)
      at Parser.parseUpdate (../../node_modules/@babel/parser/src/parser/expression.js:596:21)
      at Parser.parseMaybeUnary (../../node_modules/@babel/parser/src/parser/expression.js:563:23)
      at Parser.parseExprOps (../../node_modules/@babel/parser/src/parser/expression.js:367:23)
      at Parser.parseMaybeConditional (../../node_modules/@babel/parser/src/parser/expression.js:332:23)
      at Parser.parseMaybeAssign (../../node_modules/@babel/parser/src/parser/expression.js:287:21)

Am I missing something here with the jest upgrade?

Upgrades from 27.0.1 to 27.0.3

ankurkaushal · 2021-06-02T03:04:10Z

Latest Update:

Updated to new version of jest again. yarn build & yarn start still works but still getting a lot of tests with the following errors:

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
SyntaxError: Identifier 'jest' has already been declared
SyntaxError: Cannot use import statement outside a module

Not sure if my machine has something funky going on or is there anything else I need to double check?

Would appreciate another pair of eyes on this.

mandaputtra · 2021-07-20T13:03:39Z

@ankurkaushal how do you test this branch? Would love some advice on that, I'll try to use 27.0 jest versions.

yifanwww · 2021-08-20T07:54:37Z

@ankurkaushal

For the first error and the third error, add transform: { '^.+\\.js$': 'babel-jest' } into the test/jest.config.js should fix them.

I'm not sure whether jest can find that jest.config.js by itself. You may need to execute yarn jest --config test/jest.config.js to enable the transforms.

BTW, you forgot to upgrade babel-jest.

iansu · 2021-09-22T22:48:05Z

I'm going to close this in favour of #11338 since the tests are all passing in that PR. Thank you for your contribution.

ankurkaushal requested review from ianschmitz, iansu, mrmckeb and petetnt as code owners March 25, 2021 20:08

facebook-github-bot added the CLA Signed label Mar 25, 2021

gaearon reviewed Mar 25, 2021

View reviewed changes

packages/react-scripts/package.json Outdated Show resolved Hide resolved

SimenB reviewed Mar 26, 2021

View reviewed changes

packages/react-scripts/package.json Outdated Show resolved Hide resolved

SimenB reviewed Mar 26, 2021

View reviewed changes

packages/react-error-overlay/src/__tests__/get-source-map.js Outdated Show resolved Hide resolved

ankurkaushal force-pushed the jest-upgrade branch from 00e0408 to 70fb0b8 Compare May 26, 2021 18:01

jasonlimantoro mentioned this pull request Jun 1, 2021

Update to Jest 27 #10747

Closed

ankurkaushal added 9 commits June 1, 2021 21:28

Upgrade jest from 26.6.0 to 27.0.0-next.6

14fd384

Upgrade rest of packges from 26.6.0 to 27.0.0-next.6

cb5d5e1

Add jsdom docblock at the top of the test

b86337c

Import default babel-jest in config/jest/babelTransform.js

1f8a846

Import default babel-jest in jest.transform.js

92027c6

PR Review: Remove explicit dependency on jest-circus & modify docblock

3087bea

Move setTimeout outside beforeEach

8c30f1f

Increase timeout to 15 minutes

9a6ebab

Update jest to 27.0.1 from 27.0.0-next.6

e14da91

ankurkaushal force-pushed the jest-upgrade branch from 5e6faa2 to e14da91 Compare June 2, 2021 01:30

Update to latest jest

5a2cd80

Upgrades from 27.0.1 to 27.0.3

ItsJimi approved these changes Aug 25, 2021

View reviewed changes

krreet mentioned this pull request Aug 28, 2021

Upgrade jest and related packages from 26.6.0 to 27.1.0 #11338

Merged

iansu closed this Sep 22, 2021

snyk-bot mentioned this pull request Nov 13, 2021

[Snyk] Upgrade jest from 26.6.0 to 26.6.3 XirdigH/create-react-app#31

Closed

nmors mentioned this pull request Jun 22, 2022

[Snyk] Fix for 1 vulnerabilities nmors/create-react-app#47

Open

avdkishore mentioned this pull request Nov 27, 2023

[Snyk] Fix for 15 vulnerabilities avdkishore/create-react-app#62

Open

marcusrc mentioned this pull request Nov 27, 2023

[Snyk] Fix for 1 vulnerabilities marcusrc/create-react-app#53

Open

dineshvgp mentioned this pull request Nov 27, 2023

[Snyk] Fix for 15 vulnerabilities dineshvgp/create-react-app#63

Open

saurabharch mentioned this pull request Nov 27, 2023

[Snyk] Fix for 23 vulnerabilities saurabharch/create-react-app#76

Open

This was referenced Nov 28, 2023

[Snyk] Fix for 16 vulnerabilities ayishagisel/create-react-app#161

Open

[Snyk] Fix for 3 vulnerabilities ayishagisel/create-react-app#164

Open

[Snyk] Fix for 11 vulnerabilities ayishagisel/create-react-app#166

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade jest from 26.6.0 to 27.0.0-next.6 #10748

Upgrade jest from 26.6.0 to 27.0.0-next.6 #10748

ankurkaushal commented Mar 25, 2021 •

edited by ianschmitz

facebook-github-bot commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

facebook-github-bot commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

gaearon commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

gaearon commented Mar 25, 2021

gaearon commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

renatoalencar commented Mar 26, 2021

SimenB commented Mar 26, 2021

renatoalencar commented Mar 26, 2021

ankurkaushal commented May 26, 2021

ankurkaushal commented Jun 2, 2021 •

edited

mandaputtra commented Jul 20, 2021

yifanwww commented Aug 20, 2021

iansu commented Sep 22, 2021

Upgrade jest from 26.6.0 to 27.0.0-next.6 #10748

Upgrade jest from 26.6.0 to 27.0.0-next.6 #10748

Conversation

ankurkaushal commented Mar 25, 2021 • edited by ianschmitz

facebook-github-bot commented Mar 25, 2021

Action Required

Process

ankurkaushal commented Mar 25, 2021

facebook-github-bot commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

gaearon commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

gaearon commented Mar 25, 2021

gaearon commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

ankurkaushal commented Mar 25, 2021

renatoalencar commented Mar 25, 2021

renatoalencar commented Mar 26, 2021

SimenB commented Mar 26, 2021

renatoalencar commented Mar 26, 2021

ankurkaushal commented May 26, 2021

ankurkaushal commented Jun 2, 2021 • edited

mandaputtra commented Jul 20, 2021

yifanwww commented Aug 20, 2021

iansu commented Sep 22, 2021

ankurkaushal commented Mar 25, 2021 •

edited by ianschmitz

ankurkaushal commented Jun 2, 2021 •

edited