太长了;模拟从第三方库导入的 React 组件的正确方法是什么?
我正在测试一个名为 的组件<App/>
。<Localize/>
它使用由名为 的库提供的第三部分组件localize-toolkit
。
我<Localize/>
在使用 Jest 进行嘲笑时遇到了一些麻烦。
这是我尝试嘲笑它的方法。
jest.mock('localize-toolkit', () => ({
// Normally you pass in a key that represents the translated caption.
// For the sake of testing, I just want to return the key.
Localize: () => (key:string) => (<span>{key}</span>)
}));
Run Code Online (Sandbox Code Playgroud)
我已经编写了一个单元测试,<App/>
如下所示。
it('Test', () => {
const component = render(<App/>);
expect(component).toMatchSnapshot();
}
)
Run Code Online (Sandbox Code Playgroud)
它会通过,但是这是返回的警告消息。
Functions are not valid as a React child. This may …
假设我们已经设置了上下文提供程序以及一些初始数据属性值。
假设某个消费者随后修改了这些属性。
在页面重新加载时,这些更改将丢失。保留数据以便保留这些数据修改的最佳方法是什么?除了简单的本地存储,还有其他方法吗?
考虑这个人为的代码片段。
const foo = () => {return 1;}
const bar = useMemo(() => {return foo();}, [foo])
Run Code Online (Sandbox Code Playgroud)
当我触发react-hooks/exhaustive-deps警告时,我会收到这样的消息。
The 'foo' function makes the dependencies of useMemo Hook (at line 2) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own useCallback() Hook.
该警告给了我 2 个建议:1)将 useMemo 回调引入foo
内部 bar
,或者 2)将函数包装在 useCallback 中。
我当然可以做任何一个。我只是想知道:这两种选择中的任何一种都比另一种更可取吗?如果是,那么为什么?如果你的答案是“这取决于”,那么它到底取决于什么?
有人可以解释“可选函数参数”和“可能类型”之间的区别吗,如 Flow 文档的这一页所述?
这些定义听起来非常相似:
也许类型: “也许类型用于值是可选的地方”
可选函数参数: “函数可以有可选参数,其中问号 ? 出现在参数名称之后。”
我从语法的角度理解这些差异。但是,听起来两者都可以用于您想要为函数定义可选参数的情况。你会在哪里使用一个?
我希望能够从Axios错误捕获中获取响应正文。
我正在使用axios v0.18.0。
我的axios代码如下所示:
let service = axios.create({
baseURL: "https://baseUrl.azurewebsites.net",
responseType: "json"
});
service.defaults.headers.common['authorization'] = `Bearer ${token}`;
service.post("/api/method", params).then(result => {
console.log('success',result);
}).catch(error=>{
console.log('error');
console.log(error);
});
Run Code Online (Sandbox Code Playgroud)
给定输入,我的API调用返回了我期望的400错误。因此,我遇到了麻烦。但是,我无法检索API调用返回的错误消息。
我尝试做一个console.out(error.response.data),但这返回null。
我已经使用Postman进行了验证,该API调用的确会在响应正文中返回错误消息,因此API并不是问题。
我想念什么?
reactjs ×3
javascript ×2
axios ×1
eslint ×1
flow-typed ×1
flowtype ×1
jestjs ×1
persistence ×1
react-hooks ×1
types ×1