๊ฐ๋จํ ์ค๋ ์ท ํ ์คํธ๋ฅผ ์๋ํ๊ณ ์์ต๋๋ค. ํ ์คํธ ์ค์ธ ๊ตฌ์ฑ ์์๋ ๋ชจ๋์ ๋ค๋ฅธ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ค์์ ์ฌ์ฉํ์ฌ ๋ชจ์๋์ง ์์ ๋ชจ๋์ ๊ฐ์ ธ์ค๋ ค๊ณ ํ๋ฉด ํ ์คํธ๊ฐ ์คํจํฉ๋๋ค.
์คํจ
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๊ฐ ํ์ํ์ง ์์ต๋๋ค.
๊ทธ๊ฒ์ ๋๋ฅผ ์ํด ์๋ํ์ง ์์๋ค. 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์ ๋น๋ ํ์ผ์ ๊ฒ์ํ๋๋ก ์์ฒญํ ์๋ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
jest --no-cache
๋ฅผ) ์๋ํ ์ ์์ต๋๊น? ๋ง์ง๋ง ํธ์ถ ์ ์ babelrc๋ฅผ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ ์บ์๊ฐ ์ ๋๋ก ์ ๋ฐ์ดํธ๋์ง ์์ ์ ์์ต๋๋ค.๊ทธ๋๋ ์๋ํ์ง ์์ผ๋ฉด github์ ๋ฆฌํฌ์งํ ๋ฆฌ๋ฅผ ๋ง๋ค์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด npm install ๋ฐ npm ํ ์คํธ๋ฅผ ์ํํ ์ ์์ต๋๋ค.
ํ: automocking์ ์ด์จ๋ ๋นํ์ฑํ๋๋ฏ๋ก react-native-preset์ ์ฌ์ฉํ ๋ unmockedModulePathPatterns๊ฐ ํ์ํ์ง ์์ต๋๋ค.