Ref https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
Add recommended linter for best practices with react testing library
Fix some false-positive test passes uncovered by linter.
Details
Details
- Reviewers
PiRK - Group Reviewers
Restricted Project - Commits
- rABC8c32d92be58c: [Cashtab] Add eslint plugin for react testing library
eslint . and no output, npm test
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.
Failed tests logs:
====== CashTab Unit Tests: <CreateToken /> Renders the create token notification upon successful broadcast ======
Error: Unable to find an element by: [data-testid="create-token-notification"]
Ignored nodes: comments, script, style
<body>
<div>
<div
class="sc-jhAzac leOABX"
data-testid="create-token-ctn"
>
<div
class="sc-cHGsZl cwvZhj"
data-testid="create-token-form-ctn"
>
<h3>
Create a Token
</h3>
<div
class="sc-cvbbAY kdxSAu"
>
<form
class="ant-form ant-form-horizontal ant-form-small css-dev-only-do-not-override-1b0bdye"
style="width: auto;"
>
<label
class="sc-fBuWsC eUyDxp"
>
Token Name
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-name-input"
name="newTokenName"
placeholder="Enter a name for your token"
type="text"
value="test token"
/>
</div>
</div>
<div
style="display: flex; flex-wrap: nowrap;"
>
<div
class="ant-form-item-explain ant-form-item-explain-connected css-dev-only-do-not-override-1b0bdye"
role="alert"
>
<div
class=""
/>
</div>
</div>
</div>
</div>
</div>
<label
class="sc-fBuWsC eUyDxp"
>
Ticker
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-ticker-input"
name="newTokenTicker"
placeholder="Enter a ticker for your token"
type="text"
value="TKE"
/>
</div>
</div>
<div
style="display: flex; flex-wrap: nowrap;"
>
<div
class="ant-form-item-explain ant-form-item-explain-connected css-dev-only-do-not-override-1b0bdye"
role="alert"
>
<div
class=""
/>
</div>
</div>
</div>
</div>
</div>
<label
class="sc-fBuWsC eUyDxp"
>
Decimals
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-decimals-input"
name="newTokenDecimals"
placeholder="Enter number of decimal places"
type="number"
value="2"
/>
</div>
</div>
<div
style="display: flex; flex-wrap:...
at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByTestId (/work/cashtab/src/components/Etokens/__tests__/CreateToken.test.js:160:26)
====== CashTab Unit Tests: <SendToken /> Renders the send token notification upon successful broadcast ======
Error: Unable to find an element by: [data-testid="send-token-notification"]
Ignored nodes: comments, script, style
<body>
<div>
<div
class="sc-Rmtcm fuvBvM"
>
<div
class="sc-caSCKo lotmeB"
>
1
BEAR
</div>
<div
class="ant-row css-dev-only-do-not-override-1b0bdye"
type="flex"
>
<div
class="ant-col ant-col-24 css-dev-only-do-not-override-1b0bdye"
>
<form
class="ant-form ant-form-horizontal css-dev-only-do-not-override-1b0bdye"
style="width: auto;"
>
<div
class="sc-jAaTju jryjhA"
>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
style="margin-bottom: 0px;"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined css-dev-only-do-not-override-1b0bdye"
>
<span
class="ant-input-wrapper ant-input-group css-dev-only-do-not-override-1b0bdye"
>
<span
class="ant-input-affix-wrapper css-dev-only-do-not-override-1b0bdye ant-input-outlined"
>
<span
class="ant-input-prefix"
>
<span
aria-label="wallet"
class="anticon anticon-wallet sc-bxivhb iBBRHU"
role="img"
>
<svg
aria-hidden="true"
data-icon="wallet"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 464H528V448h312v128zm0 264H184V184h656v200H496c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h344v200zM580 512a40 40 0 1080 0 40 40 0 10-80 0z"
/>
</svg>
</span>
</span>
<input
autocomplete="off"
class="ant-input css-dev-only-do-not-override-1b0bdye"
data-testid="destination-address-single"
name="address"
placeholder="Address"
required=""
type="text"
value="ecash:qp89xgjhcqdnzzemts0aj378nfe2mhu9yvxj9nhgg6"
/>
</span>
<span
class="ant-input-group-addon"
>
<span
class="sc-jWBwVP mVapJ"
data-testid="scan-qr-code"
>
<span
aria-label="qrcode"
class="anticon anticon-qrcode sc-ifAKCX jqgRJL"
role="img"
>
<svg
aria-hidden="true"
data-icon="qrcode"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zm-56 284H192V612h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm590-630H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-32 284H612V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194...
at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByTestId (/work/cashtab/src/components/Send/__tests__/SendToken.test.js:369:26)
at runNextTicks (node:internal/process/task_queues:61:5)
at listOnTimeout (node:internal/timers:528:9)
at processTimers (node:internal/timers:502:7)Each failure log is accessible here:
CashTab Unit Tests: <CreateToken /> Renders the create token notification upon successful broadcast
CashTab Unit Tests: <SendToken /> Renders the send token notification upon successful broadcast
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.
Failed tests logs:
====== CashTab Unit Tests: <CreateToken /> Renders the create token notification upon successful broadcast ======
Error: Unable to find an element by: [data-testid="create-token-notification"]
Ignored nodes: comments, script, style
<body>
<div>
<div
class="sc-jhAzac leOABX"
data-testid="create-token-ctn"
>
<div
class="sc-cHGsZl cwvZhj"
data-testid="create-token-form-ctn"
>
<h3>
Create a Token
</h3>
<div
class="sc-cvbbAY kdxSAu"
>
<form
class="ant-form ant-form-horizontal ant-form-small css-dev-only-do-not-override-1b0bdye"
style="width: auto;"
>
<label
class="sc-fBuWsC eUyDxp"
>
Token Name
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-name-input"
name="newTokenName"
placeholder="Enter a name for your token"
type="text"
value="test token"
/>
</div>
</div>
<div
style="display: flex; flex-wrap: nowrap;"
>
<div
class="ant-form-item-explain ant-form-item-explain-connected css-dev-only-do-not-override-1b0bdye"
role="alert"
>
<div
class=""
/>
</div>
</div>
</div>
</div>
</div>
<label
class="sc-fBuWsC eUyDxp"
>
Ticker
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-ticker-input"
name="newTokenTicker"
placeholder="Enter a ticker for your token"
type="text"
value="TKE"
/>
</div>
</div>
<div
style="display: flex; flex-wrap: nowrap;"
>
<div
class="ant-form-item-explain ant-form-item-explain-connected css-dev-only-do-not-override-1b0bdye"
role="alert"
>
<div
class=""
/>
</div>
</div>
</div>
</div>
</div>
<label
class="sc-fBuWsC eUyDxp"
>
Decimals
</label>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-1b0bdye ant-input-outlined"
data-testid="token-decimals-input"
name="newTokenDecimals"
placeholder="Enter number of decimal places"
type="number"
value="2"
/>
</div>
</div>
<div
style="display: flex; flex-wrap:...
at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByTestId (/work/cashtab/src/components/Etokens/__tests__/CreateToken.test.js:160:26)
====== CashTab Unit Tests: <SendToken /> Renders the send token notification upon successful broadcast ======
Error: Unable to find an element by: [data-testid="send-token-notification"]
Ignored nodes: comments, script, style
<body>
<div>
<div
class="sc-Rmtcm fuvBvM"
>
<div
class="sc-caSCKo lotmeB"
>
1
BEAR
</div>
<div
class="ant-row css-dev-only-do-not-override-1b0bdye"
type="flex"
>
<div
class="ant-col ant-col-24 css-dev-only-do-not-override-1b0bdye"
>
<form
class="ant-form ant-form-horizontal css-dev-only-do-not-override-1b0bdye"
style="width: auto;"
>
<div
class="sc-jAaTju jryjhA"
>
<div
class="ant-form-item css-dev-only-do-not-override-1b0bdye ant-form-item-with-help"
style="margin-bottom: 0px;"
>
<div
class="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-col ant-form-item-control css-dev-only-do-not-override-1b0bdye"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined css-dev-only-do-not-override-1b0bdye"
>
<span
class="ant-input-wrapper ant-input-group css-dev-only-do-not-override-1b0bdye"
>
<span
class="ant-input-affix-wrapper css-dev-only-do-not-override-1b0bdye ant-input-outlined"
>
<span
class="ant-input-prefix"
>
<span
aria-label="wallet"
class="anticon anticon-wallet sc-bxivhb iBBRHU"
role="img"
>
<svg
aria-hidden="true"
data-icon="wallet"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 464H528V448h312v128zm0 264H184V184h656v200H496c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h344v200zM580 512a40 40 0 1080 0 40 40 0 10-80 0z"
/>
</svg>
</span>
</span>
<input
autocomplete="off"
class="ant-input css-dev-only-do-not-override-1b0bdye"
data-testid="destination-address-single"
name="address"
placeholder="Address"
required=""
type="text"
value="ecash:qp89xgjhcqdnzzemts0aj378nfe2mhu9yvxj9nhgg6"
/>
</span>
<span
class="ant-input-group-addon"
>
<span
class="sc-jWBwVP mVapJ"
data-testid="scan-qr-code"
>
<span
aria-label="qrcode"
class="anticon anticon-qrcode sc-ifAKCX jqgRJL"
role="img"
>
<svg
aria-hidden="true"
data-icon="qrcode"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zm-56 284H192V612h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm590-630H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-32 284H612V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194...
at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByTestId (/work/cashtab/src/components/Send/__tests__/SendToken.test.js:369:26)Each failure log is accessible here:
CashTab Unit Tests: <CreateToken /> Renders the create token notification upon successful broadcast
CashTab Unit Tests: <SendToken /> Renders the send token notification upon successful broadcast
| cashtab/src/components/Etokens/__tests__/CreateToken.test.js | ||
|---|---|---|
| 113 ↗ | (On Diff #45013) | the rawtx created by the createToken function was different than the one pasted here. So, the mock returned nothing because it was being called by a different rawtx than the mock. |
| 158 ↗ | (On Diff #45013) | also, clicking "create token" does not actually create the token -- it opens a confirmation modal. need to click ok there to actually create the token. |
| 162 ↗ | (On Diff #45013) | no async before this waitFor. Good reason to have this linter. In this case, whatever you put in this just passes. So we had a failing test that looked good. |
| cashtab/src/components/Send/__tests__/SendToken.test.js | ||
| 327 ↗ | (On Diff #45013) | the rawtx created by the sendToken function was different than the one pasted here. So, the mock returned nothing because it was being called by a different rawtx than the mock. |