vue with joke - 비동기 호출을 사용한 테스트

vue with joke - 비동기 호출을 사용한 테스트

어떻게 하면 내 API 결과를 기다릴 수 있을까요?나는 내 컴포넌트를 테스트하기 위해 vue와 joke를 사용하고 있다.

클라이언트를 데이터베이스에 쓰는 방법을 테스트하고 싶습니다.내 컴포넌트에는 다음과 같은 방법이 있습니다.

methods: {

  onSubmitClient(){

   axios.post(`urlApi`, this.dados).then(res => {

      return res;
   })

  }
}

내 시험에서는

describe('login.vue', () => {

  let wrapper

  beforeAll(()=>{

    wrapper = mount(client, {
      stubs: ['router-link'],
      store,
      data() {
          return {
              dados: {
                  name: 'tes name',
                  city: 'test city'
              },
          };
      }
    })
  })

  it('store client', () => {

    res = wrapper.vm.onSubmitLogin()
    console.log(res);

  })

})

이 테스트는 API 호출이 완료될 때까지 기다리지 않습니다.API 호출을 기다려야 테스트가 성공했는지 알 수 있습니다.API가 반환될 때까지 테스트를 대기하려면 어떻게 해야 합니까?

코드에는 몇 가지 문제가 있습니다.

'아, 아, 아, 아, 이랬다 할 수 없어요.return 비동기 콜로부터.그 대신에, 아마 몇개의 데이터를 설정해 둘 필요가 있습니다.onSubmitClient하고 전체를 반환한다axios§ (약속)들면 다음과 같습니다.예를 들어 다음과 같습니다.

onSubmitClient(){
  return axios.post(`urlApi`, this.dados).then(res => {
      this.result = res;
      return res;
  })
}

합니다.result서버로부터 액세스 합니다.아마도 당신은 그것을 원하지 않을 것이다; 그것은 단지 예시일 뿐이다.중중시시시시시 시

, 그럼 .onSubmitClient에 '''가 있는지''를 확인합니다.this.result는 이미 설정되어 있습니다.이미 알고 있듯이, 이것은 간단하지 않습니다.

재스트 테스트가 비동기 코드를 대기하려면 콜백 함수를 제공하거나 약속을 반환해야 합니다.앞의 예를 들어보겠습니다.

it('store client', (done) => {
  wrapper.vm.onSubmitLogin().then((res) => {
    expect(wrapper.vm.dados).toEqual(res);
    done();
  })
});

@jonsharpe가 코멘트에서 말한 것처럼 이 코드는 정상적으로 동작하지만 아직 문제가 있습니다.

일반적으로 실제 네트워크 요구는 속도가 느리고 실행할 수 없기 때문에 단일 테스트에서는 실행하지 않습니다.또한 단일 테스트는 컴포넌트를 분리하여 테스트하는 것을 목적으로 하고 있습니다.이 테스트에서는 요구가 있을 때 컴포넌트가 적절하게 이 결과를 설정하는 것뿐만 아니라또, 실제로 동작하고 있는 Web 서버가 있는 것도 테스트하고 있습니다.

이 시나리오에서는 이 단일 기능을 테스트하기 위해 요청을 다른 방법으로 추출하여 시뮬레이션합니다.vue-test-utils ★★★★★★★★★★★★★★★★★」jest.fnonSubmitClient★★★★

컴포넌트:

export default {
  data() {
    return {
      http: axios,
      ...
    },
    methods: {

      onSubmitClient(){
        this.http.post(`urlApi`, this.dados).then(res => {
            this.result = res;
        })
      }
    }
  }
}

테스트:

it('store client', (done) => {
  const fakeResponse = {foo: 'bar'};
  var post = jest.fn();
  var http : {
    post,
  };
  var wrapper = mount(client, {
    stubs: ['router-link'],
    store,
    data() {
      return {
        dados: {
            name: 'tes name',
            city: 'test city'
        },
        http, //now, the component under test will user a mock to perform the http post request.
      }
      }
  });
  wrapper.vm.onSubmitLogin().then( () => {
    expect(post).toHaveBeenCalled();
    expect(wrapper.vm.result).toEqual(fakeResponse);
    done();
  })

});

테스트에서는 두 가지를 주장합니다.

1. post출됩니니다다
2. this.result이치노

두 과 ""을 합니다.this.result = res행이 표시됩니다.

따라서 기본적으로 테스트가 비동기 요청을 대기하지 않는 이유와 코드의 몇 가지 문제를 다룹니다.할 이 몇 i. 나는 합니다).wrapper안 좋은 생각이고, 저는 항상 이 일을shallowMount에 걸쳐서mount컴포넌트의 동작을 테스트하는 경우)이지만, 이 답변은 많은 도움이 됩니다.

PS: 코드를 테스트하지 않았기 때문에 뭔가 잘못되었을지도 모릅니다.동작하지 않는 경우는, 구문 에러나 같은 문제를 찾아 주세요.

언급URL : https://stackoverflow.com/questions/51812626/vue-with-jest-test-with-asynchronous-call