Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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;
                Please use the comment section only when you ask me for more background info about my question. When you answer my question, please post an answer with a code snippet as a concrete example, instead of just writing one line comment like "Just use XXX and the problem will be solved. " in the comment section.
– Sean2014
                Aug 20, 2020 at 8:50
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;
                Thank you for the answer. I updated the declaration exactly as shown in your answer, and then updated the Login component (see the "UPDATE" part at the bottom of my original post), but for some reason it didn't work...  I got an error Type '{ id: string; }' is not assignable to type 'match<{}>'.   Object literal may only specify known properties, and 'id' does not exist in type 'match<{}>'.ts(2322) index.d.ts(76, 5): The expected type comes from property 'match' which is declared here on type 'ILoginInfoProps'
– Sean2014
                Aug 20, 2020 at 10:00
        
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.