小编Can*_*nta的帖子

我试图用jest测试react-native-camera模块

所以我有以下内容package.json:

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "~15.4.0-rc.4",
    "react-native": "0.40.0",
    "react-native-camera": "^0.5.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.1.1",
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "~15.4.0-rc.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

并且Component在示例中给出以下内容:

import React from 'react';
import Camera from 'react-native-camera';

class CameraComponent extends React.Component {
  constructor(props: Props) {
    super(props);

    this.camera = …

针对基本软件包运行Jest时，在运行测试时出现Jest错误，仅在运行时不会出现ionic serve。笑话上出现错误

import { Platform } from '@ionic/angular';

这是：

export { IonicModule } from './ionic-module';
^^^^^^

SyntaxError: Unexpected token export

  3 | import { RouterTestingModule } from '@angular/router/testing';
  4 |
> 5 | import { Platform } from '@ionic/angular';
    | ^
  6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
  8 |

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/app/app.component.spec.ts:5:1)

我的Jest.config.json

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: [
        "src/**/*.ts"
    ],
    coverageDirectory: "<rootDir>/coverage/",
    moduleNameMapper: …

根据网络配置玩笑的角度对各种指南是那么容易，因为这个：

ng new jest-test
cd jest-test
npm i -D jest jest-preset-angular

修改package.json：

"test": "jest",
[...]
"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "./src/setup-jest.ts"
},

setup-jest.ts：

import 'jest-preset-angular';

但是，在运行时，npm test我会不断遇到此错误：

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you …

我正在编写一个 React 组件，它将在 iframe 中加载 URL，然后当 iframe 的 onLoad 事件触发时，它将调用 contentWindow.postMessage()。我想使用 Jest、Enzyme 和 JSDOM 来证明此功能。

我的组件包装了react-iframe，看起来非常简单：

export class FilteredIframe extends React.PureComponent<FilteredIframeProps> {
  onload = (e:Window) => {
    console.log("ONLOAD CALLED");
    if (this.props.filters) {
        e.postMessage(this.props.filters, this.props.url);
    }
  }
  render() {
    return (<Iframe url={this.props.url}
        display="initial"
        position="static"
        onLoad={this.onload}
    />);
  }
}

我试图找出如何让酶/jsdom 来测试这个，但我失败了：

test("Posts message once the frame has loaded", async () => {
  const payLoad = { data: "data" };
  const result = mount(<FilteredIframe url="https:///www.bing.com" filters={payLoad}/>);
})

当开玩笑地运行这个时，我从未在控制台中看到“ONLOAD CALLED”消息。我需要为 jsdom 或酶做一些特殊的事情才能使其真正调用 onLoad 吗？

如何测试jest函数是否在正确的this上下文中被调用？

我只能找到如何使用toHaveBeenCalledWith测试传入的参数。但它不测试this上下文，而且我找不到任何其他 API 或示例。

我想测试数组是否为空或包含特定结构的对象。在伪代码中，它可能是这样的：

expect([])
  .toHaveLength(0)
  .or
  .arrayContaining(
    expect.toMatchObject(
     { foo: expect.any(String) }
    )
  ) => true

expect([{foo: 'bar'}])
  .toHaveLength(0)
  .or
  .arrayContaining(
    expect.toMatchObject(
     { foo: expect.any(String) }
    )
  ) => true

expect([1])
  .toHaveLength(0)
  .or
  .arrayContaining(
    expect.toMatchObject(
      { foo: expect.any(String) }
    )
  ) => false

也许我对 Jest 中的工作方式的理解是错误的，但对我来说，我的问题看起来像是一个或问题。

我正在尝试使用门户来渲染模式，它在我的应用程序以及Storybook中都可以正常工作，但是一旦将其添加到Storyshots中，我就会遇到问题。

第一个问题是模拟ReactDOM的createPortal API。我这样做：

ReactDOM.createPortal = element => element;

如果未添加，则会出现以下错误：

错误：未被捕获[TypeError：parentInstance.children.indexOf不是一个函数]

我发现此解决方案React Portal Error。

这解决了此问题，但是当组件使用门户网站时，尝试附加子项时失败。它找不到'modal-root'组件，因此无法附加该元素。我不确定该如何解决。

我的门户网站与React网站上的示例几乎相同：

import React from 'react';
import { createPortal } from 'react-dom';
import { node } from 'prop-types';

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // !!!!!!!fails here !!!!!!!!!
    document.getElementById('modal-root').appendChild(this.el);
  }

  componentWillUnmount() {
    document.getElementById('modal-root').removeChild(this.el);
  }

  render() {
    return createPortal(this.props.children, this.el);
  }
}

现在它因以下错误而失败：

错误：未被捕获[TypeError：无法读取null的属性'appendChild'

上面的代码段中指示的位置。

*********************更新**************************** ******************

我有一个正在尝试测试的对话框组件。我试图在对话框内设置子组件（TextInput）的“value”属性。我几乎尝试了一切，但似乎没有任何效果。有人能帮我吗？

test('input type returns a text', () => {
const okPressFunction = jest.fn()
const obj = (
  shallow(
    <DialogBox
      title='random title'
      message={lorem}
      type='input'
      isVisible
      onOkPress={okPressFunction}
      onRequestClose={noop}
    />
  )
)
// obj.dive().find('TextInput').setProps({ value: 'hi' })
// obj.update()
// console.log(obj.dive().find('TextInput').prop('value'))
obj.find('TextInput').simulate('change', {
  target: { value: 'hello' },
})
obj.update()
console.log(obj.dive().find('TextInput').prop('value'))
  })
})

console.log(obj.html()) 转储是：

  <Component
  transparent={true}
  animationType="fade"
  visible={true}
  onRequestClose={[(Function: noop)]}
  hardwareAccelerated={false}
>
  <View
    style={{
      backgroundColor: "#33333340",
      width: "100%",
      height: "100%",
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <View
      style={{
        backgroundColor: "white", …

我创建了一个空的应用程序create-react-app。它在 pckage.json 和示例 App.test.js 中提供了一个测试脚本。第一步，我想根据create-react-app的文档设置测试环境。在我的应用程序中，我将使用 localStorage。让我们说一个像下面这样的动作要测试

export const cancel = () => {
  localStorage.removeItem("MyAppData");
  return { type: types.USER_CANCEL};
};

除了酶部分，它显示了如何初始化localStorage. 所以我最终得到了一个setupTests.js文件

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import "react-testing-library/cleanup-after-each";
// this adds jest-dom's custom assertions
import "jest-dom/extend-expect";

configure({ adapter: new Adapter() });

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn() …

I have a monorepo setup where the project running tests is trying to load a file from outside the current working directory.

Directory structure

root
 mainApp
   src...
 library
   greetings.js

Within greetings.js

export  const greetings = "hello World!"

Every time I try to import from greetings.js in my mainApp test files

//mainApp.test.js
import {greetings} from "../../greetings.js";

I get error from Jest in console

Jest encountered an unexpected token
SyntaxError: Unexpected token export

One solution in the following url is to add …