Jest: babel-preset์—์„œ ์Šค๋ƒ…์ƒท ํ…Œ์ŠคํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2016๋…„ 08์›” 15์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/jest

๊ฐ„๋‹จํ•œ ์Šค๋ƒ…์ƒท ํ…Œ์ŠคํŠธ๋ฅผ ์‹œ๋„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ ์ค‘์ธ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋ชจ๋“ˆ์˜ ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ์˜๋˜์ง€ ์•Š์€ ๋ชจ๋“ˆ์„ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ•˜๋ฉด ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

์‹คํŒจ

Using Jest CLI v14.1.0, jasmine2, babel-jest, jest-react-native preset
 FAIL  js/app/SetupView/__tests__/SetupView-test.js (0s)
 Runtime Error
  - SyntaxError: Unexpected reserved word
        at transformAndBuildScript (../../../../../usr/local/lib/node_modules/jest-cli/node_modules/jest-runtime/build/transform.js:306:10)
        at Object.<anonymous> (js/app/SetupView/index.js:12:17)
        at Object.<anonymous> (js/app/SetupView/__tests__/SetupView-test.js:11:12)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 2.419s)

์‹œํ—˜

'use strict';
import 'react-native';
import React from 'react';

import SetupView from '../index';

import renderer from 'react-test-renderer';

describe('SetupView', ()=> {
  it('renders correctly', ()=>{
    const tree = renderer.create(
      <SetupView/>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  })
});

SetupView ๊ตฌ์„ฑ ์š”์†Œ

'use strict';

import React from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  Image,
  Animated,
} from 'react-native';

import DataContainer from 'react.datacontainer'; //<---fails here
import DashboardSettings from './DashboardSettings';
.
.
.

ํŒจํ‚ค์ง€.json

"jest": {
    "globals": {
      "__DEV__": true
    },
    "collectCoverage": false,
    "verbose": true,
    "preset": "jest-react-native",
    "modulePathIgnorePatterns": [
      "node_modules/react-native/node_modules/yeoman-generator",
      "node_modules/react-native/node_modules/fbjs"
    ],
    "unmockedModulePathPatterns": [
      "react.datacontainer",
      "react.data",
      "react.base.theme",
      "react.layout"
    ]
  }

์ฐธ๊ณ ๋กœ, ๋ฃจํŠธ ๋””๋ ‰ํ„ฐ๋ฆฌ์— react-native ์‚ฌ์ „ ์„ค์ •์„ ๊ฐ€๋ฆฌํ‚ค๋Š” .babelrc ํŒŒ์ผ์ด ์žˆ๊ณ  ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํ–‰๋˜์ง€๋งŒ DataContainer ๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— 12ํ–‰์„ ์ฃผ์„ ์ฒ˜๋ฆฌํ•˜๋ฉด ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

jest --no-cache ๋ฅผ) ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋งˆ์ง€๋ง‰ ํ˜ธ์ถœ ์ „์— babelrc๋ฅผ ๋ณ€๊ฒฝํ•œ ๊ฒฝ์šฐ ์บ์‹œ๊ฐ€ ์ œ๋Œ€๋กœ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฉด github์— ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด npm install ๋ฐ npm ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŒ: automocking์€ ์–ด์จŒ๋“  ๋น„ํ™œ์„ฑํ™”๋˜๋ฏ€๋กœ react-native-preset์„ ์‚ฌ์šฉํ•  ๋•Œ unmockedModulePathPatterns๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

jest --no-cache ๋ฅผ) ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋งˆ์ง€๋ง‰ ํ˜ธ์ถœ ์ „์— babelrc๋ฅผ ๋ณ€๊ฒฝํ•œ ๊ฒฝ์šฐ ์บ์‹œ๊ฐ€ ์ œ๋Œ€๋กœ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฉด github์— ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด npm install ๋ฐ npm ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŒ: automocking์€ ์–ด์จŒ๋“  ๋น„ํ™œ์„ฑํ™”๋˜๋ฏ€๋กœ react-native-preset์„ ์‚ฌ์šฉํ•  ๋•Œ unmockedModulePathPatterns๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค. node_module react.datacontainer ๊ฐ€์ ธ์˜ค๊ธฐ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ข€ ๋” ํŒŒ๊ณ ๋“ค๋ฉด jest ์‚ฌ์ „ ์„ค์ •์ด es6์œผ๋กœ ์ž‘์„ฑ๋œ node_modules๋ฅผ ์ปดํŒŒ์ผํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์œ ๊ฐ์Šค๋Ÿฝ๊ฒŒ๋„ ์ง€๊ธˆ์€ ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋” ๋„์›€์ด๋œ๋‹ค๋ฉด 'react.datacontainer'๋ชจ๋“ˆ์˜ ๋ชจ์Šต์ž…๋‹ˆ๋‹ค. https://github.com/ForceDotComLabs/react.force.datacontainer

์ด ๊ตฌ์„ฑ ์˜ต์…˜์„ ํ†ตํ•ด ์ด ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์‚ฌ์ „ ์ฒ˜๋ฆฌ๋ฅผ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://facebook.github.io/jest/docs/tutorial-react-native.html#preprocessorignorepatterns -customization

์›ํ•˜๋Š” ๊ฒฝ์šฐ ์ด ํ”„๋กœ์ ํŠธ์˜ github ํŽ˜์ด์ง€์— ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค์–ด ์ข…์†์„ฑ์„ ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผํ•˜๊ณ  npm์— ๋นŒ๋“œ ํŒŒ์ผ์„ ๊ฒŒ์‹œํ•˜๋„๋ก ์š”์ฒญํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰