该文件没有解释sequelize.define和Model.init之间的差异。它所说的只是Internally, sequelize.define calls Model.init
在选择使用哪一种时,我需要考虑哪些事项?两者之间的主要区别是什么,选择一个而不是另一个的后果是什么?似乎 sequelize.init 是文档中的首选方法 - 为什么会这样?
我正在尝试设置默认主题排版字体大小以根据断点进行更改。例如,当断点位于 {xs} 值时,将 theme.typography.h4.fontSize 更改为 '1.5rem'。在所有其他断点处,将其保留为默认值 ('2.125rem')。
我可以使用以下代码示例在组件中轻松完成此操作:
const useStyles = makeStyles(theme => ({
title: {
[theme.breakpoints.down('xs')]: {
fontSize: '1.5rem',
}
},
}))
Run Code Online (Sandbox Code Playgroud)
但是,这意味着必须向其中包含的每个组件添加相同的代码<Typography variant='h4'>。如果我决定将值从 '1.5rem' 更改为 '1.25rem',我将需要找到每个实例<Typography variant='h4'>并手动更改它。
有没有办法给 createMuiTheme 添加断点,使其适用于所有实例?
我尝试了以下方法,但不起作用:
const defaultTheme = createMuiTheme()
const theme = createMuiTheme({
typography: {
h4: {
[defaultTheme.breakpoints.down('xs')]: {
fontSize: '1.5rem'
}
}
}
})
Run Code Online (Sandbox Code Playgroud) 我正在尝试按照Reat-Testing-Library 文档中的本指南来包装我想要测试的所有组件。我这样做是因为我需要访问在我正在测试的组件中的 _app.js 中定义的各种上下文提供程序。
这是我的 /pages/_app.js 文件:
export class MyApp extends App {
public componentDidMount() {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
public render() {
const { Component, pageProps, apolloClient } = this.props;
return (
<Container>
<StateProvider>
<ThemeProvider theme={theme}>
<ApolloProvider client={apolloClient}>
<CssBaseline />
<Component {...pageProps} />
<SignUp />
<Snackbar />
</ApolloProvider>
</ThemeProvider>
</StateProvider>
</Container>
);
}
}
export default withApollo(MyApp);
Run Code Online (Sandbox Code Playgroud)
这是我的 /utils/testProviders.js 文件:
class AllTheProvidersWrapped extends App {
public componentDidMount() {
const …Run Code Online (Sandbox Code Playgroud) 类似的问题在这里 -无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件- 但是答案表明这应该适用于 CSS-in-JS,这就是我正在使用的。
我正在使用 Material-UI 的<Hidden>组件仅在sm屏幕尺寸及更大尺寸上显示一些文本。这是代码(在生产中完美运行):
<Hidden implementation="css" xsDown>
<LogoText variant="h5" component="p" />
</Hidden>
Run Code Online (Sandbox Code Playgroud)
我使用的是jest-dom与react-testing-library和我想测试我的导航栏,其中包含这个隐藏文本的响应。
我有以下测试:
const initTest = width => {
Object.defineProperty(window, "innerWidth", {
writable: true,
configurable: true,
value: width
});
window.matchMedia = jest.fn().mockImplementation(
query => {
return {
matches: width >= theme.breakpoints.values.sm ? true : false,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn()
};
}
);
const height = Math.round((width * 9) …Run Code Online (Sandbox Code Playgroud) 在我的node.js服务器中,我将CORS作为中间件包含在内,如下所示:
app.use(cors({ origin: 'http://<CORRECT_ORIGIN_URL>:3030', credentials: true }))
Run Code Online (Sandbox Code Playgroud)
我在发送请求的应用中使用Apollo Client,并在初始化ApolloClient时将凭据设置为“ include”,如下所示:
// Create a WebSocket link
const wsLink = process.browser ? new WebSocketLink({
uri: `ws://<CORRECT_REQUEST_URL>:8000/graphql`,
options: {
reconnect: true,
},
}) : null
// Create an http link (use batch, allow cookies response from server)
const httpLink = new BatchHttpLink({
uri: 'http://<CORRECT_REQUEST_URL>/api/',
credentials: 'include'
})
// Split terminating link for websocket and http requests
const terminatingLink = process.browser ? split(
({ query }) => {
const { kind, operation } = …Run Code Online (Sandbox Code Playgroud) 我已经以数据库所有者(也是超级用户)的身份登录到我的数据库,并创建了一个role_write带有 nologin 和 noinherit 标志的角色。
我已通过以下方式撤销了公共架构的默认创建权限:
REVOKE CREATE ON SCHEMA public FROM PUBLIC;
Run Code Online (Sandbox Code Playgroud)
并通过以下方式撤销对数据库的公共访问:
REVOKE ALL ON DATABASE mydb FROM PUBLIC;
Run Code Online (Sandbox Code Playgroud)
我已在每个表上授予角色,我希望该角色能够具有读/写访问权限。使用user本示例的表格,我添加了:
grant insert, select, update, delete on users to role_write;
Run Code Online (Sandbox Code Playgroud)
然后,我还为用户授予了对表、模式、序列和数据库连接的适当权限,并通过以下方式更改了默认权限:
GRANT CONNECT ON DATABASE my to role_write;
grant usage on schema public to role_write;
grant select, insert, update, delete on all tables in schema public to role_write;
grant usage, select on all sequences in schema public to role_write;
alter default privileges in schema public …Run Code Online (Sandbox Code Playgroud) 我正在使用useSelector(state => state.SLICE_NAME)React-Redux 的钩子,但是在定义state参数时遇到了困难。默认设置为,unknown因此尝试返回state.SLICE_NAME(Error: Object is of type 'unknown')时出现错误。
如何定义state类型,而不必手动创建单独的状态类型并在创建每个新状态定义时添加它们?
我试过定义状态,typeof store但是那行不通。
一些代码可以帮助解释:
// navDrawer.ts
import { createSlice } from "redux-starter-kit";
// navDrawer initial state
export interface NavDrawerInitialState {
open: boolean;
}
const navDrawerInitialState: NavDrawerInitialState = {
open: false
};
// Create state slice
const { actions, reducer } = createSlice({
slice: "navDrawer",
initialState: navDrawerInitialState,
reducers: {
open: (state: NavDrawerInitialState) => {
state.open = true;
}, …Run Code Online (Sandbox Code Playgroud) 似乎如果您不将 Material-UI 样式表注入 jest/react-testing-library 测试,那么 jsdom 将无法从您的组件中获取正确的样式(例如,运行getComputedStyle(component)将返回不正确的组件样式)。
您如何正确设置 jest/react-testing-library 测试,以便将样式正确地注入到测试中?我已经将组件包装在主题提供程序中,效果很好。
我正在创建一个需要能够从项目根目录读取配置文件的 npm 包。我不知道该怎么做。
例如,
./pages/和读取./next.config.js./jest.config.js从项目根目录读取./.eslintrc.json从项目根目录读取./.prettierrc.js从项目根目录读取./tsconfig.json从项目根目录读取./.babelrc从项目根目录读取我试过查看他们的源代码以了解他们是如何做到的,但项目太大了,我找不到相关部分。
他们是如何做到这一点的?
看起来它们应该是这样,因为组件内的 props 永远不应该改变。我在 Google 或 Stack Overflow 上找不到任何答案,所以在这里提问只是为了确定一下。
jestjs ×3
material-ui ×3
node.js ×2
typescript ×2
apollo ×1
cors ×1
express ×1
javascript ×1
jsdom ×1
next.js ×1
node-modules ×1
npm ×1
postgresql ×1
react-redux ×1
reactjs ×1
redux ×1
sequelize.js ×1