如何使用 react-testing-library 在 Typescript 中测试公共功能？

Question

我的项目中有以下设置，每当我扩展 httpService 并在任何服务中使用“this.instance”时，我都会收到错误消息。

如果我直接使用 axios.get 而我的服务文件中没有任何拦截器，它工作正常。

我是单元测试的新手，并且非常坚持这一点。 请在下面分享你的评论。 这真的很有帮助。

httpClient.ts

 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
 import { DEFAULT_HEADERS, HOST } from './ApiHelper';
    
    export abstract class HttpService {
      protected readonly instance: AxiosInstance;
    
      public constructor(requestConfig: AxiosRequestConfig) {
        this.instance = axios.create(requestConfig);
    
        this.instance.interceptors.request.use((request) => {
          request.baseURL = HOST;
          request.headers = { ...DEFAULT_HEADERS };
          return request;
        });
    
        this.instance.interceptors.response.use(
          (response) =>
            response,
          (error) =>
            new Promise((resolve, reject) => {
              reject(error.response);
            }),
        );
      }
    }
    
    export default HttpService;

一些服务.ts

    import HttpService from './HttpService';
    
    const warningListUrl = 'some/url';
    
    class SomeService extends HttpService {
      public constructor() {
        super({
        });
      }
    
      public async getSomething(params: any) {
        this.instance({
          method: 'GET',
          url: warningListUrl,
          params,
        }).then((res) =>
          res.data);
      }
    }

export default SomeService;

反应组件.tsx

const fetchList = async () => {
    try {
      setIsLoading(true);
      const someService = new SomeService();
      const response: any = await someService.getSomething({});
      setWarnings(response.content);
      setTotalPages(response.totalPages);
    } catch (error) {
      console.log(error);
    } finally { setIsLoading(false); }
  };

  useEffect(() => {
    fetchList();
  }, []);

ReactComponent.test.tsx

jest.mock('../../services/SomeService');
const someService = new SomeService();


describe('page tests', () => {
  test('page renders without crashing', async () => {
    (someService.getWarningList as jest.Mock).mockResolvedValue(someMatchingData);
    await act(async () => {
      render(<ReactComponent />);
    });
    const text = screen.getByText('Warning 1');
    expect(text).toBeInTheDocument();
  });
}

错误：

TestingLibraryElementError: Unable to find an element with the text: Warning 1. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

render(<Warning />);
});
-> const text = screen.getByText('Warning 1');
 expect(text).toBeInTheDocument();
});

Answer 1

如果您只需要模拟特定方法，则可以使用requireActual 。

jest.mock('../../services/SomeService', ()=> {
  return {
    ...jest.requireActual('../../services/SomeService'),
    getWarningList: new Promise.resolve(someMatchingData)
  }
})

像这样模拟一个模块怎么样？

Answer 2

通过“原型”访问方法节省了我的时间。

(someService.prototype.getWarningList as jest.Mock).mockResolvedValue(someMatchingData);

只需在测试描述上方添加它就救了我。