小编J. *_*ers的帖子

我想编写一个抽象模型mixin,我可以使用它来创建OneToOne - 与用户模型的关系.这是我的代码:

from django.conf import settings
from django.db import models


class Userable(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL,
        on_delete=models.CASCADE
    )

    class Meta:
        abstract = True

我为这个模型编写了以下测试:

class TestUserable(TestCase):

    mixin = Userable

    def setUp(self):
        user = User.objects.create_user(
            email="testuser@test.com",
            name="Test User",
            password="test1234test"
        )
        self.user = user
        self.model = ModelBase(
            '__TestModel__' + self.mixin.__name__, (self.mixin,),
            {'__module__': self.mixin.__module__}
        )

        with connection.schema_editor() as schema_editor:
            schema_editor.create_model(self.model)

    def test_user(self):
        self.model.objects.create(user=self.user)
        self.assertEqual(self.model.objects.count(), 1)

    def tearDown(self):
        with connection.schema_editor() as schema_editor:
            schema_editor.delete_model(self.model)

我的问题是,在它的tearDown()方法中的这个测试抛出了以下错误:

django.db.utils.OperationalError: cannot DROP TABLE "core___testmodel__userable" because it …

我正在尝试为React-Native-Keychain的辅助函数编写单元测试.

以下是这些辅助函数:

import {
  setGenericPassword,
  getGenericPassword,
  resetGenericPassword
} from "react-native-keychain";

export const setToken = token => setGenericPassword("session", token);
export const getToken = () => getGenericPassword().then(creds => creds.password);
export const clearToken = () => resetGenericPassword();

这是我的测试:

import * as keyChainFunctions from "react-native-keychain";
import { setToken, getToken, clearToken } from "./secureStorage";

const token = "abcdefghijklmnopqrstuvwxyz0123456789";

jest.mock("react-native-keychain", () => {
  const token = "abcdefghijklmnopqrstuvwxyz0123456789";
  const credentials = {
    username: "session",
    token: token
  };
  return {
    setGenericPassword: jest.fn(
      (username, password) => new Promise((resolve, reject) …

在文档中找不到它：将React Navigation与Redux一起使用时的最佳实践是什么？

你应该做1 .:

export default withNavigation(connect(
  mapStateToProps, 
  { someFunction }
)(SomeComponent))

或2 .：

export default connect(
  mapStateToProps, 
  { someFunction }
)(withNavigation(SomeComponent))

？

我正在用TypeScript构建一个React应用程序。我使用react-testing-library进行组件测试。

我正在为目标网页构建视差组件。

该组件通过props传递图像，并通过JSS将其设置为背景图像：

<div
  className={parallaxClasses}
  style={{
    backgroundImage: "url(" + image + ")",
    ...this.state
  }}
>
  {children}
</div>

这是我编写的单元测试：

import React from "react";
import { cleanup, render } from "react-testing-library";
import Parallax, { OwnProps } from "./Parallax";
afterEach(cleanup);

const createTestProps = (props?: object): OwnProps => ({
  children: null,
  filter: "primary",
  image: require("../../assets/images/bridge.jpg"),
  ...props
});

describe("Parallax", () => {
  const props = createTestProps();
  const { getByText } = render(<Parallax {...props} />);
  describe("rendering", () => {
    test("it renders the image", () …

我正在使用 TypeScript 构建一个 React Native 应用程序。我正在尝试使用SectionList. 我遵循了文档，这是我的代码：

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
    <ListItem title={title} />
  );

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
        />
      </SafeAreaView>
    );
  }

但该行renderSectionHeader={this.renderSectionHeader}引发以下 TSLint 错误：

[ts]
Type '({ section: { title } }: …

如果我设置headerTransparent: true通常在其下方呈现的其他内容，则会在其下方移动。我该如何避免呢？

我的代码：

export class RegisterScreen extends Component {
  static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
  };
  render() {
    return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
  }
}

具有透明标题（与:(重叠）：

没有透明标题：

我想使内容对齐，就好像标题具有高度一样。所以我希望内容像第二张图片一样，但要像第一张图片一样具有透明的标题。

我想用 Jest 和 测试我的 Expo React Native 应用程序@testing-lib/react-native。

我在我的package.json.

"jest": {\n    "preset": "jest-expo",\n    "moduleDirectories": [\n      "node_modules",\n      "test-utils"\n    ]\n  },\n

我的文件夹结构如下所示：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80node_modules/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80test-utils/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80package.json\n

src/包含测试文件。我正在通过以下简单测试来测试我的配置src/index.test.js：

"jest": {\n    "preset": "jest-expo",\n    "moduleDirectories": [\n      "node_modules",\n      "test-utils"\n    ]\n  },\n

assert位于何处test-utils/index.js：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80node_modules/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80test-utils/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80package.json\n

如果我运行测试，我会收到错误：

Cannot find module \'test-utils\' from \'index.test.js\'\n

这是为什么？我的意思是我已经配置了moduleDirectories密钥？你该如何解决这个问题？我真的很希望能够assert作为绝对路径而不是相对路径导入。

我正在使用 React 构建一个视频聊天应用程序。

当我使用该<video />元素时，用于编写可访问 UI 的 ESLint 插件会向我大喊<track />缺少一个元素。

代码：

function Video({ autoPlay, playsInline, videoEl }) {
  return <video autoPlay={autoPlay} playsInline={playsInline} ref={videoEl} />;
}

警告：

error  Media elements such as <audio> and <video> must have a <track> for captions  jsx-a11y/media-has-caption 

我查了一下，<track />似乎需要一个src带有文件的属性.vtt。但在视频聊天中，没有字幕。使视频聊天的 HTML 易于访问的最简单方法是什么？

我正在尝试为 Next.js 项目设置 Storybook。我有一个Link从 Next.js呈现标签的组件。我的问题是，当我加载这个组件时，Storybook 会抛出以下错误：

Cannot read property 'pageLoader' of null
   at Link.handleRef

要让 Storybook 与 Next.js Routing 一起工作，特别是渲染Link标签，需要做什么？

更新：导致错误的代码：

Cannot read property 'pageLoader' of null
   at Link.handleRef

// button-component.js
import Link from 'next/link.js';
import t from 'prop-types';
import React from 'react';

function Button({ as, children, href, ...props }) {
  const isExternal = href && href.startsWith('http');
  const a = (
    <a href={href} {...props}>
      {children}
    </a>
  );

  if (href) {
    return isExternal ? (
      a …

我正在使用TypeScript编写React应用程序。我将material-ui用于组件，将react-testing-library用于单元测试。

我正在为material-ui的Grid组件编写包装器，以便始终有一个项目。

import Grid from "@material-ui/core/Grid";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import React, { PureComponent } from "react";
import styles from "./styles";

export interface OwnProps {
  className?: string;
}

export interface Props extends WithStyles<typeof styles>, OwnProps {}

export interface DefaultProps {
  className: string;
}

export class GridItem extends PureComponent<Props & DefaultProps> {
  static defaultProps: DefaultProps = {
    className: ""
  };

  render() {
    const { classes, children, className, ...rest } = this.props;
    return (
      <Grid
        data-testid="grid-item"
        item={true}
        {...rest}
        className={classes.grid …