API-интерфейс для получения POST-запросов с использованием sinon, jest для приложенияact.js

Question

Я хочу протестировать почтовый запрос для API выборки, который запускается при нажатии кнопки.Чтобы смоделировать запрос API fetch, я использую библиотеку sinon.Поддельный сервер жив, но не предоставляет ответный объект JSON.apiUrl здесь http://localhost:5000/api/users, а userData { sid: 1, sname: 'test'}.

Вот файл App.test.js

describe('test api',()=>{
  let server;
  beforeEach(() => {
    server = fakeServer.create();
    server.respondWith('POST',
    apiUrl,
    [
     200,
     { 'Content-Type': 'application/json' },
     JSON.stringify(userData)
    ]
  );

});


describe('app component', () => {
  const app = mount(<App />);

  beforeEach(() => {
    app.find('Button').simulate('click');
  });

  it('get data from server', done => {
    server.respond();
    setTimeout(done);
  });

  it('updates state', () => {
    expect(app.state().user).toEqual('user1')  // fails
  })

});

});

Отредактировано:

Компонент приложения

class App extends Component {
  constructor() {
    super();
    this.state = {
    serialNum: ''
      user: ''
    }
  }

submitUrl = async () => {
    const postData = { sid: this.state.serialNum, sname: 'something'};
    try {
      let response = await fetch('http://localhost:5000/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
      });
      response = await response.json();
      if (result) {
        this.setState({ user: response.username});
      }

    } catch (err) {
      console.log('Error:', err);
    }
  }

render() {
return (
  <div className="container">

    <div className="col">
      <Form>
        <FormGroup>
          <div className="row input-container">
            <FormControl placeholder="Enter value"
              onChange={(e) => this.setState({
                serialNum: e.target.value
              })} />
          </div>
          <div className="row">
            <Button variant="primary"
              className="submit-btn"
              onClick={this.submitUrl}>Submit</Button>
          </div>
        </FormGroup>
      </Form>
    </div>
  </div>
  );
 }
}

export default App;

Что мне здесь не хватает?Как мне отладить, если запрос к серверу был успешным или неудачным?Я звоню server.respond() после имитации нажатия кнопки, а также прошу Jest подождать, пока сервер завершит запрос, передав параметр done.

Answer 1

Почему бы просто не смоделировать саму функцию извлечения вместо сервера.Итак:

describe('app component', () => {
  const app = mount(<App />);

  beforeEach(() => {
    global.fetch = jest.fn().mockImplementation(() => {
      return Promise.resolve(new Response(JSON.stringify({ sid: 1, sname: 'test' })));
    });
    app.find('Button').simulate('click');
  });

  it('updates state', () => {
    expect(app.state().user).toEqual('user1')  // fails
  })
});

Помните, что здесь вы проверяете изменение своего состояния после выборки данных, достаточно просто сменить функцию выборки, чтобы достаточно проверить вашу логику.