테스트는 이름 그대로, 소프트웨어를 테스트하는 작업입니다. 소프트웨어에 숨겨진 버그는 없는지, 여러 명이 동시에 이용할 때에도 잘 견디는지 등의 문제들을 꼼꼼히 점검하는 일입니다. 테스트를 거치지 않은 소프트웨어는 일반적으로 신뢰하기 어렵습니다. 그 이유는 언제 어디서 버그가 나올지 모르기 때문입니다.
개발자가 가장 많이 마주하게 되는 테스트는 크게 세 가지로 아래와 같습니다.
/login
으로 POST 요청 시 로그인은 잘 되는지, /order
로 POST 요청 시 주문 결과는 잘 나오는지 등을 확인합니다.보통 테스트는 유닛 -> 통합 -> E2E 순으로 작성하게 됩니다(꼭 정답이 있는 건 아닙니다) 작은 단위부터 테스트를 작성하면서 점점 통합적인 테스트를 진행하게 됩니다.
테스트 개수는 가장 작은 단위 테스트인 유닛 테스트가 가장 많고, E2E 테스트가 가장 적게 됩니다.
유닛 테스트로 추후에 어떠한 컴포넌트의 기능이 문제가 있는지 빠르게 찾아낼 수 있습니다. 한편 통합테스트로 프로그램의 로직 흐름에 이상이 없는지를 파악할 수 있습니다. E2E 테스트는 최종적으로 사용자 관점에서 사용하기에 기능적인 문제가 없는지 진행하는 테스트로 정리할 수 있습니다.
테스트 코드는 프로젝트의 코드를 테스트하기 위해 필요합니다. 하지만 테스트 코드는 단순히 테스트 실행 말고도 다음처럼 더 큰 의미들이 있습니다.
Jest 공식홈페이지에 나와 있는 기본 예제를 연습해보았다.
//package.json
"scripts": {
"test": "jest",
},
//src/setupTests.js
import "@testing-library/react";
import "@testing-library/jest-dom";
//sum.js
const sum = (arr) => {
return arr.reduce((acc, cur) => {
acc += cur;
return acc;
}, 0);
};
module.exports = sum;
//sum.test.js
const sum = require("./sum");
const numArr = [1, 2, 3];
describe("Jest 연습 중", () => {
it("덧셈 연습 중", () => {
expect(sum(numArr)).toEqual(6);
});
});
위와 같이 작성 후 npm run test를 하게 되면 Jest가 파일명이 xxx.test.js
이거나__tests__
폴더에 생성한 test 파일들을 일괄적으로 테스트한다.
//npm i -D @babel/preset-env
//babel.config.js
module.exports = {
presets: ['@babel/preset-env'],
};
//npm i -D @babel/preset-env
//babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-typescript'],
};
//Profile.js
import React from "react";
const Profile = ({ username, name }) => {
return (
<div>
<b>{username}</b>
<span>({name})</span>
</div>
);
};
export default Profile;
//Profile.test.js
import React from "react";
import { render } from "@testing-library/react";
import Profile from "./Profile";
describe("<Profile />", () => {
it("matches snapshot", () => {
const utils = render(<Profile username="어피치" name="아이스티" />);
expect(utils.container).toMatchSnapshot();
});
});
//jest.config.js
module.exports = {
testEnvironment: "jsdom",
};
//npm install --save-dev jest-environment-jsdom
위와 같이 작성하면 아래와 같은 결과를 확인할 수 있다.
OAuth 인증시 인증코드를 받게되고, 그 코드를 통해 토큰을 받아 유저를 구별할 수 있게 된다. 테스트 코드를 만들어 인증코드와 토큰이 재대로 들어오는지 마지막으로 받은 토큰으로 유저정보를 재대로 받아 오는지를 확인해보고 싶다.
//Naver.tsx
function Naver() {
const navigate = useNavigate();
const dispatch = useDispatch<AppDispatch>();
const getNaverToken = async () => {
const naverCode = new URL(window.location.href).searchParams.get('code');
const naverState = new URL(window.location.href).searchParams.get('state');
const response = await axios.get(
`${process.env.REACT_APP_SERVER}/users/auth/naver?code=${naverCode}&state=${naverState}`,
{
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
},
);
const { token, oauthId } = response.data.data;
const data = await axios.post(
`${process.env.REACT_APP_SERVER}/users/oauth`,
{ oauthId },
{
headers: {
'Content-Type': 'application/json',
Authorization: token,
},
withCredentials: true,
},
);
dispatch(UserLogin(data.data.data));
navigate('/');
};
출처
그랩님이 공유해주신 자료
https://www.daleseo.com/jest-basic/
https://jestjs.io/docs/getting-started
https://blog.pumpkin-raccoon.com/81
https://jestjs.io/docs/upgrading-to-jest28#jsdom
I often like to play different games. I found a very profitable online gambling game https://odds96.in/en/casino . Platform is relatively new, so you can really make money here. There are a lot of slots, a wide range of games, various modes, free freespins and generous bonuses waiting for you. All of this you can try out at an Indian online casino.
The bonus and promotions review of BC Game on https://anycoincasinos.com/bc-game/ was quite informative. Bonuses and promotions are a significant part of the online casino experience. This review breaks down the different types of bonuses available at BC Game, how to access them, and the terms associated with them. Knowing this beforehand helps in making informed decisions about where to play.