Sinon: fakeServer ์š”์ฒญ ์ˆ˜๋Š” ํ•ญ์ƒ null์ž…๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 06์›” 06์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: sinonjs/sinon

  • ์‹œ๋…ผ ๋ฒ„์ „ : 2.3.2
  • ํ™˜๊ฒฝ : karma-test-runner
  • ์˜ˆ์‹œ URL:
  • ์‚ฌ์šฉ ์ค‘์ธ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ: mocha

๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚  ๊ฒƒ์ด๋ผ๊ณ  ์˜ˆ์ƒํ–ˆ์Šต๋‹ˆ๊นŒ? sinon.fakeServer.requests ์ˆ˜๊ฐ€ 1๋ณด๋‹ค ๋งŽ์„ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ ๋ฐœ์ƒํ•˜๋Š” sinon.fakeServer.requests๋Š” ํ•ญ์ƒ null์ž…๋‹ˆ๋‹ค.

๋ฒˆ์‹ ๋ฐฉ๋ฒ•

describe('--Pictures Selector--', () => {
   let server, store, wrap;
   beforeEach(() => {
      server = sinon.fakeServer.create();
      server.respondWith("GET", /\/api\/users/, [
         200, {"Content-Type":"application/json"}, JSON.stringify(mock_pictures_list_store)
      ]);
      store = new Pictures_List_Store([]);
      wrap = mount(
         <Selectable_Picture_List store={store} />
      );
      axios.get('http://localhost:9157/api/users/5/images/30/0');
      console.log("%c server.requests", "color: #C78B41", server.requests);
   });
   afterEach(() => {
      server.restore();
   });

   it('render drop zone', () => {
      server.respond();
      console.log("%c server.requests", "color: #C78B41", server.requests);
      expect(wrap.find('Dropzone')).to.have.length(1);
   });
});


ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์—์„œ ์ง์ ‘ axios.get ์š”์ฒญ์„ ํ˜ธ์ถœํ•˜๊ณ  react.js ์ปดํฌ๋„ŒํŠธ์˜ componentWillMount ๋ฉ”์†Œ๋“œ์—์„œ๋„ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

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

fakeServer๋กœ HTML ํ…Œ์ŠคํŠธ๋ฅผ ์‹œ์ž‘ํ•  ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์˜ˆ, ์žˆ์Šต๋‹ˆ๋‹ค .

์œ„์˜ beforeEach ์—์„œ ์š”์ฒญ์„ ํ™•์ธํ•˜๋Š” ์†”๋ฃจ์…˜์€ ๋‘ ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

  1. beforeEach ํ•จ์ˆ˜์— ์ฝœ๋ฐฑ ์ „๋‹ฌ
  2. console.log ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋ฉด ์ž ์‹œ๋งŒ ๊ธฐ๋‹ค๋ฆฌ์‹ญ์‹œ์˜ค.

๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

beforeEach(done => {
  // ...
  axios.get(...);
  setTimeout(() => {
    console.log("%c server.requests", "color: #C78B41", server.requests);
    done();
  });
});

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

axios.get() ๋Š” ๋น„๋™๊ธฐ์‹์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ console.log ๋ผ์ธ์ด ์‹คํ–‰๋  ๋•Œ xmlhttprequest ๊ฐ€ ์•„์ง ์ƒ์„ฑ๋˜์ง€ ์•Š์•˜์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋‹ต๋ณ€ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ server.autoRespond = true; ๋˜๋Š” server.respondImmediately = true; ๋˜๋Š” server.respond(); server.requests๋Š” ์—ฌ์ „ํžˆ ๋น„์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๊ฒƒ๋“ค์ด ์ž˜ ์•ˆ ๋˜๋Š” ๊ฒŒ ๋งž๋‚˜์š”?
fakeServer๋กœ HTML ํ…Œ์ŠคํŠธ๋ฅผ ์‹œ์ž‘ํ•  ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

fakeServer๋กœ HTML ํ…Œ์ŠคํŠธ๋ฅผ ์‹œ์ž‘ํ•  ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์˜ˆ, ์žˆ์Šต๋‹ˆ๋‹ค .

์œ„์˜ beforeEach ์—์„œ ์š”์ฒญ์„ ํ™•์ธํ•˜๋Š” ์†”๋ฃจ์…˜์€ ๋‘ ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

  1. beforeEach ํ•จ์ˆ˜์— ์ฝœ๋ฐฑ ์ „๋‹ฌ
  2. console.log ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋ฉด ์ž ์‹œ๋งŒ ๊ธฐ๋‹ค๋ฆฌ์‹ญ์‹œ์˜ค.

๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

beforeEach(done => {
  // ...
  axios.get(...);
  setTimeout(() => {
    console.log("%c server.requests", "color: #C78B41", server.requests);
    done();
  });
});

์šฐ์™€. ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค! ๊ฐ์‚ฌ ํ•ด์š”. ๋งˆ์ง€๋ง‰์œผ๋กœ ํ•„์š”ํ•œ ํ…Œ์ŠคํŠธ๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.

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