Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I've just begun to write React test code in TypeScript,
[Login.test.tsx]
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
describe('Login', () => {
const login = shallow(<Login />);
and an error Type '{}' is missing the following properties from type 'Readonly<ILoginInfoProps>'
showed up.
I figured that I'd need to set default values for the props in Login
component, which would be a type of ILoginInfoProps
defined as below.
[ILoginInfoProps.interface.ts]
import { RouteComponentProps } from 'react-router-dom';
export default interface ILoginInfoProps extends RouteComponentProps<{ id: string}>{
I tried to set the default value like the following, but it doesn't compile...
[Login.tsx]
import React from 'react';
import LoginInfo from '../interfaces/LoginInfo.interface';
import ILoginInfoProps from '../interfaces/ILoginInfoProps.interface';
import ILoginInfoState from '../interfaces/ILoginInfoState.interface';
class Login extends React.Component<ILoginInfoProps, ILoginInfoState>{
public static defaultProps: ILoginInfoProps = {
id: '24'
.......
.......
It says Type '{ id: string; }' is not assignable to type 'ILoginInfoProps'. Object literal may only specify known properties, and 'id' does not exist in type 'ILoginInfoProps'.
How can I set a default value so that it won't cause an error in the test code file?
UPDATE
What I've tried...
class Login extends React.Component<ILoginInfoProps, ILoginInfoState>{
public static defaultProps: ILoginInfoProps = {
match: {
id: '24';
class Login extends React.Component<ILoginInfoProps, ILoginInfoState>{
public static defaultProps: ILoginInfoProps = {
match: {
id: string;
–
The reason why it's causing an error is that you are missing some fields when you define
ILoginInfoProps
in your code.
The missing fields are history, match, location
because the interface ILoginInfoProps
that you define extends RouteComponentProps<{}>
.
So you should try this.
public static defaultProps: ILoginInfoProps = {
id: '24',
history: undefined,
location: undefined,
match: undefined
Also, if you want to actually use one of the missing fields somewhere in your code, for example this.props.history.push('/')
, just passing the Login
component like
const login = shallow(<Login />);
isn't going to take you anywhere. Instead, wrap the Login
component like
<Route exact path = "/login" component = {Login}/>
if you want to do {id: string}
your declaration should be
import { RouteComponentProps } from 'react-router-dom';
export default interface ILoginInfoProps extends RouteComponentProps<{}>{
id: string;
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.