Question

我正在尝试渲染我的组件的快照，并设法测试我的this.props.data函数被调用，我的数据被设置为我的componentDidMount中的console.log在运行我的测试时显示。

当我的组件加载时，由于检查了render()中的null，我的快照中的组件返回componentDidMount。然后加载<one/>并设置传递给reducer的数据以更新状态。

我正在尝试渲染显示<two/>，<three/>，this.props.data的快照。有没有办法直接设置componentDidMount() { if (this.props.data === null) { this.props.axios.get(`http://localhost:3000/users/123`) .then(res => { console.log("getting in here and res is :" + res) // {data: is showing} this.props.setData(res.data); }) } } render() { if (this.props.data === null) { if (this.props.error) { console.log(this.props.error); } return null; } return <div> <One oneData={this.props.data.one}/> <Two twoData={this.props.data.two}/> <Three threeData={this.props.data.three}/> </div> }在我的情况下，以便我可以绕过而不是进入＃34;如果＆＃34;渲染我所有的孩子组件。

应用组件：

dispatch => ({
    setData: data => dispatch({ type: "LOAD_DATA", dataPayload: data 
})

在同一个组件中，我将调度到更新商店的reducer：

import React from "react";
import App from "../../src/components/App";
import reducers from "../../src/reducers";
import { createStore } from "redux";
import { Provider } from "react-redux";
import renderer from 'react-test-renderer';
const store = createStore(reducers);
jest.mock('axios', () => ({
    get: jest.fn()
 }));
import {get} from "axios";
import axios from "axios";

it('renders correctly', async() => {
  const p = Promise.resolve({
       data: {
          "_id" : "123",
          "location" : "LONDON",
       }
  });

  const component = renderer.create(
      <Provider store={store}>
           <App axios={axios}/>
      </Provider>
  );

  console.log(store); 
  let tree = component.toJSON();

  await p;

  console.log("TREE :" + tree); // is returning null
  expect(tree).toMatchSnapshot();

});

测试文件：

{{1}}

Answer 1

您可以手动将道具传递给App。请参阅以下示例：

  const data = {
    myProp: ...
  }

  const component = renderer.create(
    <App {...data} />
  );

  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();

Answer 2

1，您的解决承诺未与您的模拟axios =＆gt;一起使用对您的组件没有影响

第二，即使不知何故你可以通过你的模拟axios返回你已经解决的承诺，你仍然没有你想要的。这是因为renderer.create(...)不会等待您执行第二次渲染。

=＆GT;所以你当前的测试=＆gt;没有办法满足你的要求。

解决方案：

确定您的受试者（SUT）以及您想要测试的行为。

在这种情况下，您需要组件的测试呈现行为。这意味着你必须摆脱其他依赖（这是你的生命周期方法）。简单地说：

App.componentDidMount = jest.fn(); // this is the way to replace real implementation with a mock

然后：

const mycomp = render.create(<App myProp={null} />); // this is the 1st case (null data)
expect(mycomp.toMatchSnapshot());

mycomp.update(<App myProp={data} />);
expect(mycomp.toMatchSnapshot()); // this is the 2nd case (has data)

注意：我不知道你的props =＆gt;的结构所以你必须编辑以适合你的真实代码，上面就是一个例子。

用redux设置组件道具的jest快照测试

2 个答案: