tha*_*bit 5 typescript reactjs jestjs next.js
我是 TypeScript 的新手,目前正在使用 Next.js、Redux、Jest 等设置 React 应用程序。但是,在运行应用程序时,我收到一个类型错误,该错误会停止应用程序。
似乎问题出在我传入的道具上。这个组件被一个 HOC 'withRouter' 组件包裹,从 next 返回相同的组件和路由信息,即 {router: {pathname: /}}
我的组件 (Logo.tsx)
import React, { SFC } from 'react';
import { withRouter, WithRouterProps } from 'next/router';
import LogoStyled from './Logo.styled';
interface LogoProps {
router: { pathname: string };
}
const Logo: SFC<LogoProps & WithRouterProps> = ({ router }) => {
const { pathname } = router;
return pathname === '/' ? (
<LogoStyled>Home</LogoStyled>
) : (
<LogoStyled>Not Home</LogoStyled>
);
};
export default withRouter(Logo);
Run Code Online (Sandbox Code Playgroud)
我的笑话测试 (Logo.test.tsx)
import React from 'react';
import { shallowToJson } from 'enzyme-to-json';
import 'jest-styled-components';
import { shallowWithTheme, mountWithTheme } from '../../../tests/testHelpers';
import Logo from './Logo';
const home = { pathname: '/' };
const about = { pathname: '/about' };
describe('Logo', () => {
it('should render correctly', () => {
const element = shallowWithTheme(<Logo router={home} />);
expect(shallowToJson(element)).toMatchSnapshot();
});
it(`should display 'Home' for homepage`, () => {
const element = mountWithTheme(<Logo router={home} />);
expect(element.text()).toBe('Home');
});
it(`should display 'Not Home' for homepage`, () => {
const element = mountWithTheme(<Logo router={about} />);
expect(element.text()).toBe('Not Home');
});
});
Run Code Online (Sandbox Code Playgroud)
结果出错:
components/atoms/Logo/Logo.test.tsx:13:43 -
error TS2322: Type '{ router: { pathname: string; }; }'
is not assignable to type 'IntrinsicAttributes & Pick<LogoProps &
WithRouterProps<Record<string, string | string[]>>, never> & { children?: ReactNode; }'.
Property 'router' does not exist on type 'IntrinsicAttributes &
Pick<LogoProps & WithRouterProps<Record<string, string | string[]>>,
never> & { children?: ReactNode; }'.
Run Code Online (Sandbox Code Playgroud)
我猜这是我遗漏的一件很明显的事情,但我目前正在努力理解这一点。感谢您提供的任何帮助。
归档时间: |
|
查看次数: |
1189 次 |
最近记录: |