This repository has been archived by the owner on Dec 3, 2020. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix #28: WIP - Add initial Jest test for a React component.
Builds off PR #26. * Adds Jest/Enzyme and the first part of a simple React component test, which can be executed via 'npm run test'. * Adds eslint rules for Jest * Adds new devDeps: * babel-jest: Compiles JS code using Babel in Jest tests * babel-preset-env: Compiles ES2015+ down to ES5. Currently this is so we can use 'import' in Node.js for the Jest tests. * enzyme: JS testing library for React * enzyme-adapter-react-16: Allows Enzyme to be compatible with React 16 * eslint-plugin-jest: Expose Jest-specific rules for use in ESLint * jest: Testing framework for JS including React apps * react-test-renderer: A peer dependency for enzyme-adapter-react-16. An experimental React renderer that can be used to render React components to pure JS objects, without depending on the DOM or a native mobile environment. * regenerator-runtime: Compiles generators/yield from ES2015 to ES5. Suggested by Jest docs for using Babel. * Adds a 'commerce' alias for Jest tests in 'package.json' for React components to match the 'commerce' alias used in Webpack. * Adds static asset mocks for Jest tests * Export both 'Accordion' and 'AccordionSection' classes from 'Accordion.jsx' rather than just 'Accordion', so that 'AccordionSection' can also be used in Jest tests. Questions: * How to get around the CSS import in Accordion.jsx? I currently have it commented out. * Is it possible for me to webpack the './test' directory? Would I want to? What might that look like? * How can I render the original '<Accordion />', instead of explicitly passing it two '<AccordionSection />' elements in the test? 'Accordion.jsx' renders two AccordionSections already with their own 'this.props.children'. * How can I fix the prop-types errors for required props? Do I just have to 'monkey patch' these components and pass dummy props into the components in the test? * Should I use 'babel-preset-env', so that I can use 'import' in the test files? These tests run in Node.js, and currently, Node.js v8 still does not support 'import'. * Jest docs (https://jestjs.io/docs/en/webpack) suggest using mocks for static assets. I followed their Webpack instrucions for this, but I'm not sure I follow what the mock files are actually for/doing. * Do we need the 'regenerator-runtime' package? How can we be sure? I assume this is similar to 'babel-preset-env' in that it might be needed for Node.js, but it is not needed for Firefox.
- Loading branch information
66947fe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks osmose, I added your feedback to my gist that captures this work.