用Axios对post onSubmit方法进行反应形式测试

Question

我对JavaScript和测试很陌生。我使用'npx创建-反应-应用‘作为起点。我已经搜索过论坛，但是代码非常不同。

CreatPost.js

import React, { useState } from 'react';
import axios from 'axios';

export default () => {
  const [title, setTitle] = useState('');
  const onSubmit = async event => {
    event.preventDefault();

    await axios.post('http://localhost:4000/posts', {
      title
    });
    // clear title
    setTitle('');
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Title</label>
          <input
            value={title}
            onChange={e => setTitle(e.target.value)}
            className="form-control"
          />
        </div>
        <button className="btn btn-primary">Submit</button>
      </form>
    </div>
  );
};

axios.js模拟文件

export default {
  get: jest.fn().mockResolvedValue(),
  post: jest.fn().mockResolvedValue()
  };

我根据这里的研究所做的尝试：

CreatePost.test.js

import * as axios from 'axios';
import request from 'supertest';
import CreatePost from '../CreatePost';


it('returns a 201 on successful post', async () => {
  axios.post.mockImplementationOnce(() => Promise.resolve());
  return request(CreatePost)
    .post('/posts')
    .send({ 
      title : 'My first post'
    })
    .expect(201);
});

来自测试的错误

TypeError: Cannot read property 'mockImplementationOnce' of undefined
       5 |
       6 | it('returns a 201 on successful post', async () => {
    >  7 |   axios.post.mockImplementationOnce(() => Promise.resolve());
         |              ^
       8 |   return request(CreatePost)
       9 |     .post('/posts')
      10 |     .send({ 

我肯定是迷茫和困惑。任何有用的例子都将不胜感激。

第二次尝试使用axios模拟适配器

CreatePost.test.js

import CreatePost from '../CreatePost';
import mockedAxios from 'axios-mock-adapter';


it('returns a 201 on successful post', async () => {
  mockedAxios.post.mockImplementationOnce(() => Promise.resolve());
  return request(CreatePost)
    .post('/posts')
    .send({ 
      title : 'My first post'
    })
    .expect(201);
});

TypeError: axios.create不是一个函数

  1 | //import request from 'supertest';
  2 | import CreatePost from '../CreatePost';
> 3 | import mockedAxios from 'axios-mock-adapter';
    | ^
  4 |

Answer 1

这是axios-mock-adapter的规范用法

import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);
const resp = 'success';

mock.onGet().reply(201, resp);

但我觉得你不知道你在做什么..。请先阅读文档，然后提问。另外，我首先推荐jest和enzyme基础的教程:)