Skip to content
This repository has been archived by the owner on Dec 3, 2020. It is now read-only.

Commit

Permalink
Fix #28: WIP - Add initial Jest test for a React component.
Browse files Browse the repository at this point in the history
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
* 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.
  • Loading branch information
biancadanforth committed Jul 18, 2018
1 parent 7c2528d commit 9acc8c3
Show file tree
Hide file tree
Showing 9 changed files with 6,030 additions and 3,725 deletions.
5 changes: 4 additions & 1 deletion .babelrc
@@ -1,5 +1,8 @@
{
"presets": ["react"],
"presets": [
"react",
"env"
],
"plugins": [
"transform-class-properties",
"transform-decorators-legacy"
Expand Down
13 changes: 10 additions & 3 deletions .eslintrc.json
@@ -1,10 +1,17 @@
{
"extends": "airbnb",
"extends": [
"airbnb",
"plugin:jest/recommended"
],
"env": {
"webextensions": true,
"browser": true
"browser": true,
"jest/globals": true
},
"plugins": ["react"],
"plugins": [
"react",
"jest"
],
"parser": "babel-eslint",
"rules": {
"object-curly-newline": ["error", {"consistent": true}],
Expand Down

0 comments on commit 9acc8c3

Please sign in to comment.