Upgrade jest from 26.6.0 to 27.0.0-next.6

[ankurkaushal]

Closes#10747. Fixes#9993.

[facebook-github-bot]

Hi @ankurkaushal!

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]

Looking into the CI failures. 👀

[facebook-github-bot]

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

[renatoalencar]

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]

@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]

@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]

@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]

This is the import

constbabelJest=require('babel-jest');

This is what is being exported

exportdefaulttransformer;

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

constbabelJest=require('babel-jest').default;

[ankurkaushal]

@renatoalencar That worked! Thank you catching that :)

[gaearon]

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

[ankurkaushal]

@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]

What is the error?

[gaearon]

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]

@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]

@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]

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

[renatoalencar]

@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]

@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]

@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.

[renatoalencar]

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

[SimenB]

Nope, I have no idea what the tests are doing

[renatoalencar]

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]

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?

[ankurkaushal]

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]

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

[yifanwww]

@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]

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