如何解决如何测试“ react-sweet-state”操作调用以查看是否强制重新渲染组件
react-sweet-state
(https://atlassian.github.io/react-sweet-state/#/testing/actions)并没有提供太多文档来说明如何测试特定的动作调用以及查看其如何影响组件的呈现方式。
示例:
这是我的商店:
import { createStore,createHook,StoreActionApi } from "react-sweet-state";
interface State {
foo: number;
}
type StoreApi = StoreActionApi<State>;
export const initialState: State = {
foo: 0
};
export const actions = {
changeFoo: (num: number) => ({ getState,setState }: StoreApi) => {
setState({
foo: isNaN(+num) ? 0 : num
});
}
};
type Actions = typeof actions;
const Store = createStore<State,Actions>({
initialState,actions,name: "buzzStore"
});
export const useBuzzStore = createHook(Store);
下面有一个Fizz.tsx
组件,它在useEffect
内调用一个动作:
export const Fizz = () => {
const [state,actions] = useBuzzStore();
useEffect(() => {
actions.changeFoo(100);
},[actions]);
return (
<div>
{state.foo > 0 ? <h2>Foo is {state.foo}</h2> : null}
</div>
);
};
如果state.foo
大于零,则组件使用<h2>
的值呈现state.foo
。如果为零,则不呈现任何内容。
如何在笑话和酵素中对此进行测试,使我可以从测试中调用动作,然后编写如下断言:
describe("the fizz component",() => {
let wrapper: ShallowWrapper;
beforeEach(() => {
wrapper = shallow(<Fizz />);
});
afterEach(() => {
wrapper.unmount();
});
it("should not render an h2",() => {
// NO CALL to action.changeFoo();
expect(wrapper.find("h2").exists()).toBeFalsy();
});
it("should render an h2",() => {
const numberForFoo = 100;
// CALL action.changeFoo(numberForFoo)
expect(wrapper.find("h2").text()).toContain("Foo is " + numberForFoo);
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。