Item/test: refine custom Matcher

Author: apollo1017

src/App/Item/index.test.tsx

@@ -46,19 +46,19 @@ test('should each todo object value is set to Item element', () => {
 })
 
 test('should correct render default class state', () => {
-  const { container } = render(
+  const { getByTestId } = render(
     <Provider store={initialStore}>
       <App />
     </Provider>
   )
 
   // when not.completed & not.onEdit, SwitchStyle doesn't show .completed .editting selectors
-  expect(container.querySelector('[class*="completed"]')).toBe(null)
-  expect(container.querySelector('[class*="editing"]')).toBe(null)
+  expect(getByTestId('todo-item')).not.toHaveClass('completed')
+  expect(getByTestId('todo-item')).not.toHaveClass('editing')
 })
 
 test('should work "check" complete toggle button', () => {
-  const { getByTestId, container } = render(
+  const { getByTestId } = render(
     <Provider store={initialStore}>
       <App />
     </Provider>
@@ -69,18 +69,18 @@ test('should work "check" complete toggle button', () => {
   expect(
     (getByTestId('todo-item-complete-check') as HTMLInputElement).checked
   ).toBe(true)
-  expect(container.querySelector('[class*="completed"]')).toBeInTheDocument()
+  expect(getByTestId('todo-item')).toHaveClass('completed')
 
   // should working as toggle
   fireEvent.click(getByTestId('todo-item-complete-check'))
   expect(
     (getByTestId('todo-item-complete-check') as HTMLInputElement).checked
   ).toBe(false)
-  expect(container.querySelector('[class*="completed"]')).toBe(null)
+  expect(getByTestId('todo-item')).not.toHaveClass('completed')
 })
 
 test('should work edit mode toggle', () => {
-  const { getByTestId, container } = render(
+  const { getByTestId } = render(
     <Provider store={initialStore}>
       <App />
     </Provider>
@@ -90,9 +90,8 @@ test('should work edit mode toggle', () => {
   expect(getByTestId('todo-edit-input')).not.toBeVisible()
 
   // double click todo text label, then enable todo text edit code
-
   fireEvent.doubleClick(getByTestId('todo-body-text'))
-  expect(container.querySelector('[class*="editing"]')).toBeInTheDocument()
+  expect(getByTestId('todo-item')).toHaveClass('editing')
   // @TODO in jsdom, dynamic .editing classCSSSelector doesn't apply. So tipically show/hide UI test are difficult.
   // @ref https://spectrum.chat/testing-library/general/testing-an-accordion~b004a9b1-b104-4eb1-a73b-43c60b1a3630?m=MTU1NDQ4NDIzMTQ5Ng==
   //expect(getByTestId('todo-edit-input')).toBeVisible()