Jest 에러 모음

hotbreakb·2022년 11월 12일

🍒 Test

'describe' is not defined.

React에서 Jest를 사용할 때 describe, it, expect를 따로 import하지 않아도 된다. 하지만 인식이 되지 않아 잠시 방황했다 😅

testing 라이브러리 설치
$ npm i -D jest
$ yarn add --dev jest

  "devDependencies": {
    "@testing-library/react": "^13.4.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@types/jest": "^29.2.2",
    "jest": "^29.3.1"
  }

.eslintrc.json에 jest 옵션 추가

  "env":{
    "jest": true
  }

eslint 재시작
맥에서 fn + F1을 누르고 ESlint: Restart & Developer: Reload 실행

참고 자료

Support for the experimental syntax 'jsx' isn't currently enabled

module.exports = {
    presets: ["@babel/preset-env", "@babel/preset-react", '@babel/preset-typescript'],
};

참고 자료

stackoverflow

document is not defined

  "jest": {
    "testEnvironment": "jsdom"
  }

참고 자료

Github Issue

ReactDOM.render no longer supported in React 18

import { render } from "@testing-library/react";

참고 자료

velog

expect(...).toHaveTextContent is not a function

import "@testing-library/jest-dom";

참고 자료

stackoverflow

🍅 styled-components

import { render, screen } from "@testing-library/react";
import QuizOption from "../QuizOption";
import React from "react";
import theme from "../../styles/theme";
import { ThemeProvider } from "styled-components";

const QuizOptionProps = {
  index: 1,
  content: "테스트 문항입니다.",
  isAnswer: true,
};

describe("QuizOption", () => {
  it("선택지에 문구가 나오는지 확인", () => {
    render(
      <ThemeProvider theme={theme}> // 🚨 추가 🚨
        <QuizOption {...QuizOptionProps} />
      </ThemeProvider>
    );

    const text = screen.getByText("content");
    expect(text).toBeInTheDocument();
  });
});