search

cagov / ui-claim-tracker

This repo contains the Claim Status Tracker app, which helps Californians better understand what’s happening with their unemployment claim and benefits.
9 stars 4 forks source link

Choose and integrate a test framework #42

Closed lomky closed 3 years ago

lomky commented 3 years ago

Description

Integrate a test suite harness into the UI Claim Tracker application. By default we are leaning towards Jest and Enzyme like our previous project, but we should do a bit of research if there is some NextJS bonus or other best practice that has emerged.

Acceptance Criteria

lomky commented 3 years ago

Example repo with Jest integration

lomky commented 3 years ago

Reading on testing choices in js. Considering Jest, Mocha, and Jasmine

Conclusion: given our straightforward app I am choosing Jest for ease of setup. Mocha is more powerful but more setup effort, and I don't foresee us needing the extra power. Jasmine might be a good thing to come back to later if our backend app ends up with more complex logic we want to validate, but we can skip it for now since we aren't sure whether we're implementing that logic or it's being done directly in the DB.

lomky commented 3 years ago

Ran into a lot of issues with babel when adding Jest to NextJS

Versions: NextJS 10.0.9 React: 16.14.0 React-dom: 16.14.0

Conclusion: Integration with React 16.14 (and maybe any higher versions) is different than previous versions. Solution

Error:

Error via `jest --ci --coverage` Wed Mar 17 10:57:33 [kat/42_test_framework !?*] ~/repos/ui-claim-tracker $ yarn test yarn run v1.21.1 $ jest --ci --coverage FAIL pages/index.test.js ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/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/en/configuration.html Details: SyntaxError: /home/kat/repos/ui-claim-tracker/styles/Home.module.css: Unexpected token (1:0) > 1 | .container { | ^ 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; at Parser._raise (node_modules/@babel/parser/src/parser/error.js:97:45) at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:92:17) at Parser.raise (node_modules/@babel/parser/src/parser/error.js:41:17) at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:161:16) at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1208:20) at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:611:23) at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:591:21) at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:558:23) at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:366:23) at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:331:23)
error via `jest --watch` Wed Mar 17 10:53:34 [kat/42_test_framework !?*] ~/repos/ui-claim-tracker $ yarn test:watch yarn run v1.21.1 $ jest --watch FAIL pages/index.test.js ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/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/en/configuration.html Details: /home/kat/repos/ui-claim-tracker/styles/Home.module.css:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){.container { ^ SyntaxError: Unexpected token . 1 | import Head from 'next/head' > 2 | import styles from '../styles/Home.module.css' | ^ 3 | 4 | export default function Home() { 5 | return ( at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) at Object. (pages/index.js:2:1)
Worklog ref https://dev.to/ericdouglas/how-to-configure-jest-on-a-next-js-project-1ic6 yarn add -D babel-jest jest add the .babelrc add teh test command tests harness starts, but no tests yet sooo _commit point, pr pushed_ added: enzyme enzyme-adapter-react-16 jest-junit Pulling ref files from https://github.com/cagov/unemployment/pull/31/files# - merging jest.config.js with existing - true'd up to that series of test run commands _commit point_ Realized I need it: - stole setupTestFramework.js from unemployment, pointed to it tweak the commands to not have added `pages/_app.test.js based off of unemployment App test` getting a css parse error? ``` $ yarn test jest --ci --coverage FAIL pages/_app.test.jest● Test suite failed to run ● Test suite failed to run SyntaxError: /home/kat/repos/ui-claim-tracker/styles/globals.css: Missing semicolon (2:4) 1 | html, > 2 | body { | ^ ``` https://stackoverflow.com/questions/56255074/nextjs-css-syntaxerror-unexpected-token babel-jest should be fixing this for us? I must be configed wrong. cleaning up the jest-config - dont want multiple roots - adding cssTransform.js no dice yet, same error pulling out config for enzyme? correcting app import? okay, enzyme fully commented out, its not enzyme. something in our babel config is wrong. its parsing our CSS file as a JS file for some reason going to try this solution: https://github.com/eddyerburgh/jest-transform-stub adding jest-transform-stub wait, also add babel? no, babel-cli updating config no dice 2021-03-17 going back to looking at the working dir again and wtf is different debugging with Kalvin - revieded work so far - more searching - discovered that _since fall 2020_ the behavior has changed! implemented https://stackoverflow.com/a/64689046/784829 and now working! removed jest config
lomky commented 3 years ago

Quick research dive on Enzyme vs alternatives

Reading:

Notes:

Conclusions: