인프런 커뮤니티 질문&답변

안녕하세요 2.1 class 단위 테스트를 작성하고 `npm run test`로 테스트를 구동 했을 때, 다음과 같이 테스트를 실패하고 있습니다. `nvm use`, 'npm ci'를 모두 마친 상황인데, 어떤 문제를 해결해야 할까요?

 혹시나 싶어 스토리북을 구동했을 때는, 문제 없이 scripts 명령어를 입력했을 때 실행이 되는 것을 확인할 수 있었습니다.!

github branch의 unit-test-example을 pull 받아서 진행했습니다!

• 운영체제: Windows 11

   

import { screen } from '@testing-library/react';
import React from 'react';

import TextField from '@/components/TextField';
import render from '@/utils/test/render';

it('className Prop으로 설정한 css class가 적용된다.', async () => {
  // Arrange - 테스트를 위한 환경 만들기
  // -> className을 지닌 컴포넌트 렌더링
  await render(<TextField className="my-class" />);

  // Act - 테스트할 동작 발생
  // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략
  // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다.

  // Assert - 올바른 동작이 실행되었는지 검증
  // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증

  // TextField는 placeholder 요소가 있습니다.
  // vitest의 expect 함수를 사용하여 기대 결과를 검증
  expect(
    screen
      .getByPlaceholderText('텍스트를 입력해 주세요.')
      .toHaveClass('my-class'),
  );
});

•  

   FAIL  src/components/tests/TextField.spec.jsx [ src/components/tests/TextField.spec.jsx ]
  
  Error:
  
  C:\Users\js953\Desktop\Github\fe-test\test-example-shopping-mall\src\components\tests\TextField.spec.jsx
  
    21:3  error  Expect must have a corresponding matcher call  vitest/valid-expect
  
  ✖ 1 problem (1 error, 0 warnings)
  
   ❯ formatError node_modules/vite/dist/node/chunks/dep-abb4f102.js:43916:46
  
   ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-abb4f102.js:43912:19
  
   ❯ TransformContext.transform node_modules/vite-plugin-eslint/dist/index.mjs:1:1989
  
   ❯ Object.transform node_modules/vite/dist/node/chunks/dep-abb4f102.js:44206:30
  
   ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-abb4f102.js:54851:29
  
  ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
  
   Test Files  1 failed (1)
  
        Tests  no tests
  
     Start at  12:45:37
  
     Duration  1.63s (transform 743ms, setup 883ms, collect 0ms, tests 0ms, environment 408ms, prepare 109ms)
  
   FAIL  Tests failed. Watching for file changes...
  
         press h to show help, press q to quit
  ```

Test result not found. 
If you set `vitest.commandLine` please check: 
    Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api)
    Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`)
Are there tests with the same name?
Can you run vitest successfully on this file? Does it need custom option to run?


Vitest output:

 DEV  v0.33.0 C:/Users/js953/Desktop/Github/fe-test/test-example-shopping-mall
      API started at http://127.0.0.1:60930

 ❯ src/components/tests/TextField.spec.jsx  (0 test)