kentcdodds/jest-cypress-react-babel-webpack

Configure Jest for Testing JavaScript Applications and Install, Configure, and Script Cypress for JavaScript Web Applications on TestingJavaScript.com

Jest and Cypress with React, Babel, and Webpack

TestingJavaScript.com

---

See how to configure Jest and Cypress with React, Babel, and Webpack

---

This is used for both "Configure Jest for Testing JavaScript Applications" and "Install, Configure, and Script Cypress for JavaScript Web Applications"

Note: This project is intentionally over-engineered. The application itself is very simple, but the tooling around it is pretty complicated. The goal is to show what configuration would be like for a large real-world application without having all the extra complexities of a real-world application.

jest-cypress-react-babel-webpack's Issues

Transpile Modules with Babel in Jest Tests lesson code not working

I'm going through testingjavascript.com and tried to recreate the "Transpile Modules with Babel in Jest Tests" lesson on my machine (macOS) with the code from the link in the lesson. I get the following error when I try to run npm test.

/Users/andreydrozd/Documents/testing-javascript-course/04-jest-for-javascript/jest-cypress-react-babel-webpack-egghead-2018-config-jest-02/src/shared/__tests__/utils.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { getFormattedValue } from '../utils';                                                                                                                   ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.992s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

I don't know if it's related to the issue, but when I ran npm install I got warning about peer dependencies with some babel packages. The warnings are below.

npm WARN @babel/[email protected] requires a peer of @babel/core@>=7.0.0-beta.50 <7.0.0-rc.0 but noneis installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@>=7.0.0-beta.50 <7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@>=7.0.0-beta.50 <7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@>=7.0.0-beta.50 <7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@>=7.0.0-beta.50 <7.0.0-rc.0 but noneis installed. You must install peer dependencies yourself.

incorrect repo link in the testingjavascript.com lesson

while watching a lesson, i observed, this lesson https://testingjavascript.com/lessons/jest-generate-a-serializable-value-with-jest-snapshots, doesn't have correct link of git branch having the related code in the lesson, esp the superheroes code.

run dev:client fails on Node 18, Windows

Running run dev on Node.js 18 fails, it seems to be linked with SSL

> npm run dev

> [email protected] dev:client
> webpack serve --mode=development

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Testing JavaScript\jest-cypress-react-babel-webpack\public
i ｢wds｣: 404s will fallback to /index.html
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\util\createHash.js:138:18)    
    at BulkUpdateDecorator.update (C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\util\createHash.js:44:50)
    at NormalModule._initBuildHash (C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\NormalModule.js:737:17)
    at handleParseResult (C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\NormalModule.js:801:10)
    at C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\NormalModule.js:854:4
    at processResult (C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\NormalModule.js:625:11)
    at C:\Testing JavaScript\jest-cypress-react-babel-webpack\node_modules\webpack\lib\NormalModule.js:676:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.1
ERROR: "dev:client" exited with 1.

Class name change every time snapshot test runs

I’m watching the lesson: “Generate serialized values with Jest snapshot” and I noticed that the className for the wrapper div is changing every time it is running. How does jest snapshot deal with that? https://github.com/kentcdodds/jest-cypress-react-babel-webpack/blob/egghead-2018/config-jest-06/src/shared/__tests__/__snapshots__/calculator-display.js.snap

cannot run tjs/jest-00

even with the change identified here:
#39

I was not able to npm run dev here... so not able to follow along the exercises.

react-testing-library is deprecated so installed @testing-library/react but now test fails

I got the following in Terminal:

Cannot find module 'react-testing-library/cleanup-after-each' from 'auto-scaling-text.test.js'

    > 1 | import 'react-testing-library/cleanup-after-each'
        | ^
      2 | import React from 'react'
      3 | import { render } from 'react-testing-library'
      4 | import AutoScalingText from '../auto-scaling-text'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (src/shared/__tests__/auto-scaling-text.test.js:1:1)

 PASS  src/shared/__tests__/utils.test.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.699s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

How can we import cleanup-after-each now? Or is it even available?? Thanks.

Lesson 0: Error in running `npm run dev`

When cloning the repo and following the tutorial, I got the error

Error: error:0308010C:digital envelope routines::unsupported

I created a .nvmrc and downgraded the project node to v16 and it fixed the error.

For context, I'm running my system on Mac M1 Ventura 13

Eslint still detect error on import 'calculator-test-utils' after configuration

After I configure the ESLint overrides like this

overrides: [
    {
      files: ['**/src/**'],
      settings: {'import/resolver': 'webpack'},
    },
    {
      files: ['**/__tests__/**'],
      settings: {
        'import/resolver': {
          jest: {
            jestConfigFile: path.join(__dirname, './test/js-common.js'),
          },
        },
      },
    },
  ],

It still fails to detect the 'calculator-test-utils' import as a module. Even if I go to the branch that you've already configured.
Here the example I go to the branch tjs/jest-17.

Install and Run Jest transcript typo

The npm install snippet in the transcript is missing a dash between save and dev

The snippet should read:
npm install --save-dev jest

Took a look through the code to see if Transcripts were here but it didn't seem like it.

Error: Cannot find module 'webpack-cli/bin/config-yargs'

When running npm run dev, I'm getting
Error: Cannot find module 'webpack-cli/bin/config-yargs'

as explained here: webpack/webpack-dev-server#2759

I had to update the package.json from:

"dev:client": "webpack-dev-server --mode=development",

to

"dev:client": "webpack serve --mode=development",

react-testing-library has changed to @testing-library/react

When we try to install the dev-dependency react-testing-library, it appears an error importing the modules indicating that we should use @testing-library/react instead.

The steps that I used to correct the error are:

1. Install the @testing-library/react library as a dev-dependency.
2. Import @testing-library/react/cleanup-after-each & {render} from @testing-library/react

After that, everything has worked perfectly!

"Cannot read properties of undefined (reading 'theme')" Error after setting up optional theme parameter in calculator-test-utils.js

Hey Kent,

I notices that I get an error when I change my calculator-test-utils.js file to handle an optional theme parameter. If I specify the theme, everything works fine but it I omit it, I get this "Cannot read properties of undefined (reading 'theme')" error, which I also saw on your screen.

link to the lesson (10 min, 4 sec): https://testingjavascript.com/lessons/jest-support-a-test-utilities-file-with-jest-moduledirectories

I tried a few things and finally found this solution but I am not sure if it breaks the options object in general if only the theme parameter is left undefined.

detailed view

Deprecation Warning: Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths.

When I ran the test for section 9 entitled Setup an afterEach Test Hook for all tests with Jest setupTestFrameworkScriptFile in module 4, entitled Configure Jest for Testing JavaScript Applications, I got the following output to Terminal:

npm test                                                                ⏎

> [email protected] test /Users/mariacam/Development/testing-javascript/configure_jest_for_testing_js_apps/9_setup_afterEach_test_hook_for_all_tests__with_jest_setupTestFrameworkScriptFile
> jest

● Deprecation Warning:

  Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths.

So instead of jest.config.js being:

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '\\.module\\.css$': 'identity-obj-proxy',
    '\\.css$': require.resolve('./test/style-mock.js'),
  },
  setupTestFrameworkScriptFile: require.resolve('./test/setup-tests.js'),
}

It should be:

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    moduleNameMapper: {
        '\\.module\\.css$': 'identity-obj-proxy',
        '\\.css$': require.resolve('./test/style-mock.js'),
    },
    setupFilesAfterEnv: ['<rootDir>/test/setup-tests.js'],
}

and then all tests will pass.

Please update your configuration.

Configuration Documentation:
https://jestjs.io/docs/configuration.html

Error: Cannot find module 'webpack-cli/bin/config-yargs'

I tried to run this project as a fresh install from master and I was getting the following error:

When running npm run dev, I'm getting
Error: Cannot find module 'webpack-cli/bin/config-yargs'

as explained here: webpack/webpack-dev-server#2759

I had to update the package.json from:

"dev:client": "webpack-dev-server --mode=development",

to

"dev:client": "webpack serve --mode=development",

Hope this helps someone

Postbuild script doesn't work on Windows

I had to change the script to “copy .\public\index.html .\dist\index.html” to work in powershell

Chaining Cy commands in the calculator.js file confuses 'findBy...' in Cypress

Following from video 5. Chaining the cy commands after cy.visit will result in these following errors:

container.querySelectorAll is not a function

Timed out retrying: Expected to find element: 'findByText(/^+$/)', but never found it.

"expected { Object (selector) } to have text '3' "

Issue is resolved is the user restarts a 'cy.findBy...' when they need to select another element.

Configure Jest for Testing JavaScript Applications

in this lesson, I'm supposed to be able to console.log but nothing is logging in the terminal.

Problems in Configure Jest For Testing JS Applications In Testing JavaScript Course

I am on section one, Install and run Jest, and when I did an npm i, certain plugins which were in the package.json which I got from Github, did not install when I ran npm i. Then I installed them separately. However, when I ran npm test after installing a couple of babel related plugins (babel-plugin-emotion,
@babel
/plugin-proposal-object-rest-spread,
@babel
/plugin-proposal-class-properties,
@babel
/[email protected]), I got the following error:

npm test

[email protected] test /Users/mariacam/Development/testing-javascript/configure_jest_for_testing_js_apps/1_install_and_run_jest jest
FAIL src/tests/example.test.js
● Test suite failed to run

Cannot find module 'react-loadable/babel' from '/Users/mariacam/Development/testing-javascript/configure_jest_for_testing_js_apps/1_install_and_run_jest'
And when I tried to install the plugin, I got the following:

npm i react-loadable/babel -D ⏎
npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://[email protected]/react-loadable/babel.git
npm ERR!
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mariacam/.npm/_logs/2019-06-12T12_21_50_326Z-debug.log

I have no problems communicating with Github, so I don't know why I am getting that part of the error message. I tried to find an answer
to this problem, but no luck so far. I am using Node 11.14.

Note: I think the package.json (July, 2018) has to be updated a bit.