小编Laz*_*ass的帖子

必须有一个简单的方法来做到这一点,但我无法在任何地方找到记录的语法.我有一个带有支柱的React组件,我想在Jest中嘲笑这样:

jest.mock('./common/MultiSelect', 'MultiSelect');

这是有效的,除了我最终得到一个反应警告混乱我的测试结果:

警告:options标记上的未知道具.从元素中删除此prop.

我正在嘲笑的组件确实有一个选项道具,我真的不关心它是如何渲染的,所以我怎么能以这样的方式嘲笑它不会抛出警告？我尝试在模拟中使用React.createElement,并返回一个带有元素名称和props参数的数组.

我想要模拟的组件使用如下:

<MultiSelect
options={['option 1', 'option 2']}
/>

我有一个使用Create-React-App创建的项目.我希望添加一个precommit钩子来运行我们的linter并测试pre-commit包.

"pre-commit": [
  "precommit-msg",
  "lint",
  "test"
],

但是,由于测试脚本默认在监视模式下运行,因此可以防止提交实际发生.如何在预提交中添加不在监视中移动的测试？

所以我将类组件中使用的导入转换为React.lazy import api并将其包装在Suspense标记中.当我测试该类组件时,酶会引发错误"Enzyme Internal Error: unknown node with tag 13".有没有办法渲染和测试延迟加载的组件的安装而不是使用浅渲染？

我已经尝试过异步等待,直到延迟加载的承诺得到解决,但这两者都不起作用,如下所示:

it('async await mount', () async () => {
  const wrapper = await mount(<Component />)
}

这是示例代码:

Component.js

import React, { PureComponent, Suspense } from 'react'

const ChildComponent = React.lazy(() => import('../ChildComponent'))

export default class Component extends PureComponent {
  constructor() {
      super()
      this.state = {
          example: null
      }
  }

  doSomething = () => this.setState({
      example: 'example'
  })

  render() {
    return (
      <div>
        <p>Example</p>
        <Suspense fallback={<div>...loading</div>}>
            <ChildComponent 
               example={this.state.example}
               doSomething={this.doSomething} …

我正在使用jest进行测试.我正在使用react和redux,我有这个动作:

function getData(id, notify) {
 return (dispatch, ...) => {
   dispatch(anotherFunction());
   Promise.all(['resource1', 'resource2', 'resource3'])
   .then(([response1,response2,response3]) => {
        ... handle responses
    })
   .catch(error => { dispatch(handleError(error)); }
 };
}

我一直在寻找如何为此操作设置测试的jest文档,但我无法找到方法.我尝试过这样的事情:

it('test description', (done) => {
  const expectedActions = [{type: {...}, payload: {...}},{type: {...}, payload: {...}},...];
  fetchMock.get('resource1', ...);
  fetchMock.get('resource2', ...);
  fetchMock.get('resource3', ...);
   ... then the rest of the test calls
});

不成功.那我该怎么办呢？

我目前正致力于为react-navigation添加jest单元测试,例如:My StackNavigator

const Nav = StackNavigator({
    Home: {
        screen: Home,
    },

    Second: {
        screen: Second,
    }
});

export default class App extends Component<{}> {
  render() {
    return (
      <Nav/>
    );
  }
}

我的主页组件

export default class Home extends Component<{}> {

    _goToNextPage = () => {
        this.props.navigation.navigate('Second');
    }

    render() {
        return (
            <View>
                <Text>Home</Text>
                <Button
                    onPress={this._goToNextPage}
                    title="Go to Second Page"
                >Click to next page</Button>
            </View>
    );
    }
}

我的第二个组件导出默认类Second扩展Component <{}> {

render() {
    return (
        <View>
            <Text>Second</Text>
        </View>
    );
}

} …

我正在使用jest来测试我的反应组件,我正在expect(...).toBeCalledWith(...);测试是否使用特定参数调用了一个函数,并且它可以与值类型一起使用.

问题是我想测试一个将对象作为参数的函数,所以当你调用expect(myFunc).toBeCalledWith(object);测试时总是失败,因为当然两个对象相互比较没有相同的引用.

那我怎么解决这个问题呢？

我要测试的示例代码是

it('the function should be called with the correct object', () => {
    api.submitForm = jest.fn().mockReturnValue(Promise.resolve());
    const wrapper = shallow(<component />);
    const instance = wrapper.instance();
    instance.submitForm();
    const object = {
      foo : 'foo',
      bar: 'bar'
    };
    // this always fails even the function is called with the same object values
    expect(api.submitForm).toBeCalledWith(object);
  });

错误消息将是这样的

Expected mock function to have been called with:
      [{"bar": "bar", "foo": "foo"}]
    But it was called with:
      [{"bar": "bar", "foo": …

我正在将 Jest 测试用例运行到一个 ReactJS 项目中。我正在尝试在 VS code 中调试我的笑话测试用例。测试在命令行上运行正常。但是当我在 VS Code 中启动调试器时，我看到错误。

启动.json

{
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Jest Tests",
                "program": "${workspaceRoot}/xxx/xxx/node_modules/jest/bin/jest",
                "args": [
                    "-i"
                ],


                "internalConsoleOptions": "openOnSessionStart",
                "outFiles": [
                    "${workspaceRoot}/xxx/xxx/**/*"
                ]
            }
        ]
    }

错误

Debugger listening on ws://127.0.0.1:31182/2bf113f1-002f-49ed-ad91-5510affd172a
Debugger attached.
Error: Could not find a config file based on provided values:
path: "/Users/xxx/xxx/xxx-ui"
cwd: "/Users/xxx/xxx/xxx-ui"
Configh paths must be specified by either a direct path to a config
file, or a path to …

假设我有一个类组件，它有这样的东西：

export class Math extends React.Component {
    ...
    someComponentMethod = numb => {
        const sample = numb * 10 
        ...
        const result = numb -5
        return result
    }

是否可以sample在 Jest 中对变量进行测试断言？

我是使用React-Jest-Enzyme进行测试的新手,但是根据我收集到的所有信息,在我看来,大多数测试实际上都会测试React库是否中断,而不是我的实际业务逻辑.

我会给你一些例子,如果我错了,请纠正我:

快照测试:

这个策略有什么用？

从我看到它的主要目的是捕获我的代码的任何不需要的更改.它" stringify "我的组件树,只是注意到是否添加了任何新的换行符,对吧？

所以它主要用于那些我可能会意外按下键盘的情况？或其他人意外地弄乱我的代码？

酶的安装/浅和Jest的

我看到的大多数示例解释了你使用它们的方式是这样的:

const wrapper = mount(<MyComponeny />)
expect(wrapper.find(‘button’).simulate(‘click)).toHaveBeenCalledTime(1)

我能从中获得什么价值？如果我模拟用酶的按钮点击simulate(‘click’),那么我应该期望它会触发点击事件.

我在这里测试的是什么？酶的功能？

还有setState方法酶给我们.如果wrapper.setState({value: ‘some value’)}想改变我的状态,为什么我会看到这样的用例:

wrapper.setState({value: ‘new value’)}
expect(wrapper.state(‘value’)).toBe(‘new value’)

？

为什么我需要测试测试框架/额外的库？

这一切似乎都有点含糊不清

所以这非常简单：

import startOfMonth from 'date-fns/start_of_month';

export const getFirstDayThisMonth = date => {
  const firstDay = startOfMonth(date);
  return firstDay;
};

给定输入（例如）：
1987-02-02T00:00:00.000Z

它返回：
1987-01-31T23:00:00.000Z

当尝试根据此答案中提到的方法生成第一个日期时，会准确地重现该错误：

var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);

运行 jest-tests 时出现错误，并且无法在按预期工作的控制台中重现：

const day1 = new Date('1987-02-02');
undefined
const day2 = new Date(day1.getFullYear(),day1.getMonth(),1)
undefined
day2
Sun Feb 01 1987 00:00:00 GMT+0100 (Central European Standard Time)

如果在第二个解决方案中我还将第四个参数（小时）设置为 1，它会正确处理：

1987-02-02T00:00:00.000Z
返回1987-02-01T00:00:00.000Z

和

2001-03-03T00:00:00.000Z
返回2001-03-01T00:00:00.000Z

但

2002-04-04T00:00:00.000Z
回报2002-03-31T23:00:00.000Z

我真的不知道是什么原因导致了这个问题，当时间设置为 00:00:00 时，感觉好像有一些滚动到前一个日期？ …