React 测试库 - 使用渲染时 TypeError trim 不是 function

Question

I am creating a simple test with Jest + React Testing Library. However, when I try to render my it crashes in de code. This is strange because the application does run smoothly. It seems like the props are undefined or empty.

Test file:

test('renders learn react link', () => {
  const { container } = render(<App />);
});

App:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Child} from './Child';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
          <Child/>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Child of App:

import * as React from "react";

export class Child extends React.Component<TheProps>{
     const testString = this.props.testVariable.trim();

     render(){
            return(
                <div>Just a simple div</div>
            )
        }
}

interface TheProps{
     testString : string
}

Answer 1

The issue is here you have missed to pass the property of testVariable to <Child /> so if you mark the prop is optional, then you should check it before proceed anything. Additionally, you code looks wrong by defining a variable inside a class like above.

Anyway you can either define your default property or null check the property:

export class Child extends React.Component<TheProps> {
    // set default props
    static defaultProps = {
        testVariable: ""
    }

    render() {
        const testString = this.props.testVariable.trim();
        return (
            <div>Just a simple div</div>
        )
    }
}

Or null checking:

const testString = this.props.testVariable?.trim();