小编The*_*oul的帖子

我正在react-native-testing-library我的 react native expo 应用程序中使用（我使用该库的第一步）编写一个简单的测试。但是我从react-native代码库本身内部的某个地方收到了一个令人困惑的错误。要么我的代码有问题，要么react-native-testing-librarynpm 库有错误。

这是一个简单的笑话测试：

describe("AppTitle", () => {
  it("should display applicaton title", () => {
    const { getByText } = render(<AppTitle />);
    expect(getByText('App Name')).toBeTruthy();
  });
});

这是简单的<AppTitle />组件（只是一个视图和一个文本）

export const AppTitle = () => {
  return (
    <View>
      <Text>App Name</Text>
    </View>
  );
};

但是当我运行测试时出现此错误：

...../Utilities/warnOnce.js:15

const warnedKeys: {[string]: boolean} = {};
      ^^^^^^^^^^

SyntaxError: Missing initializer in const declaration

at ScriptTransformer.transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)
...

这是一个简单直接的模板。来自 …

我正在设置配置以在create-react-app + typescript应用程序（我从中弹出）中运行测试。我正在使用笑话+酶。我在tsconfig.json中进行了设置，baseUrl='./src'以便在导入模块时可以使用绝对路径。例如，这是我的一个文件中的典型import语句：

import LayoutFlexBoxItem from 'framework/components/ui/LayoutFlexBoxItem';

您可以看到该路径是绝对路径（来自/ src文件夹），而不是相对路径。当我在调试模式（yarn start）中运行时，效果很好

但是当我运行测试（yarn test）时，出现以下错误：

 Cannot find module 'framework/components/Navigation' from 'index.tsx'

因此，尽管我在tsconfig.json中进行了设置，但看起来jest无法解析此绝对路径。这是我的tsconfig.json：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "baseUrl": "./src"    
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "config",    
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

现在，我可以看到 …

我正在使用该@graphql-codegen/cli工具从我的 graphql 服务器中生成打字稿类型。这是我的codegen.yml内容：

overwrite: true
schema: "http://localhost:3001/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

这是package.json我用来生成类型 ( yarn schema)的脚本：

"schema": "graphql-codegen --config codegen.yml"

所有这些都是通过执行 cli 向导自动生成的yarn codegen init。

但是当我运行时yarn schema，这些是我得到的错误：

（服务器正在运行http://localhost:3001/graphql并公开图形模式。

感谢您的帮助和建议

这是托管在我的服务器中的 .graphql 文件（http://localhost:3001/graphql

# -----------------------------------------------
# !!! THIS FILE WAS GENERATED BY TYPE-GRAPHQL !!!
# !!!   DO NOT MODIFY THIS FILE BY YOURSELF   !!!
# -----------------------------------------------

"""Date …

是否可以在vs代码中的typescript项目中使用.js文件？我从github存储库克隆了一个react-native项目,并在visual studio代码中打开它.当我添加tsconfig.json以开始使用typescript时,我得到一长串错误.例如,这是一个drawer.js文件(带有es6功能):

这是我的tsconfig.json文件(如果我删除此文件,那么每件事都运行正常,没有报告错误):

在我的react-native应用程序中,我添加了这个库react-native-vector-icons来使用图标.在github页面中,FontAwesome列在捆绑的图标集中.但我不知道如何在我的元素中引用一个fontawesome项目.似乎我只能使用"ios-xxx","md-xxx"或"log-xxx".

当我尝试这样的事情:

<Icon name='fa-rss' style={{marginRight:10}} /> 

我收到这个警告:

我正在react-native-testing-library用来测试我的 react-native 组件。我有一个组件（为了这篇文章，它已经被过度简化了）：

export const ComponentUnderTest = () => {

 useEffect(() => {
   __make_api_call_here_then_update_state__
 }, [])

 return (
   <View>
     __content__goes__here
   </View>
 )
} 

这是我的（简化版）component.spec.tsx：

import { render, act } from 'react-native-testing-library';
import { ComponentUnderTest } from './componentundertest.tsx';

test('it updates content on successful call', () => {
   let root;
   act(() => {
      root = render(<ComponentUnderTest />); // this fails with below error message
   });    
   expect(...);
})

现在，当我运行此代码时，出现此错误： Can't access .root on unmounted test renderer

我什至不知道这个错误消息是什么意思。我遵循了react-native-testing-library有关如何使用 …

我Formik在我的应用程序中使用，我想取消对表单所做的更改并将其恢复为初始值（这不是提交后清除表单，这是大多数教程和问题的内容）。

这是一个简单的用例：

1. 用户加载一个表单（例如2个字段“电子邮件”和“地址”，初始值：电子邮件：“foo@gmail.com”，地址：“bar”

2. 用户开始编辑电子邮件字段。但随后他决定取消所做的更改并恢复为初始值（即“foo@gmail”、“bar”）。

const MyForm = () => (
 <Formik initialValues={{ email:"foo@gmail.com", address: "bar" })>
   ...
 </Formik>
)

我用resetForm。但它不会将我的形式恢复为其初始值

 const ResetButtom = () => {
  const { resetForm } = useFormikContext();
  return (
   <Button onClick={() => resetForm()} {...} />
     Reset
   </Button>
  )
 }

如何使用 Formik 实现此功能？

我刚刚发现了NativeBase for react-native,我真的很喜欢它.我正在关注他们网站上的教程.据我所知,NativeBase使用Easy-Grid进行布局.我想在我的页面上垂直居中一个按钮.这是我正在构建的测试应用程序的简单界面:

          <Container> 
                <Header>
                    <Button trnsparent>
                        <Icon name='ios-menu' />
                    </Button>

                    <Title>Poki</Title>

                </Header>

                <Content style={{padding: 10}}>  

                    <Grid>
                        <Col>
                            <Button block bordered info style={{flex: 1}}>                         
                                Login 
                            </Button>
                        </Col>
                    </Grid>


                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>  
                    </FooterTab>
                </Footer>
            </Container>

这是我的genymotion模拟器上的结果:

如何使用easy-grid将登录按钮垂直居中在我的页面上？我试图应用flexbox属性而没有结果.

谢谢您的帮助.

我正在努力尝试使用Visual Studio代码和react-native设置一个简单的应用程序。我遵循了入门教程https://github.com/Microsoft/vscode-react-native。我已经在Visual Studio代码中安装了所需的扩展（主要是对本机工具的反应）。我还设置了各种全局变量（ANDROID_HOME，JAVA_HOME）。我使用genymotion作为模拟器。

设置好环境后，我使用react-native-cli创建一个react-native项目：

react-native init my_project

首先，从Visual Studio代码的“调试”页面中，选择React-Native作为我的调试环境。生成launch.json文件。但我看到未生成文件launchReactNative.js。

第二，如果我执行该命令（内VS代码，Ctrl+ Shift+ p）：

React-native: run-android

我收到此消息“当前工作空间不是React Native项目”

我无法弄清楚我在做什么错。我已经通过谷歌和stackoverflow搜索，但是我找不到解决问题的方法。

为什么我的工作区未被识别为React-native项目？

这是我的package.json文件：

{
    "name": "poxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "15.4.1",
        "react-native": "0.39.2"
    },
    "devDependencies": {
        "babel-jest": "17.0.2",
        "babel-preset-react-native": "1.9.0",
        "jest": "17.0.3",
        "react-test-renderer": "15.4.1"
    },
    "jest": {
        "preset": "react-native"
    }
}{
    "name": "poxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": …

我真的很努力让故事书和 nextjs 路由器一起玩。我收到以下错误：

NextContext.Provider未定义，请将其添加到parameters.nextRouter.Provider中

我已经设置了一个 nextjs + 故事书项目。现在我有一个使用useRouter. 我遵循了官方指南。这是我的main.js文件：

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-essentials', 
    'storybook-addon-next-router'
  ]
};

这是我的preview.js文件：

import { RouterContext } from "next/dist/next-server/lib/router-context";

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
  },
}

当我预览故事书并导航到我的组件时，出现错误：

NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

我不知道我还应该做什么。感谢您的建议。