标签：reactjs jestjs javascript reactjs-testutils

我正在尝试以开玩笑的方式为“ Thinking in React”(http://facebook.github.io/react/docs/thinking-in-react.html)中显示的示例编写测试.

而且,我很难使用TestUtils.Simulate为搜索输入对象提供更改事件.

/** @jsx React.DOM */

jest.dontMock('../ProductTable.js');
jest.dontMock('../FilterableProductTable.js');
jest.dontMock('../SearchBar.js');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var FilterableProductTable = require('../FilterableProductTable.js');
var SearchBar = require('../SearchBar.js');

var PRODUCTS = [
    {category: 'thing', name: 'glove', price: '$0.50', stocked: true},
    {category: 'thing', name: 'spam', price: '$1.50', stocked: true},
    {category: 'thing', name: 'glam', price: '$9.50', stocked: false},
    {category: 'thing', name: 'blam', price: '$99.00', stocked: true},
    {category: 'thing', name: 'sham', price: '$0.20', stocked: true},
];

describe('FilterableProductTable', function() {
    it('creates the entire table', function () {
        filterableProductTable = TestUtils.renderIntoDocument(
            <FilterableProductTable
                products={PRODUCTS}
                filterText = {''}
                inStockOnly = {false}
            />
        );
        var rows = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'tr');
        expect(rows.length).toEqual(7); // 5 items and 2 headers
    });

    it('searches the table for proper stuff', function() {
        filterableProductTable = TestUtils.renderIntoDocument(
            <FilterableProductTable
                products={PRODUCTS}
                filterText = {''}
                inStockOnly = {false}
            />
        );
        // var inputBox = document.querySelectorAll('#search-box');
        // console.log(inputBox.innerHTML);
        var inputObjects = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'input');
        var inputBox = inputObjects[0];
        // TestUtils.Simulate.keyUp(inputBox, {key: 'a'});
        TestUtils.Simulate.change(inputBox, {target: {value: 'a'}});
        var rows = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'tr');
        expect(rows.length).toEqual(6); // FAILS. This is equal to 7 as in the previous test.
    });
});

有人有建议吗？我是否使用Testutils.Simulate错误？

解决方法:

我最近有同样的问题,只是这样做：

React.findDOMNode(inputBox).value = 'a';
TestUtils.Simulate.change(inputBox);

我无法使Simulate或SimulateNative更改值,因此只能手动更改节点上的值,然后通过Simulate触发更改事件.

React的一位开发人员在github上提到,他们目前正在以相同的方式测试Simulate.change(手动设置值然后触发更改).
我不知道他们为什么在手册中仍然有它(如果我没看错的话,它在0.11下可以运行,但是从0.12开始就失效了).

标签：reactjs,jestjs,javascript,reactjs-testutils
来源： https://codeday.me/bug/20191029/1956558.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。