小编And*_*rle的帖子

我有一个带有按钮的Backbone视图,可以使视图在点击时全屏显示.我正在使用screenfull.js,我看不出与示例和代码有什么不同.但console.log(screenfull.enabled);总是false在clickHandler中返回.

var FullScreenButton = Backbone.Marionette.ItemView.extend({

  tagName: 'button',

  initialize: function () {
    this.$el.click(_.bind(this.goFullScreen, this));
  },

  goFullScreen: function () {
    console.log(screenfull.enabled);
    screenfull.request(this.options.container);
  }
});

也没有screenfull.js它没有全屏:

goFullScreen: function() {

  var element = document.documentElement;

  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }

}

有没有办法将以下内容写成JSX？

var settings = {setting1: 1, setting: 2};
MyComponent(setting)

我试过<MyComponent {settings} />但这不能编译.所以唯一的方法似乎如下:

<MyComponent setting1={settings.setting1} setting2={settings.setting2} />

如果有很多道具,这将是非常嘈杂的.

我在使用ES6编写的Jest(v16.0.1)测试测试使用Typescript(v2.0.3)编写的React组件时遇到了一些问题.

我正在使用ts-jest(v0.1.8)预处理器和package.json的相关部分看起来像

  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/ts-jest/preprocessor.js",
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  } 

但是当我运行测试时,我得到:

 FAIL  app/components/__tests__/TestTotalNumberOfTeapots.js
  ? Test suite failed to run

    /Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.673s
Ran all test suites.

我的测试看起来像

import React from 'react';
import TotalNumberOfTeapots from '../TotalNumberOfTeapots.tsx';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <TotalNumberOfTeapots numberOfTeapots='1' /> …

假设我有一个与 firebase 身份验证系统配合使用的登录和注销功能。

一个单元将如何测试这种方法？firebase 应用程序实例被导入并用于登录功能。

如果需要，代码片段：

export function login(data) {
  return dispatch => {
    return firebaseAuth.signInWithEmailAndPassword(data.emailField, data.passField)
      .then(user => {
        dispatch({type: "SET_CURRENT_USER", payload: user})
        user.getToken().then(token => setAuthToken(token))
        localStorage.setItem("currentUser", JSON.stringify(user))
      })
  }
}

我怎么能嘲笑这样的事情？我是否应该仅仅为了测试方法而设置测试电子邮件和密码？什么是推荐的方式？

谢谢！

我是jest/enzyme的新手,我试图模拟对返回Promise的异步函数的调用,调用是在componentDidMount方法的react组件内部进行的.

测试试图测试componentDidMount设置状态中Promise返回的数组.

我遇到的问题是测试在数组添加到状态之前完成并传递.我正在尝试使用'done'回调让测试等待,直到promise解决但这似乎不起作用.

我试图在done()调用之前将expect调用移到该行,但这似乎也不起作用.

谁能告诉我这里做错了什么？

正在测试的组件:

componentDidMount() {
  this.props.adminApi.getItems().then((items) => {
    this.setState({ items});
  }).catch((error) => {
    this.handleError(error);
  });
}

我的测试:

    import React from 'react';
    import { mount } from 'enzyme';
    import Create from '../../../src/views/Promotion/Create';

    import AdminApiClient from '../../../src/api/';
    jest.mock('../../../src/api/AdminApiClient');

    describe('view', () => {

      describe('componentDidMount', () => {

        test('should load items into state', (done) => {
          const expectedItems = [{ id: 1 }, { id: 2 }];

          AdminApiClient.getItems.mockImplementation(() => {
            return new Promise((resolve) => {
              resolve(expectedItems);
              done();
            });
          });

          const wrapper …

我正在测试一个React组件,里面有几个嵌套组件.我的测试旨在确保每个组件都有合适的道具.其中一个组件应该传递onChange 函数,所以我尝试执行以下操作(内部test()):

Jest +酶测试:

const props = {
  onSomethingChange: jest.fn()
};

const component = shallow(<MyComponent {...props} />);

expect(component.find('SomeNestedComponent')
  .prop('onSomethingChange')).toBe(props.onSomethingChange);

测试失败以下(注意:我也尝试过.toEqual):

Expected value to equal:
  [Function mockConstructor]
Received:
  [Function anonymous]

我的组件的定义如下:

为MyComponent

class MyComponent extends Component {
  onSomethingChange = (event) => {
    // do something
  }

  render() {
    return (
      <div>
        <Header />
        <SomeNestedComponent onSomethingChange={this.onSomethingChange} />
        <Footer />
      </div>
    );
  }
}

如何确保正确的函数作为prop(而不仅仅是任何其他函数)传递？请注意,我不会随时调用该函数; 我只是定义它.

我试图在反应组件中测试一个方法.该组件是一个表单,应该测试handleSubmit()方法在单击提交按钮时被调用.我试过以下.

  it('handlesSubmit when submit button is clicked', () => {
    wrapper.find(Button).simulate('click');
    expect(wrapper.instance().handleSubmit).toHaveBeenCalled();
  })

这给了一个错误jest.fn() value must be a mock function or spy.所以我尝试了这个:

it('handlesSubmit when submit button is clicked', () => {
    const handleSubmit = jest.fn();
    wrapper.find(Button).simulate('click');
    expect(handleSubmit).toHaveBeenCalled();
  })

这个错误说 Expected mock function to have been called

我的组件有一个方法..

onUpdateProperty = (key, value) => {
  this.state.formData[key] = value;
}

我想测试是否在更改输入后调用此方法...

it('on update input should update formData', function () {
  const wrapper = mount(<MyComp.wrappedComponent {...this.minProps} />);
  const spy = spyOn(wrapper.instance(), 'onUpdateProperty');

  expect(spy).not.toHaveBeenCalled();

  const nameInput = wrapper.find('[name="name"]');
  nameInput.simulate('change', {
    target: { name: 'name', value: 'v1' },
  });

  wrapper.update();

  // expect(spy).toHaveBeenCalledWith('name', 'v1');
  expect(spy).toHaveBeenCalled();
});  

wrappedComponent是因为我使用Mobx-react

我有一个redux像这样的小中间件

import { hashHistory } from 'react-router'
import { REDIRECT_TO_LOGIN_REDIRECT_URL } from '../actions/login-redirect';

export default store => next => action => {

    if (action.type === REDIRECT_TO_LOGIN_REDIRECT_URL) {
        hashHistory.push(store.getState().loginRedirectUrl);
    }

    return next(action)
}

我现在想测试。正如您在第 1 行中看到的，我正在导入hashHistory并稍后使用它。这是我想测试的（对 的调用hashHistory）。要做到这一点，我将不得不 mock hashHistory，但我不知道如何。我正在使用jest：

import { REDIRECT_TO_LOGIN_REDIRECT_URL } from '../actions/login-redirect';
import redirectMiddleware from './redirect-after-login';

describe('redirect after login middleware', () => {

    function setup() {
        const store = {
            subscribe: () => {},
            dispatch: () => {},
            getState: …

我正在使用以下代码在特定文件上运行Jest测试。

   jest utils.spec.js --collectCoverageFrom=**/utils.js

如果我想测试整个目录，我会使用

jest someDirectory --collectCoverageFrom=**/someDirectory

但是这里的代码覆盖范围不起作用，为什么呢？

谢谢。