[Udemy] React Testing with Jest and Enzyme 2

**섹션 2: Simple React App: Click Counter **

dir: click-counter

initial tests

test("renders w/o error", () => {});
test("renders increment btn", () => {});
test("renders counter display", () => {});
test("counter starts at 0", () => {});
test("clicking btn increments counter display", () => {});

data-test

html attribute ID or class 사용하면 나중에 문제생길 수 있음

• production에서 data-test 지우기
  1. npm i —save—dev babel-plugin-react-remove-properties
  2. npm run eject - babel setting 다 빼줌

  3. package.json 수정

     “babel”: { // 아래 추가 “env”: { “production”: { “plugins”: [ [“react-remove-properties”, {“properties”: [“data-test”]}] ] } }, “presets”: [ “react-app” ] }

  4. npm run build

JS Doc

/**
 * Factory function to create a ShallowWrapper for the App component.
 * @Function setup
 * @param {object} props - Component props specific to this setup.
 * @param {any} state - Initial state for setup.
 * @returns {ShallowWrapper}
 */

const setup = (props = {}, state = null) => {
  return shallow(<App {...props} />);
};

/**
 * Returns ShallowWrapper containing node(s) with the given data-test value.
 * @param {shallowWrapper} wrapper - Enzyme shallow wrapper to serach within.
 * @param {string} val - Value of data-test attribute for search.
 * @returns {ShallowWrapper}
 */

const findByTestAttr = (wrapper, val) => {
  return wrapper.find(`[data-test="${val}"]`);
};

⭐️Challenge 1 - decrement button (don’t copy/paste!)

⭐️Challenge 2 - no count below zero

• if the counter is at zero, and the decrement button is clicked:
  • don’t decrement the counter
  • display an error message saying the counter can’t go below zero
  • enzyme method 확인하기!

⭐️Challenge 3 - remove error when increment button is clicked

solutions: https://github.com/flyrightsister/udemy-react-testing-projects/tree/click-counter-challenges/click-counter