add issue example but fixed

[bahmutov]

• closes Webpack error #172
  The example is the same as the user-provided code sample but with fixed syntax error

[metalogica]

@bahmutov The syntax error was caused by erroneous copy and pasting -- the actual source code syntax was OK.

Turns out the reason I was getting the webpack compilation error is because I had the spec test file in a different directory from the component I was trying to mount.

// cypress.json
{
    "experimentalComponentTesting": true,
    "componentFolder": "cypress"
}

I previously had my spec.js inside /cypress/integration. When I moved it to src/pages/dashboard/orders, the location where my Test.jsx was, the Webpack error no longer appeared and I was able to mount the component.

However, I know have a different error message relating to Node Sass versioning:

Error: Webpack Compilation Error
./src/pages/Dashboard/Orders/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./src/pages/Dashboard/Orders/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (76)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.0
 @ ./src/pages/Dashboard/Orders/index.scss 2:14-305 21:1-42:3 22:19-310
 @ ./src/pages/Dashboard/Orders/index.jsx
 @ ./src/pages/Dashboard/Orders/test.spec.js
 @ multi ./src/pages/Dashboard/Orders/test.spec.js

I'm using node v.14.10.

Do you want me to open a new issue?

[bahmutov]

Nice, yes, open a new issue - and I already know why this is happening and how to fix this 😉 so it will be quick turn around

[metalogica]

Fantastic! Will open a new issue right away.

And would you mind if I generate a pull request on the README.md to make it super clear that the spec file should be placed in the same directory as the component you are mounting inside the spec?

Or do you think the root cause of the issue warrants more examination? If so, I'll continue on extracting part of my source code and upload it to a public repo for you and your team to inspect in greater detail.

[bahmutov]

Yeah, this is react-scripts restriction - it only transpiles files that are inside src folder, I need to mention this in the README and recipes.

[bahmutov]

Added a note: a237975

[bahmutov]

🎉 This PR is included in version 4.1.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀