在使用 jest 和 @testing-library/svelte 测试 svelte 组件时,状态在测试之间共享,每次测试后是否可以拆除,所以我有更多独立的单元测试。
store/theme
import { writable } from "svelte/store";
export const LOCAL_STORAGE_KEY = "current:theme";
export const THEMES = {
DARK: "dark",
LIGHT: "light"
};
export const MATCH_DARK_THEME = "(prefers-color-scheme: dark)";
export const IS_USER_PREFERNCE_DARK =
window.matchMedia && window.matchMedia(MATCH_DARK_THEME).matches;
export const DEFAULT_THEME =
localStorage.getItem(LOCAL_STORAGE_KEY) || IS_USER_PREFERNCE_DARK
? THEMES.DARK
: THEMES.LIGHT;
export const theme = writable(DEFAULT_THEME);
因为没有 DI 存储在测试之间共享,所以我可以在 beforeEach 中将值重置为默认值,但尝试查看是否有更好的解决方案。
ThemeSwitcher.spec.js
it("should be change body class on click", async () => {
const { container } = render(ThemeSwitcher);
expect(container.className).toEqual("theme-light");
await fireEvent.click(getButton(container));
expect(container.className).toEqual("theme-dark");
});
it("should render the sun if in light mode", async () => {
const { getByText } = render(ThemeSwitcher);
//default should be light mode but returns dark.
const sun = getByText("Light theme on: Sun");
expect(sun).toBeTruthy();
});
最佳答案
我更喜欢将 svelte store 包装在泛型类中以便于使用。
这是我的Store.ts
import { writable, get, Writable } from "svelte/store"
/** Callback to inform of a value updates. */
export declare type Subscriber<T> = (value: T) => void
/** Unsubscribes from value updates. */
export declare type Unsubscriber = () => void
/** Callback to update a value. */
export declare type Updater<T> = (value: T) => T
/** Cleanup logic callback. */
export declare type Invalidator<T> = (value?: T) => void
class Store<T> implements Writable<T> {
private intialValue: T
private wrappee: Writable<T>
// implements Writable
subscribe: (run: Subscriber<T>, invalidate?: Invalidator<T>) => Unsubscriber
set: (value: T) => void
update: (updater: Updater<T>) => void
constructor(value: T) {
this.intialValue = value
const _store = writable(value)
const { subscribe, set, update } = _store
this.subscribe = subscribe
this.set = set
this.update = update
this.wrappee = _store
}
get() {
return get(this.wrappee)
}
reset() {
this.set(this.intialValue)
}
refresh() {
this.set(this.get())
}
}
您可以扩展通用 Store 类来创建这样的新商店。arrayStringStore.ts
export default class ArrayStringStore extends Store<string[]> {
constructor(arr: string[] = []) {
super(arr)
}
// easy to add more convenience method
add(item: string) {
this.update(arr => [...arr, item])
}
}
例如:我有一个 ArrayStringStore 的实例,它是 exampleStore
。const exampleStore = new ArrayStringStore()
您可以在每个测试用例之前轻松重置该商店的值在您的测试文件中。
beforeEach(() => {
exampleStore.reset()
})
Note: you can get value of store with
exampleStore.get()
, do not need toimport { get } from svelte/store
in every file.
关于javascript - 使用 svelte/store 测试 svelte 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60971089/