Test fails on ch16/password/js/generate-password.js

[hyunchulkwak]

First, thanks for the great book. I've found an issue while running tests of chapter 16's password example.

The tests failed with this error: ReferenceError: randomIndex is not defined.

The error seems to happen because of the omitted semicolon of randomIndex (https://github.com/azat-co/react-quickly/commit/1cc5dd16a841ecd161b24743c4ac4fc5ade8ff44#diff-5e704127649b66c9fbbd04b9b9a55b78)

As a workaround, I put semicolon in front of the next line. To avoid using semicolons in js, a line should not be started with [, (, or back-tick. This might be helpful to understand this: https://feross.org/never-use-semicolons/

let randomIndex = Math.floor(Math.random() * value)

;[acc[value -1], acc[randomIndex]] = [acc[randomIndex], acc[value - 1]]

Full errors from Jest are like below:

> [email protected] test D:\work\react-quickly\ch16\password
> jest

 FAIL  __tests__\password.test.js
  ● Password › changes after clicking the Generate button

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Password.generate (jsx\password.jsx:43:46)
      at Object.invokeGuardedCallback [as invokeGuardedCallbackWithCatch] (node_modules\react-dom\lib\ReactErrorUtils.js:26:5)
      at executeDispatch (node_modules\react-dom\lib\EventPluginUtils.js:83:21)
      at Object.executeDispatchesInOrder (node_modules\react-dom\lib\EventPluginUtils.js:108:5)
      at executeDispatchesAndRelease (node_modules\react-dom\lib\EventPluginHub.js:43:22)
      at executeDispatchesAndReleaseSimulated (node_modules\react-dom\lib\EventPluginHub.js:51:10)
      at forEachAccumulated (node_modules\react-dom\lib\forEachAccumulated.js:26:8)
      at Object.processEventQueue (node_modules\react-dom\lib\EventPluginHub.js:255:7)
      at node_modules\react-dom\lib\ReactTestUtils.js:350:22
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
      at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
      at Object.click (node_modules\react-dom\lib\ReactTestUtils.js:348:18)
      at Object.done (__tests__\password.test.js:45:24)
          at <anonymous>
      at process._tickCallback (internal\process\next_tick.js:188:7)

 FAIL  __tests__\generate-password.test.js
  ● method generatePassword › returns a generated password of the set pattern

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Object.it (__tests__\generate-password.test.js:11:20)
          at <anonymous>

  ● method generatePassword › return a new value different from the previous one

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Object.it (__tests__\generate-password.test.js:16:21)
          at <anonymous>

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

[manuva1]

i was stuck can you explain the solution, its it because javascript does not know when the expression starts

[hyunchulkwak]

i was stuck can you explain the solution, its it because javascript does not know when the expression starts

@manuva1 In Javascript, semicolon can be omitted since there is a feature called Automatic semicolon insertion. But in case a line starts with [, (, or ```, there should be a semicolon in front of the line. You can think of what will occur when those two lines of codes are merged in one line without a line break.