小编Dan*_*zki的帖子

我创建了一个自定义的React钩子，该钩子应该可以处理所有不太重要的api请求，但我不想将其存储在redux状态。挂钩工作正常，但我无法对其进行测试。我的测试设置是开玩笑和酶，但是我决定在这里也尝试一下react-hooks-testing-library。

到目前为止，我尝试过的工作是先使用fetch-mock库模拟fetch请求，但效果很好。接下来，我用renderHook方法渲染钩子，该方法来自react-hooks-testing-library。不幸的是，我似乎不太了解该waitForNextUpdate方法。

这就是我的钩子的样子。

useApi钩

export function useApi<R, B = undefined>(
    path: string,
    body: B | undefined = undefined,
    method: HttpMethod = HttpMethod.GET
): ResponseStatus<R> {
    const [response, setResponse] = useState();
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [error, setError] = useState<string | boolean>(false);

    useEffect(() => {
        const fetchData = async (): Promise<void> => {
            setError(false);
            setIsLoading(true);
            try {
                const result = await callApi(method, path, body);
                setResponse(result);
            } catch (errorResponse) {
                setError(errorResponse);
            }

            setIsLoading(false); …

我试图在我的 URL 中传递参数，但我在阅读时遇到了问题。我正在使用 react-router v4。

URL： http://localhost:3000/reset?token=123 我试图这样阅读：

<Route
   path="/reset?token=:token"
   component={Reset}/>

但这会打印空对象console.log(this.props.match.params);。奇怪的是我试图将问号更改为其他字符，看起来它解决了我的问题，但无论如何我想保留问号。

网址： http://localhost:3000/reset_token=123

<Route
   path="/reset_token=:token"
   component={Reset}/>

这已经有效了console.log(this.props.match.params);。知道如何使问号也正确吗？对我来说真正重要的是继续使用 react-router 而没有任何外部库。

干杯，丹尼尔

我正在尝试使用 JEST 库测试此功能（我也在项目中使用了酶），但我完全卡住了。

用几句话来描述这个功能，我用它来导出之前准备好的数据。我加工了一些数据，然后以单个字符串的形式传递它，这个 func 将它包装成一个文本文件并开始下载。

大多数情况下，它是 csv、tsv 和文本。

/**
 * Function creating text file and starting download process
 *
 * @param name - file name
 * @param extension - file extension
 * @param content - file content
 */
export const downloadTextFile = (name: string, extension: string, content: string) => {
    const link = document.createElement('a');
    link.className = 'download-helper';
    link.download = name + '.' + extension;
    link.href = `data:application/${extension},` + escape(content);
    link.click();
};

我想养成良好的测试习惯，所以我也在尝试理解像这里这样的边缘情况。关于如何开始的任何提示？

我正在尝试使用react-styleguidist库创建项目文档。但是，我有一个问题。好吧，在项目中我确实将单位 rem 重置为使用 10px 的倍数，而不是 16px。

一切都很好，但我是在应用程序样式的根源上做到的。Stylegudist 没有看到它。如何将这样的行添加到文档库中？

html {font-size: 62.5%; / * Now 10px = 1rem! * /}

或者换个方式。我不想将 rem 重置到我的每个组件样式。

干杯，丹尼尔