Question

我想测试反应组件：

export class IdentityPage extends React.Component<PageProps, State> {
    constructor(props: PageProps) {
        super(props);
    }

    componentDidMount() { this.reload(this.props.routeParams.id); }
    render(){....}
}

用于反应路由器，如下所示：

<Router history={hashHistory}>
    <Route path="/">
        <Route path="Identities">
            <Route path=":action/:id" component={IdentityPage} />
        </Route>
    </Route>
</Router>

然而，测试失败了：

无法读取未定义
的属性'id'

当我尝试跑步时：

let pageProps: PageProps = {
    params: {
        action: "view",
        id: "0"
    }
};
let instance = TestUtils.renderIntoDocument(React.createElement(IdentityPage, pageProps));

Answer 1

如果您使用react-router v4，则可以使用<MemoryRouter ...>并使用<Route ...>组件包装您的组件。

MemoryRouter将“URL”的历史记录保存在内存中（不会读取或写入地址栏）。在测试和非浏览器环境中很有用。

例如（from react-router repository）

<MemoryRouter initialEntries={[ '/sushi/california' ]}>
  <Route path="/sushi/:roll" render={({ match }) => {
    return <div>{match.url}</div>
  }}/>
</MemoryRouter>

所以在你的情况下

let instance = TestUtils.renderIntoDocument(
  <MemoryRouter initialEntries={['view/0']}>
    <Route path=":action/:id" component={IdentityPage} />
  </MemoryRouter>
);

Answer 2

我必须更改pageProps以包含routeParams：

public void buttonclick(object sender,eventArgs e)
{
    var connectionString = ConfigurationManager.ConnectionStrings["BUM"].ConnectionString;

    using(SqlConnection con0 = new SqlConnection(connectionString))
    {
        con0.Open();
        using(SqlCommand cmd = new SqlCommand("book_master_insert", con0))
        {
            cmd.CommandType = CommandType.StoredProcedure;              
            cmd.Parameters.AddWithValue("@customer_id", cust_id);
            cmd.Parameters.AddWithValue("@booking_from", ddlfrom.SelectedItem.Text);
            cmd.Parameters.AddWithValue("@booking_destination", ddlto.SelectedItem.Text);
            cmd.Parameters.AddWithValue("@load_type", ddlLoadtype.SelectedItem.Text);
            cmd.Parameters.AddWithValue("@no_of_containers", txt_no_of_container.Text);
            cmd.Parameters.AddWithValue("@booking_pickupdate", txt_date.Text);
            cmd.Parameters.AddWithValue("@booking_pickuptime", txt_time.Text);
            cmd.Parameters.AddWithValue("@booking_createdate", localDate);              
            cmd.ExecuteNonQuery();

            // This is a BAD idea and you should replace this using parametrized queries
            using(SqlCommand cmd2 = new SqlCommand("select booking_ID from booking_master where customer_id='"+cust_id+"' and booking_from='" + ddlfrom.SelectedItem.Text + "'and booking_destination='" + ddlto.SelectedItem.Text + "' and load_type='" + ddlLoadtype.SelectedValue + "' and no_of_containers='" + txt_no_of_container.Text + "' and CAST (booking_pickupdate as date) ='" + txt_date.Text + "' and booking_pickuptime='" + txt_time.Text + "';", con2))
            {       
                using(SqlDataReader rdr = cmd2.ExecuteReader())
                {       
                    while (rdr.Read())
                    {
                        booking_ID = rdr["booking_ID"].ToString();
                    }
                }
            }
        }
    }
}

在页面中，我只是访问let pageProps: PageProps = { params: { action: "view", id: "0" }, routeParams: { action: "view", id: "0" }, }; let instance = TestUtils.renderIntoDocument(React.createElement(IdentityPage, pageProps));而不是routeParams

测试反应路由器内的反应组件

2 个答案: