反应测试历史通过

Question

问题陈述

我正在使用 Jest 创建 React 应用程序。在我的测试中，我只是想渲染一个需要在加载之前将历史传递给状态的组件。我一直在研究并试图让这个工作一段时间。我一直在使用的来源显示了如何将历史记录传递给路由器 - https://testing-library.com/docs/example-react-router/

当运行测试出现错误时

“无法读取未定义的属性 'state'”

我认为这是因为在测试期间没有正确传递历史记录。

我真的是测试新手，希望有人能给我指出正确的方向，让它在测试期间成功渲染组件。谢谢！

代码

渲染的组件：

const [data, setData] = useState({
            pack: props && props.location.state && props.location.state.hasOwnProperty('package') 
                ? props.location.state.package 
                : ''
        });

const ContactPage = (props) => (
    Contact &&
    <Layout>
            
            <div className="contact-Letter">
                    {Contact(props)}
            </div>
        
    </Layout>
);

测试组件"attempts":

import React from 'react';
import Contacts from './contact'
import { BrowserRouter as Router, } from "react-router-dom";
import { render, screen } from '@testing-library/react';
import { createMemoryHistory } from "history";


const {
    ContactPage
} = Contacts();


test("renders location state", () => {
    const history = createMemoryHistory();
  
    render(
      <Router history={history}>
        <ContactPage />
      </Router>
    );
  
  });

错误：

 TypeError: Cannot read property 'state' of undefined

    > 29 |             pack: props && props.location.state && props.location.state.hasOwnProperty('package')
         |                                           ^
      30 |                 ? props.location.state.package
      31 |                 : ''
      32 |         });

Answer 1

我正在关注 testing-library.com 示例，并意识到我必须做的所有不同的事情就是将历史记录作为道具传递给我的主要组件，而不是路由器。所以我的测试代码只需要看起来像这样。

it("renders location state", () => {
    const history = createMemoryHistory();

    render(
        <Router>
            <ContactPage location={history}/>
        </Router>
    )
  });

Answer 2

尝试在 const history = createMemoryHistory()

正下方添加 history.push = jest.fn()

如果你想测试历史更新，你会做： expect(history.push).toHaveBeenCalledWith('foo/bar/whatever')

反应测试历史通过

React Testing with history passed

javascript

history

reactjs

jestjs

react-testing-library

问题陈述

代码

渲染的组件：

测试组件"attempts":

错误：